Re: [css-d] Background image position
On Jun 29, 2011, at 1:11 AM, Alan Gresley a...@css-class.com wrote:
On 29/06/2011 1:55 PM, John D wrote:
On 29/06/2011 9:01 AM, Tom Livingston wrote:
List,
Is it possible to position a background image on the body of a page so
that the LEFT EDGE of the image is always at 50% of the viewport? Ive
googled a bit but not sure im using the right search terms...
Of course it is possible. put this code for your background:
background: white url(background_image.gif) repeat-y 50% 0;
In the above code everything is self explanatory except the following:
50% === background position x;
0 === background position y;
All that does is positions' the image at the center of the viewport. Tom
wants the _LEFT EDGE_ of the image positioned at 50% of the width of the
viewport. This is possible but you need to also use background-size (or
generated content, see below) which have some unexpected side affects. The
below solutions will work differently but some may or may not be what you are
after. It all depends on what the image is.
body {
background: url(image.jpg) 100% 0% no-repeat;
background-size: 50% auto;
}
or
body {
background: url(image.jpg) 100% 0% repeat-y;
background-size: 50% auto;
}
or
body {
background: url(image.jpg) 100% repeat-y;
background-size: 50% auto;
}
or
body {
background: url(image.jpg) 100% 0% repeat-y;
background-size: 50% 200px;
}
If you are using an image with width and height in absolute values like
pixels and you don't want scaling, then this is another solution.
html::before {
content: url(image.jpg);
position: absolute;
margin-right: -150px; /* equal width of image */
left: 50%;
}
body {
position: relative;
z-index: 1;
}
Thanks Alan and others who responded. I'll give Alan's suggestions a
run-through.
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image position
List, I have a working example of what I am after: http://www.mlinc.com/tl-test/ In a capable browser, you can see how the large bg image is behaving. This is what I am after and I'm using a media query to achieve this. But I have a couple questions for you concerning the background image 1) Is the way I am achieving the effect completely bonkers? Am I overlooking a much simpler way? 2) Is there a better way to achieve what is happening? 3) Providing i'm not doing something completely insane, is it possible to get IE7 and 8 to play nicer (have the bg image not continue behind the content as the viewport decreases below 900px wide)? With a different method? Thanks a lot for your time. -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image position
1) Is the way I am achieving the effect completely bonkers? Am I
overlooking a much simpler way?
That is exactly the way to do what you are trying to do except that I would fix
the image position like this:
#outer-wrap{background: #fff url(../Bokeh.jpg) no-repeat fixed 50% top; }
The altermnative to fixed is scroll but this is not necessary in your case as
you are not repeating the image (x nor y)
2) Is there a better way to achieve what is happening?
Not that I know of except the other respondents made it very scientific and
therefore very complicated IMO.
3) Providing i'm not doing something completely insane, is it possible
to get IE7 and 8 to play nicer (have the bg image not continue behind
the content as the viewport decreases below 900px wide)? With a
different method?
To make it liquid, use percentages instead of px. Try a width of 90% for
outer-wrap and remove the width for other divs.
You also need to make sure it validates because you don't have an opening
head and also an opening body. Always use the validation service just to
iron out basic mistakes and unbalanced html/css tags.
My 2 pence worth.
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image position
On 6/29/11 4:31 PM, Tom Livingston wrote: List, I have a working example of what I am after: http://www.mlinc.com/tl-test/ Keep it simple. And readable on landing. markup http://chelseacreekstudio.com/mmm.htm css http://chelseacreekstudio.com/mmm_files/style000.css Folds to 400 in FF, Safari, Opera, and Chrome. Folds to 600 in IE 7/8. IE 9 not checked. Not corrected for nor checked in IE 6. ~d -- http://chelseacreekstudio.com/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image position
On Wed, Jun 29, 2011 at 6:04 PM, John D xfs...@hotmail.com wrote:
1) Is the way I am achieving the effect completely bonkers? Am I
overlooking a much simpler way?
That is exactly the way to do what you are trying to do except that I would
fix the image position like this:
#outer-wrap{background: #fff url(../Bokeh.jpg) no-repeat fixed 50% top; }
The altermnative to fixed is scroll but this is not necessary in your case as
you are not repeating the image (x nor y)
2) Is there a better way to achieve what is happening?
Not that I know of except the other respondents made it very scientific and
therefore very complicated IMO.
3) Providing i'm not doing something completely insane, is it possible
to get IE7 and 8 to play nicer (have the bg image not continue behind
the content as the viewport decreases below 900px wide)? With a
different method?
To make it liquid, use percentages instead of px. Try a width of 90% for
outer-wrap and remove the width for other divs.
You also need to make sure it validates because you don't have an opening
head and also an opening body. Always use the validation service just to
iron out basic mistakes and unbalanced html/css tags.
My 2 pence worth.
I fixed the missing opening head, embarrassingly, but I see no issue
with the opening body. It's in conditional comments.
--
Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image position
Keep it simple. And readable on landing. markup http://chelseacreekstudio.com/mmm.htm css http://chelseacreekstudio.com/mmm_files/style000.css Folds to 400 in FF, Safari, Opera, and Chrome. Folds to 600 in IE 7/8. IE 9 not checked. Not corrected for nor checked in IE 6. ~d While I appreciate your time, I was not looking to change the way the page reacts to the viewport, just whether or not there is a better way to do what I was already doing and if it is possible to have IE7 and 8 react the same way as capable browsers. Thanks again for your time. -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image position
While I appreciate your time, I was not looking to change the way the
page reacts to the viewport, just whether or not there is a better way
to do what I was already doing and if it is possible to have IE7 and 8
react the same way as capable browsers.
I think Lasko got it dead right. You can also try to investigate the
possibility of creating two divs of 50% each like this:
div id=headerheader/div
div id=wrapper
div id=leftLeft/div
div id=rightRight/div
/div
div id=footerfooter/div
The DIVS left and Right would be left floated to make them display side by side
and the width of each is 50%. The rough and dirty CSS looks like this:
#wrapper {
width: 900px;
height: 90%;
margin: 0 auto;
text-align: left;
height: 100%;
}
#left {
width: 46%;
margin: 2%;
float: left;
}
#right {
width: 50%;
float: left;
margin: 2% 0;
background-image: url('http://www.mlinc.com/tl-test/Bokeh.jpg');
}
#footer {
clear: left;
width: 900px;
height: 5%;
margin: 0 auto;
text-align: center;
}
The CSS and layout can be improved dramatically but I leave it to you to think
about this. Lasko's method is pretty neat.
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image position
On 30/06/2011 6:31 AM, Tom Livingston wrote: List, I have a working example of what I am after: http://www.mlinc.com/tl-test/ In a capable browser, you can see how the large bg image is behaving. This is what I am after and I'm using a media query to achieve this. But I have a couple questions for you concerning the background image 1) Is the way I am achieving the effect completely bonkers? Am I overlooking a much simpler way? Possibly yes and possibly no to the former and later. There is an issue with accessibly where someone who can only use a keyboard. First they must tab to the inner overflow section, scroll down with the arrows and once they reach the bottom of what is hidden in the outer overflow (the viewport), they must tab to get this into focus, use the arrows keys to scroll to the overflowing portion in the viewport, then press tab again to return to the inner overflow so again they can use the arrow key to scroll the inner overflow. Now if the content of the inner overflow is very long, this procedure has to be done over and over. They may even decide to return to the top of the content and in which case they have to do the reverse. It your choice if you think this is wise. Also, do you want this to happen? http://css-class.com/x/tom.png 2) Is there a better way to achieve what is happening? Depends on what you want to happen in respect to the above two issues. The later is solved my using min-width on a container div that contain the header 'div#outer-wrap' and the footer. 3) Providing i'm not doing something completely insane, is it possible to get IE7 and 8 to play nicer (have the bg image not continue behind the content as the viewport decreases below 900px wide)? With a different method? Thanks a lot for your time. You need to Google this string 'html5 elements ie8 ie7' (not quoted) or wait for someone to give the solution offlist since it involves JS. -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Background image position
List, Is it possible to position a background image on the body of a page so that the LEFT EDGE of the image is always at 50% of the viewport? Ive googled a bit but not sure im using the right search terms... TIA -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image position
Of course it is possible. put this code for your background: background: white url(background_image.gif) repeat-y 50% 0; In the above code everything is self explanatory except the following: 50% === background position x; 0 === background position y; List, Is it possible to position a background image on the body of a page so that the LEFT EDGE of the image is always at 50% of the viewport? Ive googled a bit but not sure im using the right search terms... __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image position
On Wed, Jun 29, 2011 at 4:31 AM, Tom Livingston tom...@gmail.com wrote: Is it possible to position a background image on the body of a page so that the LEFT EDGE of the image is always at 50% of the viewport? Ive googled a bit but not sure im using the right search terms... background: url(image.png) no-repeat 50% 0; The above CSS will cause the image to be centered. For the *left edge* to be at the center, you need to double the width of the image by adding a transparent region on the left. For example, if you have an image of width 200px, using an image editor add a 200px transparent region to the left of the image. The new width of the image will be 400px. Now apply the above CSS to align the left edge of the image to the center of the viewport. Regards, Chetan Crasta __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image position
On 29/06/2011 1:55 PM, John D wrote:
On 29/06/2011 9:01 AM, Tom Livingston wrote:
List,
Is it possible to position a background image on the body of a page so
that the LEFT EDGE of the image is always at 50% of the viewport? Ive
googled a bit but not sure im using the right search terms...
Of course it is possible. put this code for your background:
background: white url(background_image.gif) repeat-y 50% 0;
In the above code everything is self explanatory except the following:
50% === background position x;
0 === background position y;
All that does is positions' the image at the center of the viewport. Tom
wants the _LEFT EDGE_ of the image positioned at 50% of the width of the
viewport. This is possible but you need to also use background-size (or
generated content, see below) which have some unexpected side affects.
The below solutions will work differently but some may or may not be
what you are after. It all depends on what the image is.
body {
background: url(image.jpg) 100% 0% no-repeat;
background-size: 50% auto;
}
or
body {
background: url(image.jpg) 100% 0% repeat-y;
background-size: 50% auto;
}
or
body {
background: url(image.jpg) 100% repeat-y;
background-size: 50% auto;
}
or
body {
background: url(image.jpg) 100% 0% repeat-y;
background-size: 50% 200px;
}
If you are using an image with width and height in absolute values like
pixels and you don't want scaling, then this is another solution.
html::before {
content: url(image.jpg);
position: absolute;
margin-right: -150px; /* equal width of image */
left: 50%;
}
body {
position: relative;
z-index: 1;
}
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Background Image Position Problems--Do You Have a Work Around?
Hello, all. I am creating a Zen Cart for my store and have put an image in the background of my pages. The webpage is found here: http://www.possets.com/zen-cart and the CSS can be found here. http://www.possets.com/zen-cart/includes/templates/magic/css/stylesheet.css In some browsers, the image looks great. In other browsers the background images are drifting up too high and show the bottom being cut off and it's unattractive. I have been just positioning the image downward in the past but that is a bad solution because it makes the image look bad in some browsers. My main troubles are in IE5, 5.5, and 6 and Safari. It appears to look just fine in IE 7 Firefox. I want to be able to position the image in the background and have it look good in IE6, 5.5, and 5 at least, so the image bottom sits on or below the bottom of the page. I am using Firefox 2.0.0.4 and I do my coding in TopStyle Pro (so all mistakes are mine and I cannot blame them on any other source). I have my screen res set at 1024 x 768 (because it seem like a popular size). Thanks for any help you have on this cross browser vexation. -- Fabienne Christenson My Website: http://www.possets.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/ -- Fabienne Christenson My Website: http://www.possets.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] Background Image Position Problems--Do You Have a Work Around?
Fabienne wrote: Hello, all. I am creating a Zen Cart for my store and have put an image in the background of my pages. The webpage is found here: http://www.possets.com/zen-cart and the CSS can be found here. http://www.possets.com/zen-cart/includes/templates/magic/css/stylesheet.css In some browsers, the image looks great. In other browsers the background images are drifting up too high and show the bottom being cut off and it's unattractive. I want to be able to position the image in the background and have it look good in IE6, 5.5, and 5 at least, so the image bottom sits on or below the bottom of the page. Try background:#FF url(../images/possetsgirl800w.jpg) no-repeat fixed left bottom; or background:#FF url(../images/possetsgirl800w.jpg) no-repeat fixed 0 100%; This will fix the background to the bottom of the viewport, which might be below the bottom of the page at higher resolutions. When you use fixed units like pixels, the top left of the image is put at that point in the containing box, which is basically the viewport in your case. But if you use percentages, a point in the image at the specified percentages is matched to the same point in the containing box. So, for example, if you specify 10% 20% as the percentages, a point 10% across and 20% down in the image is matched to the point 10% across and 20% down in the containing box. You might try playing with percentages as well to see if they provide the effect you want. Setting the horizontal percentage (the first value) to 50% will centre the image in the containing box. HTH Lori __ 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] Background Image Position Problems
Hello, all. I am creating a Zen Cart for my store and have put an image in the background of my pages. The webpage is found here: http://www.possets.com/zen-cart and the CSS can be found here. http://www.possets.com/zen-cart/includes/templates/magic/css/stylesheet.css In some browsers, the image looks great. In other browsers the background images are drifting up too high and show the bottom being cut off and it's unattractive. I have been just positioning the image downward in the past but that is a bad solution because it makes the image look bad in some browsers. My main troubles are in IE5, 5.5, and 6 and Safari. It appears to look just fine in IE 7 Firefox. I want to be able to position the image in the background and have it look good in IE6, 5.5, and 5 at least, so the image bottom sits on or below the bottom of the page. I am using Firefox 2.0.0.4 and I do my coding in TopStyle Pro (so all mistakes are mine and I cannot blame them on any other source). I have my screen res set at 1024 x 768 (because it seem like a popular size). Thanks for any help you have on this cross browser vexation. -- Fabienne Christenson My Website: http://www.possets.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] Background Image Position Problems
Hello, all. I am creating a Zen Cart for my store and have put an image in the background of my pages. The webpage is found here: http://www.possets.com/zen-cart and the CSS can be found here. http://www.possets.com/zen-cart/includes/templates/magic/css/stylesheet.css In some browsers, the image looks great. In other browsers the background images are drifting up too high and show the bottom being cut off and it's unattractive. I have been just positioning the image downward in the past but that is a bad solution because it makes the image look bad in some browsers. My main troubles are in IE5, 5.5, and 6 and Safari. It appears to look just fine in IE 7 Firefox. I want to be able to position the image in the background and have it look good in IE6, 5.5, and 5 at least, so the image bottom sits on or below the bottom of the page. I am using Firefox 2.0.0.4 and I do my coding in TopStyle Pro (so all mistakes are mine and I cannot blame them on any other source). I have my screen res set at 1024 x 768 (because it seem like a popular size). Thanks for any help you have on this cross browser vexation. Please note: I tried to send this message to the list earlier today but it did not look as if it was received. If it turns up twice on the list, I apologize. My intention was not to duplicate questions to the list. I also looked at the Public area on the website to see if this message turned up in the last 40 messages and it had not, so I thought it safe to resend. -- Fabienne Christenson My Website: http://www.possets.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] Background Image Position Varies in Different Browsers
page: www.springfieldmogov.org/founders/new.html CSS: www.springfieldmogov.org/css/founders.css Problem: The background image on the #content div is a photo montage running down the left side of the page. It's position looks great in Firefox, shows a slight gap in IE on both PC and Mac, is substantially higher in Safari (thus not lining up properly under the logo), and Netscape doesn't show it at all. Other than that the page is perfect! :-) What am I doing wrong? Should I be approaching the desired end from a different angle? In case it matters, a sample page including some of the real content is: www.springfieldmogov.org/founders/newContent.html Incidently, is there any trick to getting responses? I posted a thing several days ago but haven't gotten any. Yet others seem to have many, many replies. :-( Thanks for any help. Chris __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Background Image Position Varies in Different Browsers
Chris Akins wrote: page: www.springfieldmogov.org/founders/new.html CSS: www.springfieldmogov.org/css/founders.css Problem: The background image on the #content div is a photo montage running down the left side of the page. It's position looks great in Firefox, shows a slight gap in IE on both PC and Mac, is substantially higher in Safari (thus not lining up properly under the logo), and Netscape doesn't show it at all. I'd be more concerned about Safari ignoring the padding-top:40px of #content. #content clears the floating li of the the menu. For me, the padding should not collapse with the menu, and Fx and Opera agree. Someone with a little time and understanding should reduce this. ... Incidently, is there any trick to getting responses? I posted a thing several days ago but haven't gotten any. Yet others seem to have many, many replies. :-( You could try to ask simpler questions. It's just too hot here. Ingo -- http://www.satzansatz.de/css.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Background Image Position Varies in Different Browsers
Ah, yes - thanks for pointing that out. I've found that if I put the montage as a background image on the body tag instead, I get the desired result. However - I'd still love to know why a background image doesn't work as intended when attaching to the #content div. I did find one coding problem, which, when fixed still didn't fix the overall problem. I was incorrectly trying to use a background position pair which used one keyword and one pixel value. Can't do that, according to W3C specs. So I changed to all px values. This is a perfect example of how enough stumbling around can sometimes lead to an answer, but it sure would help me be more efficient if I knew the 'whys' behind my original issue. Shouldn't a background image work on either the body or another div without being wildly different on various browsers? On 7/25/06, Skip Knox [EMAIL PROTECTED] wrote: FYI and FWIW, the gap appears in Firefox too, if you start sizing up the text. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Background Image Position Varies in Different Browsers
On Jul 26, 2006, at 1:16 AM, Ingo Chao wrote: page: www.springfieldmogov.org/founders/new.html CSS: www.springfieldmogov.org/css/founders.css Problem: The background image on the #content div is a photo montage running down the left side of the page. It's position looks great in Firefox, shows a slight gap in IE on both PC and Mac, is substantially higher in Safari (thus not lining up properly under the logo), and Netscape doesn't show it at all. I'd be more concerned about Safari ignoring the padding-top:40px of #content. #content clears the floating li of the the menu. For me, the padding should not collapse with the menu, and Fx and Opera agree. Someone with a little time and understanding should reduce this. Actually, I think Safari is correct (and iCab agrees :-)). #header has a height specified (115px). #menu, *inside* #header, also has a height specified (50px) and top- padding (115px) --- computed height:165px. Result: #menu overflows out of #header. #content is then positioned 115px from the top of the page. The content of #content is then clearing the floated li's inside #menu. I'm not sure why Gecko and Opera are doing what they are doing here. Conflicting stuff in there. I need to study that a bit more to understand it. A strange thing in Gecko with your stylesheet: when I zoom in, the background image moves downwards. It shouldn't do that. To fix that part of the story, simply remove the height declaration on #header, allowing it to expand to the full 165px needed to contain #menu. Then adjust top-padding on #content to taste. Cross browser stable, not tested in iExploder. You'll then notice that your background image is positioned to low, setting background-position to 0 32px fixes it here. (and set the min-height on #content to 406px - matching the height of your background-image.) Philippe --- Philippe Wittenbergh http://emps.l-c-n.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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/
