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/
