ok so i have tested my coding in every browser and firefox is the only one that is displaying it differently. the first code is my nav or menu for the site. in all broswers this displays above the 2nd code just fine. <header> <div class="row-bot"> <strong class="slog1">Because Every Point Matters</strong> </div> <div class="main"> <nav> <ul class="menu"> <li><a href="home.html">Home</a></li> <li><a href="bios.html">Bios</a></li> <li><a href="services.html">Services</a></li> <li><a href="referals.html">Referals</a></li> <li><a href="ftp://user:password@50.63.46.1/">Docs</a></li> <li><a href="contact.html">Contact Us</a></li> <hr /> </ul> </nav> </div> </header> Code (markup): Now in firefox the code below will display to the right of the nav li, it starts at the contact us li, and displays in line. when it should all be displayed below the nav. <section id="content"> <div class="bg-1"> <div class="main"> <div class="wrapper"> <div class="box-1 fleft"> <br /><br /> <figure class="indent-bot"><img src="images/crestonemini2.png" alt="" /></figure><br /> <a class="button" href="http://www.crestonelegal.com/home.html">View Site</a> </div> <div class="box-2 fleft"> <br /><br /> <figure class="indent-bot"><img src="images/dpclogo2.png" alt="" /></figure><br /> <a class="button" href="http://www.distressedpropertyconsultants.com/home.html">View Site</a> </div> <div class="box-3 fleft"> <br /><br /> <figure class="indent-bot"><img src="images/larue1.png" alt="" /></figure><br /> <a class="button" href="">Coming Soon</a> </div> </div> </div> </div> Code (markup): here is the css. .bg-1 {width:auto;padding:20px 0 18px;background:url(../images/bg1-tail.gif) center bottom repeat-x #f2f2f2} .main {width:900px;padding:0;margin:0 auto;font-size:13px;line-height:1.428em} .wrapper {width:900px;overflow:hidden} .box-1 {width:250px;padding:12px 32px 20px 0;text-align:center;background:url(../images/pic-1.gif) right top repeat-y} .box-2 {width:250px;padding:12px 32px 20px 0;text-align:center;background:url(../images/pic-1.gif) right top repeat-y} .box-3 {width:250px;padding:12px 32px 20px 0;text-align:center} .fleft {float:left} header {min-height:271px;width:100%;position:relative;z-index:2;background:url(../images/header-bg2.jpg) center bottom no-repeat} .row-bot {width:100%; height:160px; text-align:center;padding-top:50px; padding-bottom:30px; overflow:hidden} Code (markup):
Where's the rest of the css? nav, ul, li? I suspect you've got uncontained floats. If so, Firefox may be acting correctly. cheers, gary
i dont have any css for nav tag and the ul uses class menu .menu {float:left;padding-top:53px; padding-bottom: 18px;} .menu li {float:left; position:relative; left:29%; padding-left:20px;} .menu li a {display:inline-block;font-size:19px;line-height:1.21em;color: #000} .menu li a.active, .menu li a:hover {color:#0e7637; text-decoration:underline;} hr {display:block; border:none; width:545px; height:2px; background-image:url(../images/pic-3.gif); margin-top:40px; margin-left:27%} Code (markup):
It's as I guessed. Since the float ul is not contained, the section element slides up under the ul and .wrapper, having a new block formatting context, snuggles up to the side of the float. This is proper behavior. Adding {overflow: hidden;} Code (markup): to the div.main element will contain the floats and fix your problem. See Enclosing float elements for more info. Test case: <!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>test doc</title> <!-- hack for bug in Web Developer addon for Firefox. Used for development and debugging only--> <link rel="stylesheet" type="text/css" href="x" /> <style type="text/css"> body { font: 100%/1.5 sanserif; } .bg-1 { width:auto; padding:20px 0 18px; background:url(../images/bg1-tail.gif) center bottom repeat-x #f2f2f2 } /* overflow property added to enclose/contain float elements */ .main { font-size:13px; line-height:1.428em margin:0 auto; overflow: hidden; padding:0; width:900px; } .wrapper { width:900px; overflow:hidden } .box-1 { width:250px; padding:12px 32px 20px 0; text-align:center; background:url(../images/pic-1.gif) right top repeat-y } .box-2 { width:250px; padding:12px 32px 20px 0; text-align:center; background:url(../images/pic-1.gif) right top repeat-y } .box-3 { width:250px; padding:12px 32px 20px 0; text-align:center } .fleft { float:left } header { min-height:271px; width:100%; position:relative; z-index:2; background:url(../images/header-bg2.jpg) center bottom no-repeat } /* There's no reason to even have this element */ .row-bot { width:100%; height:160px; text-align:center; padding-top:50px; padding-bottom:30px; overflow:hidden } /* Zero the side padding to un-indent the ul. Also remove the list markers. */ .menu { float:left; list-style: none; padding: 53px 0 18px; /* padding-top:53px; padding-bottom: 18px; */ } .menu li { float:left; position:relative; left:29%; padding-left:20px; } .menu li a { display:inline-block; font-size:19px; line-height:1.21em; color: #000 } .menu li a.active, .menu li a:hover { color:#0e7637; text-decoration:underline; } hr { display:block; /* border:none; */ width:545px; height:2px; background-image:url(../images/pic-3.gif); margin-top:40px; margin-left:27% } </style> </head> <body> <header> <div class="row-bot"> <!-- <strong class="slog1">Because Every Point Matters</strong> --> <h1 class="slog1">Because Every Point Matters</h1> </div> <!-- There's no good reason for .main or for nav. ul is a perfectly good container for list items. --> <div class="main"> <nav> <ul class="menu"> <li><a href="home.html">Home</a></li> <li><a href="bios.html">Bios</a></li> <li><a href="services.html">Services</a></li> <li><a href="referals.html">Referals</a></li> <li><a href="ftp://user:password@50.63.46.1/">Docs</a></li> <li><a href="contact.html">Contact Us</a></li> <hr /> </ul> </nav> </div> </header> <section id="content"> <!-- you failed to close this element or you cut it off in your snippet --> <div class="bg-1"> <div class="main"> <div class="wrapper"> <div class="box-1 fleft"> <br /><br /> <!-- ??? --> <figure class="indent-bot"> <img src="images/crestonemini2.png" alt="" /></figure> <br /><a class="button" href="http://www.crestonelegal.com/home.html">View Site</a> </div> <div class="box-2 fleft"> <br /><br /> <!-- as before ??? use padding or margin to provide spacing --> <figure class="indent-bot"> <img src="images/dpclogo2.png" alt="" /> </figure> <br /><a class="button" href="http://www.distressedpropertyconsultants.com/home.html">View Site</a> </div> <div class="box-3 fleft"> <br /><br /> <figure class="indent-bot"> <img src="images/larue1.png" alt="" /></figure> <br /><a class="button" href="">Coming Soon</a> </div> </div> </div> </div> </section> </body> </html> Code (markup): cheers, gary
Yup it worked thanks! but when i did it it was below the nav, but it was still overlapping the bottom part of the nav. so i just added a padding-top to the wrapper class. it works, but is that the correct coding or should i do it differently?
I don't get any overlap in my test case. Are you sure you didn't miss some change that I made? cheers, gary
I would swing a massive axe at all the HTML 5 idiocy FIRST -- especially if you're worried about IE. I mean... DIV around HTML 5 tags for WHAT? HTML 5 tags for WHAT when you've got perfectly good numbered headings? Extra wrappers around perfectly good block level containers like the UL#menu FOR WHAT?!? Figure around standalone image I'm pretty willing to bet isn't a mathematical figure (probably why you didn't use figcaption) FOR WHAT?!? Double-breaks doing padding's job, presentational classes like "fleft", the markup is a laundry list of everything WRONG with what I've come to expect from the folks who until recently were slapping 4 tranny on 3.2, and now just slap 5's lip service on it while adding even MORE tags for nothing. I'm assuming Gary's example is what it's SUPPOSED to look like, but I can't even make sense out of that train wreck of garbage either. Gary commented on some of it, but missed even more (like say.. the HR inside a UL but not inside a LI?) Just what the devil is this even supposed to look like?!? Do you have a live copy with the images? I'm pretty sure you've got TWICE the code you need. Of course that it's declaring px metric fonts on 'main' and seems to use a fixed width automatically means it's being built with broken thinking/methodology.
I'm pretty sure I simply missed its location when going through the OP's code. I was trying not to change any more than necessary; simply commenting where I saw issues. The hr definitely does not belong there. g
1) that's borders job. Semantically HR means a change in topic when a numbered heading would be inappropriate. If you are choosing tags based on their default appearance, you are choosing the wrong tags. 2) HR cannot go inside a UL that way... That's one of HTML's structural rules. The ONLY tag that can be a direct child of a UL or OL is LI. <ul class="menu"> <li><a href="contact.html">Contact Us</a></li> <hr /> </ul> Code (markup): Invalid markup, HR can't go there. <ul class="menu"> <li><a href="contact.html">Contact Us</a></li> </ul> <hr /> Code (markup): It could go there. <ul class="menu"> <li><a href="contact.html">Contact Us</a><hr /></li> </ul> Code (markup): It could go there... though that's semantically iffy. It CANNOT go as a sibling to a LI. NO tag can go directly inside a UL or OL except LI. Any other tags HAVE to go either inside a LI or after you close the UL. From your code in general you need to go back and study HTML tags a bit more. Of course if you did that long enough, you'd realize what total idiotic halfwit garbage HTML 5 is and go screaming to HTML 4 Strict and/or XHTML 1.0 Strict.