[css-d] Faux columns - are there only two solutions?
Hi, http://www.neilparishmep.org.uk/new/index.html I want the right hand column to run down the entire page regardless of the amount of content. For the majority of the pages the central column will be taller than the right - but by varying amounts. I do not want to add a fixed height to the central column because this would then have to have an - overflow: scroll; which would look ugly. Likewise I cannot fix the right hand column to greater than it's content because if the centre column does not have much content this too would look weird. So I was pointed in the direction of faux columns. Thanks Mandy 7 George, but your example can only be used for fix width layouts. The example; http://alistapart.com/articles/fauxcolumns/ So, I looked for alternatives and found this; http://www.ilovejackdaniels.com/css/faux-columns-for-liquid- layouts/ (this also works 3 column; http:// meyerweb.com/eric/thoughts/2004/09/03/sliding-faux-columns/) But this only works for liquid layouts. - i have a liquid central column (expandable), but a fix width right hand column. From looking at these two examples I can't picture how background-repeat: y; could work for me. If this is indeed the case could someone help me to make the changes to my 3 columns - to make the entire page liquid. I only ask because of all the hard work I have done in order to get this layout as it is (plus a deadline). Kind regards, Chris Christopher Blake [EMAIL PROTECTED] 07816163420 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Faux columns - are there only two solutions?
In addition - I have just found elastic layout; http://nickcowie.com/ 2005/elastic-faux-columns/ I've just started reading it so hopefully it will help. Christopher Blake [EMAIL PROTECTED] 07816163420 On 9 Jan 2007, at 08:10, Christopher Blake wrote: Hi, http://www.neilparishmep.org.uk/new/index.html I want the right hand column to run down the entire page regardless of the amount of content. For the majority of the pages the central column will be taller than the right - but by varying amounts. I do not want to add a fixed height to the central column because this would then have to have an - overflow: scroll; which would look ugly. Likewise I cannot fix the right hand column to greater than it's content because if the centre column does not have much content this too would look weird. So I was pointed in the direction of faux columns. Thanks Mandy 7 George, but your example can only be used for fix width layouts. The example; http://alistapart.com/articles/fauxcolumns/ So, I looked for alternatives and found this; http://www.ilovejackdaniels.com/css/faux-columns-for-liquid- layouts/ (this also works 3 column; http:// meyerweb.com/eric/thoughts/2004/09/03/sliding-faux-columns/) But this only works for liquid layouts. - i have a liquid central column (expandable), but a fix width right hand column. From looking at these two examples I can't picture how background-repeat: y; could work for me. If this is indeed the case could someone help me to make the changes to my 3 columns - to make the entire page liquid. I only ask because of all the hard work I have done in order to get this layout as it is (plus a deadline). Kind regards, Chris Christopher Blake [EMAIL PROTECTED] 07816163420 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Faux columns - are there only two solutions?
Hello again =) http://www.neilparishmep.org.uk/new/index.html I had an idea - I could place a background image to the #content that holds both the middle and right columns. I could then position the image to the right so that it gives the faux impression (I only need the column to start at the top of #content div anyway). Just to check that the #content was working to 100% i have dropped the 'loud' blue in there. It's not stretching to fit its content. It is absolute so I have given it a bottom of 0px too - and it still isn't working. I am one confused person - please help. Christopher Blake [EMAIL PROTECTED] 07816163420 On 9 Jan 2007, at 08:21, Christopher Blake wrote: In addition - I have just found elastic layout; http:// nickcowie.com/2005/elastic-faux-columns/ I've just started reading it so hopefully it will help. Christopher Blake [EMAIL PROTECTED] 07816163420 On 9 Jan 2007, at 08:10, Christopher Blake wrote: Hi, http://www.neilparishmep.org.uk/new/index.html I want the right hand column to run down the entire page regardless of the amount of content. For the majority of the pages the central column will be taller than the right - but by varying amounts. I do not want to add a fixed height to the central column because this would then have to have an - overflow: scroll; which would look ugly. Likewise I cannot fix the right hand column to greater than it's content because if the centre column does not have much content this too would look weird. So I was pointed in the direction of faux columns. Thanks Mandy 7 George, but your example can only be used for fix width layouts. The example; http://alistapart.com/articles/fauxcolumns/ So, I looked for alternatives and found this; http://www.ilovejackdaniels.com/css/faux-columns-for-liquid- layouts/ (this also works 3 column; http:// meyerweb.com/eric/thoughts/2004/09/03/sliding-faux-columns/) But this only works for liquid layouts. - i have a liquid central column (expandable), but a fix width right hand column. From looking at these two examples I can't picture how background-repeat: y; could work for me. If this is indeed the case could someone help me to make the changes to my 3 columns - to make the entire page liquid. I only ask because of all the hard work I have done in order to get this layout as it is (plus a deadline). Kind regards, Chris Christopher Blake [EMAIL PROTECTED] 07816163420 _ _ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problem across all browsers: non-expanding div loses content
Thanks for that. I could have sworn I hadn't specified a height - it's amazing
what you miss when you're looking really hard! Quick question about the * html
bit, if that's OK. What's that doing exactly?
* html .content {
overflow: visible;
}
In the .content I've added overflow: hidden, but here we're saying overflow:
visible.
Is that a bug fix or something? I can't find reference to it in my books.
Thanks
Nicole
- Original Message
From: Gunlaug Sørtun [EMAIL PROTECTED]
To: Nicole Aebi [EMAIL PROTECTED]
Cc: css-d@lists.css-discuss.org
Sent: Monday, 8 January, 2007 11:36:44 PM
Subject: Re: [css-d] Problem across all browsers: non-expanding div loses
content
Nicole Aebi wrote:
[... ]The div doesn't expand in height so the dark text drops into
the dark brown background and you can't see it.
www.aebi-moyo.com/travel.htm
Changing to...
.content {
margin-left:auto;
margin-right:auto;
margin-top:60px;
width:715px;
/* height:400px; -- delete this */
padding: 80px 40px 40px 40px;
background-color:#EBE1CF;
filter:alpha(opacity=80);
opacity:0.80;
-moz-opacity:0.80;
overflow: hidden /* add */;
}
...and adding...
* html .content {
overflow: visible;
}
...should solve that problem
regards
Georg
--
http://www.gunlaug.no
Send instant messages to your online friends http://uk.messenger.yahoo.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE problem Negative Margin
First time did not seem to get through, I must remember to use the right email account. I have a test page http://gamma.hostaga.com/~nic/Newspapers/Test3.htm which works fine (acceptably) in most browsers but not IE, in IE 7 the first character of the text disappears. In IE 6 you get and extra line. By the way I do not expect the 'first-child' to work in IE 6. It is designed to be best in FF 2. Any suggestions. Nic __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE problem Negative Margin - Fx 2 Mac first-letter misalignment
Nic Pulford wrote:
I have a test page http://gamma.hostaga.com/~nic/Newspapers/Test3.htm which
works fine (acceptably) in most browsers but not IE, in IE 7 the first
character of the text disappears. In IE 6 you get and extra line. By the way
I do not expect the 'first-child' to work in IE 6. It is designed to be best
in FF 2.
I don't see the extra line problem in IE6.
In IE7,
.art_cnt {zoom:1;}
provides some stability [1] for the first-letter.
But in Firefox 2 (Mac), the first letter is misaligned (too low), but
not in Fx 2 (PC). Others have probably more info about that.
Ingo
[1] http://www.satzansatz.de/cssd/onhavinglayout.html
--
http://www.satzansatz.de/css.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE problem Negative Margin - Fx 2 Mac first-letter misalignment
On Jan 9, 2007, at 9:29 PM, Ingo Chao wrote: But in Firefox 2 (Mac), the first letter is misaligned (too low), but not in Fx 2 (PC). Others have probably more info about that. It is a bug... https://bugzilla.mozilla.org/show_bug.cgi?id=294733 In some cases, Firefox PC/Linux suffer from similar issues, but I forgot the details. Philippe --- Philippe Wittenbergh http://emps.l-c-n.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Strange difference in IE
Try this:
#menu li {
float: left;
width: 7em;
margin:0 .5em 0 0;
text-align:center;
position:relative;/**/
height:1.25em;/*1.25em is approx. the default line-height*/
}
#menu li ul {
position: absolute;
width: 7em;
/*left: -999em;*/
display:none;/*instead of setting left*/
top:1.25em;/**/
left:0;/**/
}
#menu li:hover ul, #menu li.sfhover ul {
/*left: auto;*/
display:block;/*instead of setting left*/
}
- Andy :-)
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Faux columns - are there only two solutions?
There's more than two. Another alternative would be to have your
fluid-width content and fixed width column (which I think you're looking
for)...
Set an outer wrapping div that's fluid in width. Set the background of
that div with the background color for the content. But also set a
background *image* for the wrapper with the sidebar stuff (be it a
repeating graphic or a solid color) - but in the stylesheet, set it only
to repeat-y, so it repeats down the side rather than across the top.
No matter what column is the longest, it'll push the wrapper div down
and the sidebar and content will remain the same height. Your content
will be fluid (whether you set it as a separate div, or just use it to
take up 100% of the wrapper width and give it a 200px padding on the
left for your sidebar), yet contained within the wrapper (so if you want
the content to be fluid, but NOT exactly 100% of the page, you can set
the wrapper to be, say 75% of the window, and the content will be 100%
of the wrapper minus the sidebar - hope that makes sense!).
So your horizontal is taken care of.
But to make the wrapper div 100% in height, you have to set the height
in your stylesheet:
html, body, #wrapper {
height:100%; /* for IE */
min-height:100%; /* for Mozilla*/
}
That makes the wrapper div 100% of the screen, and then the content will
push it out further if there's more than what sits in the screen window.
Now, keep in mind, dear, that I'm saying all of this from memory - I've
done it before this way, but it's been a few layouts ago, and I recall a
few issues with the method I'm describing above. But I also recall that
playing with it a bit got it to do exactly what you wanted - it didn't
take much. So hopefully this gets you started. (Im sure some other,
better, opinions will follow, as well as some corrections for what I'm
saying!)
~Shelly
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] (Argh!) Why does the text in my nested DIV vanish off the bottom of the screen?
It annoys me so: http://www.polarissc.com/csstest/directorlevelselling.html It's deadline day! Any help will be gratefully received. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] (Argh!) Why does the text in my nested DIV vanish off the bottom of the screen?
On 09/01/07, Christian Kavanagh [EMAIL PROTECTED] wrote: It annoys me so: http://www.polarissc.com/csstest/directorlevelselling.html It's deadline day! Any help will be gratefully received. Hi, Add this to .core: margin-bottom:150px; That' ll solve your problem. However, the big problem is that you're using a horrible method with those images. That mirrored image should be a background image inside .core and the clickable email link should not be a part of it and an image map. It should be a separate image that you include with an img tag and that you position in the right place (probably using position:absolute and bottom:50px; right:20px; or something like that). Hope this helps, Rafael __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problem across all browsers: non-expanding div loses content
Nicole Aebi wrote:
Thanks for that. I could have sworn I hadn't specified a height -
it's amazing what you miss when you're looking really hard!
Tell me about it... :-)
Quick question about the * html bit, if that's OK. What's that doing
exactly?
* html .content { overflow: visible; }
In the .content I've added overflow: hidden, but here we're saying
overflow: visible.
Is that a bug fix or something? I can't find reference to it in my
books.
It's a bug fix, with a 'star html' hack to target only IE versions prior
to IE7 (and IE7 in quirks mode).
The regular 'overflow: hidden' is meant to make the container expand by
establishing a new 'block formatting context'[1].
- Works as intended in new, standard compliant, browsers.
- IE6 falls back on its 'hasLayout'[2] bug, and actually ignores the
'hidden' part.
- Older IE/win will see 'hidden' and no height, and this combination may
make them hide the entire content-container. This is the last thing we
want, I guess, so the fix is for older IE5.x/win in case one should
happen to pass by.
regards
Georg
[1]http://www.w3.org/TR/CSS21/visuren.html#q15
[2]http://www.satzansatz.de/cssd/onhavinglayout.html
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Applying padding to p is only effecting first and last words.
http://www.neilp.newwavemedia.co.uk/index.html (url) http://www.neilp.newwavemedia.co.uk/stylefile/style1.css (css) Hi all, I need to apply padding to the bottom and left of my p. It is in a flexible container and if I add padding as it is, it only effects the first word of the paragraph. I need it to effect the entire paragraph. Is it something to do with box, block??? Christopher Blake [EMAIL PROTECTED] 07816163420 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Vertical scroll is frozen in Firefox only
I would welcome help with a problem I'm having with my Welcome page at
http://www.AdamsStreet.org .
The problem is that the vertical scroll-bar appears correctly, but is frozen.
It can't scroll the content of the #nachasNotes DIV.
This happens in Firefox but not MSIE. (Those are the only browsers I have.) I
searched and found a thread back in 2005 that seemed
similar at first but didn't help. (Maybe I didn't understand it right.)
==
My Welcome page contains:
STYLE#nachasNotes P STRONG {font-size:11;}/STYLE
?php include ../includes/nachas-notes.php ; ?
=
The included file contains:
DIV ID=nachasNotes
TABLE CELLPADDING=4 ID=nachasTable
TR
TD STYLE=color:#ff; font-size:10px;
font-family:verdana,arial,helvetica,sans-serif;
PSTRONGNachas Notes:/STRONG/FONT/P
PCongratulations to Beth and Ronny Drapkin on their tenth anniversary,
December 21st! /P
P..A VERY, VERY LONG LIST OF ONE-LINE PARAGRAPHS GOES HERE../P
/TD/TR/TABLE
/DIV
===
The #nachasNotes DIV is inside a #PageContent DIV. The external CSS file
contains:
#PageContent {
position:absolute; left: 131px; top: 111px;
width:670px; height:400px; z-index:2;
}
#nachasNotes {
position:absolute; width:461px; height:445px; z-index:2; left: 0px; top: 214px;
background-color: #FF; layer-background-color: #FF; border: 1px none
#00; overflow: auto;
ALIGN:left;
/* width is either 259 or 461 depending on if it is to fill under the
slideshow and headlines, or only under the slideshow */
}
=
The external css files are:
http://www.AdamsStreet.org/css/content.css (this file has the page-specific
css stuff, and is proably the source of this problem)
http://www.AdamsStreet.org/css/header.css (has the stuff that is the same for
all pages on the site),
and http://www.AdamsStreet.org/css/headlines.css .
Here's what triggered the problem:
The site had used CSS extensively and successfully; the scroll-bars had worked.
But I recently converted the site, in order to
separate ever-changing content from stable presentation html. In preparation
for migrating to something that would let
non-technical people update the content.
So I pulled the CSS styles from within all the pages, out into an external file.
Then I added php variable definitions at the top of each file to define
page-specific stuff like title, keywords, header-image, etc.
And then I 'include' one standard StandardHead.php and StandardBody.php that
use all those definitions.
So now all the files are identical except for their main #PageContent DIV.
This was all intended as a precursor to custom-writing a
template and some Components to redo the site in Joomla so that I don't have to
maintain the content anymore.
The Welcome page is more complex than the others and hasn't yet received all
the CSS cleanup like the other pages. Somewhere along
the line, this scrollbar stopped working, and I only just noticed it now.
(Another oddity of the changeover is that I simetimes have to refreshh the
pages a few times before the content all appears
correctly. But that is probably a server speed problem, or related to the site
redirection, rather than CSS.)
If you've made it to the bottom of this post, thanks for listening!
---Jordan
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Faux columns - are there only two solutions?
Christopher Blake wrote: http://www.neilparishmep.org.uk/new/index.html I had an idea - I could place a background image to the #content that holds both the middle and right columns. That's right! It's not stretching to fit its content. It is absolute so I have given it a bottom of 0px too - and it still isn't working. I am one confused person - please help. Confusion sounds like a good start :-) I haven't looked through your latest CSS, but you're somewhat on the right track. The 'faux column' background image should be on an outer container, and that container shall stretch in height with its content and give the visual illusion you're after. That's how the 'faux column' article... http://www.alistapart.com/articles/fauxcolumns/ ...describe it, so maybe you should read that article a few more times. Note that absolute positioned content-elements will be ignored though. Floats and elements in normal flow will be contained - at will. As for 'more than two solutions'... Well, there are many solutions and variants. The one you're working on is one of the easiest and most used though, so I think you should stick with it until you have it under control. There's the 'image-less faux column', like the variant I use here... http://www.gunlaug.no/contents/molly_1_18.html (got to update that page-content :-) ) ...but, as you'll find by looking at the source-code: it's bloated with a number of extra wrappers. The page is just a set of overlapping elements controlled mainly by positive and negative margins, that are individually styled to provide an illusion - like the upside-down side columns with footer. Those extra wrappers also give me a very flexible layout-base, so I can rearrange and redesign for ever without touching the source-code. My example is a suitable solution for a designer's testing-ground, but a bit too heavy (IMO) for regular web pages. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Applying padding to p is only effecting first and last words.
Christopher Blake wrote: http://www.neilp.newwavemedia.co.uk/index.html ( http://www.neilp.newwavemedia.co.uk/stylefile/style1.css I need to apply padding to the bottom and left of my p. Delete display inline on the p and try it. Best, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Vertical scroll is frozen in Firefox only
Jordan Lee Wagner wrote:
http://www.AdamsStreet.org .
The problem is that the vertical scroll-bar appears correctly, but is
frozen. It can't scroll the content of the #nachasNotes DIV. This
happens in Firefox but not MSIE. (Those are the only browsers I
have.)
The problem seems to be 'stacking-level' - not 'freeze', as the entire
#nachasNotes DIV is covered by other elements and can't be reached in
Firefox. You'll notice that you can't select text inside that DIV either
in Firefox, which is a clear indicator of what's going on.
Solution: since it is an absolute positioned element, lift it by adding...
#nachasNotes {z-index: 10;}
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Strange difference in IE
The menu works wonderfully now, thanks... it hadn't occurred to me to set
the positions of the sub menus, but I can see why you'd need it.
I was hoping that fixing the menu was going to fix everything, but I'm still
seeing the other issues (the double bottom margin in pre IE 7 as well as the
motto being cut off half way in IE 6)... if anyone has any ideas on those,
I'd love to hear them
current version at http://zjs.name/csite/2/template.html
Again, thanks for the fix; wouldn't have come up with that on my own...
Zach
On 1/9/07, Andy Harrison [EMAIL PROTECTED] wrote:
Try this:
#menu li {
float: left;
width: 7em;
margin:0 .5em 0 0;
text-align:center;
position:relative;/**/
height:1.25em;/*1.25em is approx. the default line-height*/
}
#menu li ul {
position: absolute;
width: 7em;
/*left: -999em;*/
display:none;/*instead of setting left*/
top:1.25em;/**/
left:0;/**/
}
#menu li:hover ul, #menu li.sfhover ul {
/*left: auto;*/
display:block;/*instead of setting left*/
}
- Andy :-)
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Vertical scroll is frozen in Firefox only
Jordan Lee Wagner wrote: I would welcome help with a problem I'm having with my Welcome page at http://www.AdamsStreet.org . The problem is that the vertical scroll-bar appears correctly, but is frozen. Dunno. But with no doctype and 118 validation errors you'll have difficulty getting the page to behave cross-browser. Regards, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Vertical scroll is frozen in Firefox only
On 09/01/2007 17:12, Jordan Lee Wagner wrote:
The problem is that the vertical scroll-bar appears correctly, but is
frozen. It can't scroll the content of the #nachasNotes DIV. This
happens in Firefox but not MSIE. (Those are the only browsers I
have.) I searched and found a thread back in 2005 that seemed
similar at first but didn't help. (Maybe I didn't understand it
right.)
The div with an id of 'headlineStories' is stretching to cover the
scrollbar. Try giving it a background colour to see it.
This CSS is causing it:
#headlineStories {
...
height:650px;
...
}
This is in content.css .
HTH
Brad
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Weird IE7 Problem
Hi I'm working on the following page (sorry for long URL): http://www.serviceworksglobal.com/demo/pages/case_studies_testimonials/computacenter.html I've encountered a weird problem with IE7. If I right click on one of the images and select 'Properties' then the content gets cut off just below the main heading. The page retains it's initial length but the content disappears. Re-sizing the browser window brings the content back. I've tried this on an IE7 on XP and an IE7 on Vista. I assumed this was some relation to the peek-a-boo bug, but causing hasLayout on the main page elements didn't seem to have any effect (and besides, it doesn't happen in IE6). I tried to recreate the problem in a simple version of the basic layout but couldn't, so I assume one of the more complex bits of the layout is causing the problem, I just have no idea which bit. I know it doesn't currently validate, because of the onresize attribute, but IE7 reports it's rendering in CSS1Compat mode. Anyone seen a similar issue before? I'm not even sure what to search for in Google, any mention of IE and disappearing content brings up a load of stuff about the peek-a-boo bug. Rob __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Feedback on rounded corners for a menu
MATTHEW BERNHARDT wrote: What I'm aiming for is to have rounded corners on all 4 corners of each of the items in a menu. This leads me to several apparent constraints: 1 - Because all 4 corners will need to be rounded, the sliding doors[2]technique doesn't seem like it will work as that technique only provides for 2 sides, not 4 corners. If the items are either fixed width or fixed height 2 images (or pieces of one image) will suffice. Otherwise I think you will need four. 2 - As a menu, the markup I'm working with should ideally be a list. I agree. 3 - Another aspect of menus is that the typically don't have a lot of text to use for hooks for CSS. But assuming your menu will be a list of links, you already have two hooks - the li and the a. Wrap the text in a span and you're almost there. 4 - This one has me pulling out what little hair remains - I'm up against a self-imposed limit for the number of images on these pages, so I'm trying to combine rounded corner images into 1 and then use clipping to select only the corner I'm interested in. I think one image is possible with CSS directing which bit should be displayed. Clip is an interesting proposition, however... the gist of the HTML is (for one menu option) : li class=item1img class=testul alt= src=clipround.gif width=6 height=6 /img class=testur alt= src=clipround.gif width=6 height=6 /img class=testll alt= src=clipround.gif width=6 height=6 /img class=testlr alt= src=clipround.gif width=6 height=6 /Knowlton School/li IMO this is extremely unattractive and needlessly repetitive markup. I think presentational images (like the ones we're talking about) should really be shifted into the stylesheet as backgrounds. Then you can use background-position to dictate which part of the image is seen. I think this is the basis of the sliding doors technique, no need for clipping. The list gurus will be better able to help with the nuts and bolts, but this is my two cents. Of course you could try something like http://www.html.it/articoli/nifty/index.html (nifty corners) which uses javascript and the DOM to achieve pretty much the same thing. Cheers, D# __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Weird IE7 Problem
Rob Crowther wrote: Hi I'm working on the following page (sorry for long URL): http://www.serviceworksglobal.com/demo/pages/case_studies_testimonials/computacenter.html I've encountered a weird problem with IE7. If I right click on one of the images and select 'Properties' then the content gets cut off just below the main heading. The page retains it's initial length but the content disappears. Re-sizing the browser window brings the content back. I've tried this on an IE7 on XP and an IE7 on Vista. Thats a pretty cool guillotine-like effect. I think the problem is this construction body --#outer #wrapper #outer is positioned relatively, but has no layout. #wrapper gets layout via zoom and a height of 180px in ie7.css when you click on an img's properties, #outer guillotines #wrapper to its specified height, 180px, and doesn't look further. Interesting, since they have redesigned the position:relative in IE7. Again, a rule of thumb is: whenever a relatively positioned block has to contain a layout-block, be sure that the relatively positioned block has layout, or funny things like disappearance will happen. Move the zoom to #outer (applying layout via zoom and height in #wrapper is tautologous.) Ingo -- http://www.satzansatz.de/css.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problem with IE
Danielle Tilley wrote:
Does anyone have any idea why on my sites homepage
www.ponderosawebsolutions.com/OREND
the div containing the logo and quote shows up in Firefox but not in
IE7. I haven't checked any other browsers yet.
IE needs a 'hasLayout'[1] trigger.
I suggest you add...
#content {height: 1%;}
...to fix IE's problem.
Opera 9.x and Safari 2.x render it like Firefox 2.x does.
Remark: you should also test with browser's font-resizing options, and
improve the design so it can take a bit of stress.
regards
Georg
[1]http://www.satzansatz.de/cssd/onhavinglayout.html
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] another ie bug - jumping graphic menu
Hi, How do you keep the menu from jumping? http://www.designhosting.biz/newsite/intro.html I have tried several fixes but it never works. Also, could someone please test this in ie7 and see if there are more problems? Thank you! Sincerely, Melinda Odom Design Hosting, Inc. www.designhosting.biz 479-471-0891 -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.5.432 / Virus Database: 268.16.7/620 - Release Date: 1/8/2007 4:12 PM __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] a vertical inline list - IE issue
Hi, I have a navigation block displayed using a vertical list of inline list elements (created by floating list items beneath each other). The width of each list item is determined by the width of its content and cannot be fixed due to design constraints. This solution works quite well but IE is not quite playing ball. I have created an example to show the problem. http://www.irazu.co.uk/temp/index.html Basically the text in the list items is wrapping too soon in IE. In Firefox and others it displays as I would have expected. If anyone can shed any light on what is causing this, or offer a solution I'd be most interested to hear :-) Thanks Jon _ MSN Hotmail is evolving check out the new Windows Live Mail http://ideas.live.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Weird IE7 Problem
Ingo Chao wrote: Again, a rule of thumb is: whenever a relatively positioned block has to contain a layout-block, be sure that the relatively positioned block has layout, or funny things like disappearance will happen. It's strange that it's triggered by an event in the browser chrome rather than something occurring in the page itself though. Move the zoom to #outer (applying layout via zoom and height in #wrapper is tautologous.) Thanks - that seems to have worked, I was banging my head on the desk this afternoon. Rob __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] need some help - MAC IE broswer + Safari problems and some text tag help
hiptojive @hotmail.com wrote: here's the link: www.thestudioformovement.com of course any other feedback would also be very helpful and appreciated. It seems you've received help with your layout; here's a good font reference: http://www.w3.org/Style/Examples/007/fonts.html View this page in different browsers to see how the fonts look. -- *JONO YOUNG* Designer | Developer | Illustrator Charleston Web Solutions http://www.charlestonwebsolutions.com /Bringing Higher Standards to the Lowcountry/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Attributes Classes: Custom DOM Attributes for Fun and Profit
Hi, everyone. I'm Pete, and I'm a web developer from Toronto, Canada. I published an article last night, and I had three different people suggest that its subject matter would be of interest to many on your list.. so allow it to serve as my introduction. http://unspace.ca/discover/attributes/ Here is how I describe my piece: XHTML gives us the ability to extend our markup with customized, semantically meaningful attributes. While the battle between class and attribute might be a holy war to some (and unknown to most others) the fact remains that attribute name value pairs are easier to read and understand, and only attributes allow you to associate a value with your meta-data. Extending XHTML elements in my projects has made me think of how to solve problems in new and better ways. It has made me a stronger JavaScript artisan. In this article, I explain several examples and provide functions for working with your own custom attributes. I'm definitely interested in feedback, so bring it on. Pete __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
