Hello all, (I am on a Mac running OSX 10.3.9 and have test in the latest browsers. Relevant XHTML and CSS pasted below. Code and style validated at the W3C validators.)
Working stage: http://8.3.8.136/ Working CSS file: http://8.3.8.136/style/ief001.css My horizontal CSS nav laid out perfectly in all browsers when it was absolutely positioned within an absolutely positioned page wrap under two absolutely positioned elements... Until I decided to try to float the elements that should appear below it (to accommodate for variations and increases/decreases in nav list font sizes on the users end), that is: The floated elements placed themselves smack on top of my perfectly rendered absolutely positioned items that came before them. So, I decided to float all of the elements (including my horizontal nav) within the absolute positioned wrap. Internet Explorer completely botched the whole thing by: 1. Inheriting a left edge padding to the new floated image from the nav list; 2. Adding a ton of extra empty space under the content and STILL not carrying my page content wrap's background white all the way to the bottom; 3. Removing the top and bottom borders from my navtopwrap UL element; 4. Increasing the page content wrap width by 20-30px, thereby; 5. overlapping my right side background filler. (see image http://8.3.8.136/ieBotch.jpg) Firefox (and Netscape and Mozilla, of course) and Safari laid the page out as it should be with the appropriate spacing and all... (see image http://8.3.8.136/FFlayout.jpg) ...with the exception of: 1. The removal border at the bottom of my navtopwrap UL element and strangely; 2. The placement of it just UNDER the top border, where it is visible in the un-colored negative space to the left and the right of the nav LI's. (see image http://8.3.8.136/FFbotch.jpg) Opera rendered everything perfectly, however it added a 2-3px padding to the left of the image. My questions, if you can spare your kind attention: 1. Is it possible to float elements beneath absolutely positioned elements? If so, how, oh how?!? In the floated version I'm referring to (code pasted below), 2. How do I get my top and bottom borders back all around in all the browsers? 3. How do I eliminate the extra image padding in both Opera and IE (in addition to or replacement of the hack included in the code below)? 4. How do I remove the page content wrap padding in IE? 5. How do I make IE take my page content wrap ALL THE WAY to the bottom of the page? Much sincere gratitude to you for your thoughts and advice! XHTML: <div id="pagewrap"> <div id="headwrap"> LEFT SIDE OF HEADER <div id="ieflogo"><a href="/" title="The International Eye Foundation: Saving Sight Worldwide Since 1961."><span class="hidden"><strong>The International Eye Foundation</strong><br />Saving Sight Worldwide Since 1961</span></a></div> RIGHT SIDE OF HEADER <div id="headright"><p><a href="/" title="Find your bearings on the IEF site map.">Site Map</a> | <a href="/" title="Get the answers to the IEF's most frequesntly asked questions.">FAQ</a> | <a href="/" title="Cleanly print this IEF page.">Print</a> | <a href="/" title="Contribute to the International Eye Foundation.">Contribute</a></p></div></div> HORIZONTAL NAV LIST: <div class="navtopwrap"><ul><li id="homenav"><a href="/" title="The top of the International Eye Foundation web presence.">Home</a></li><li id="aboutnav"><a href="/" title="Learn more about the International Eye Foundation.">About</a></li><li id="newsnav"><a href="/" title="Get the latest news and information from IEF.">News</a></li><li id="givingnav"><a href="/" target="openwide" title="Find out how easy it is to give your support to IEF.">Giving</a></li><li id="programsnav"><a href="/" title="Discover the difference IEF Programs are making across the globe.">Programs</a></li><li id="eventsnav"><a href="/" title="View the IEF Events calendar and online archive of past successes.">Events</a></li><li id="resourcesnav"><a href="/" title="Find help and tools in the IEF resource archive.">Resources</a></li><li id="contactnav"><a href="/" title="All the ways to get in touch with the International Eye Foundation.">Contact</a></li></ul></div> IMAGE: <div class="rotatepic"><img src="/images/img001.jpg" alt="The International Eye Foundation: Helping the world see." width="800" height="160" align="left" border="0" /></div> </div> CSS: HACKS AT THE TOP * html img { margin: 0 -3px; ma\rgin: 0; } body, html { height:100%; } PAGE CONTENT WRAP div#pagewrap { position: absolute; left: 0px; top: 0px; width: 800px; min-width: 800px; height: 100%; min-height: 100%; margin: 0 auto; padding: 0; background: #fff; border-right: 1px solid #005cab; } HEADER WRAP div#headwrap { display: block; width: 800px; min-width: 800px; height: 89px; margin: 0 auto; padding: 0; background: transparent; border: 0; } HEADER ELEMENTS div#ieflogo { display: inline; float:left; width: 240px; min-width: 240px; height: 89px; margin: 0 auto; padding: 0; background: transparent; border: 0; } div#ieflogo a { display: block; width: 240px; height: 89px; background: transparent url(/images/iefLogo.gif) 0px 0px no-repeat; } div#ieflogo a:hover { background: transparent url(/images/iefLogoOn.gif) 0px 0px no-repeat; } div#headright { display: inline; float: right; width: 560px; min-width: 560px; height: 89px; margin: 0 auto; padding: 0; background: transparent url(/images/savingSight.gif) bottom right no-repeat; border: 0; } div#headright p { font-size: .7em; line-height: 1.0em; text-align: right; margin: 13px 13px 0 0; padding: 0; } HORIZONTAL NAV LIST .navtopwrap ul { display: block; width: 776px; min-width: 776px; margin: 0 auto; padding: 0 0 0 24px; background: transparent; border-top: 1px solid #d2dfe0; border-bottom: 1px solid #d2dfe0; white-space: nowrap; text-transform: uppercase; font: normal .8em "Trebuchet MS", sans-serif; } .navtopwrap ul li { display: inline; } .navtopwrap ul li a { float: left; color: #005cab; background-color: #fff; text-decoration: none; padding: 10px 14px 10px 14px; border-left: 1px solid #d2dfe0; } .navtopwrap ul li a:hover { color: #fff; background-color: #8fb7da; } li#contactnav a { border-right: 1px solid #d2dfe0; } LARGE IMAGE BELOW NAV LIST .rotatepic { display: block; float: left; clear: both; width: 800px; height: 160px; margin: 0; padding: 0; border-bottom: 1px solid #d2dfe0; } Many thanks, again... Leigh . . . Leigh Baker-Foley mailto:[EMAIL PROTECTED] http://nodltd.com/ ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
