DH Templates - Page won't render in Firefox but is ok in IE7?

Page won't render in Firefox but is ok in IE7?

This is driving me nuts! PLEASE HELP. The content of the page is over to the left not the center when viewed in Firefox.This is just a template I'm playing around with, I didn't create it.Here's the .css body { background-color: #000000; color: #333333; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; padding-top: 15px; width: auto; float: left; position: relative; height: 50px; } h3 { font-size: 14px; font-weight:bold; letter-spacing: 1px; text-decoration: underline; } em { font-weight: bold; font-style: normal; } img { border-style: none; } a { color: #333333; text-decoration: underline; } a:hover { color: #990000; text-decoration: underline; } #topnav { border: 1px solid #333333; background-color: #CCCCCC; text-align:center; padding: 3px 16px 3px 16px; font-weight: bold; font-size: 11px; letter-spacing: 1px; margin-top: 6px; } #topnav a:link, #topnav a:visited, #topnav a:active { text-transform: uppercase; text-decoration:none; background-color: #CCCCCC; padding: 3px 16px 3px 16px; text-decoration: none; color: #333333; } #topnav a:hover { background-color: #990000; border-left: 1px #333333 solid; border-right: 1px #333333 solid; text-decoration: none; color: #CCCCCC; } #container { border: 3px solid #333333; width: 750px; background-color: #000000; padding: 6px; height: 685px; margin-right: auto; margin-left: auto; margin-bottom: auto; border-color: #990000; margin-top: auto; } #header { background-image: url("banner.jpg"); border: 1px solid #333333; background-color: #CCCCCC; color: #000000; text-align: center; height: 60px; padding: 10px; font-size: 16px; } .contentblock { border: 1px solid #333333; background-color: #CCCCCC; text-align: left; padding: 2px 20px 2px 20px; margin-top: 6px; margin-bottom: 6px; margin-left: 220px; } .leftnavheader { border: 1px solid #666666; padding: 2px 2px 2px 2px; margin: 5px 5px 1px 5px; background-color: #333333; color: #CCCCCC; font-weight:bold; text-decoration:none; font-size: 12px; } #leftnav { float: left; border: 1px solid #333333; background-color: #CCCCCC; text-align:left; width: 210px; margin-top: 6px; margin-bottom: 6px; } #footer { margin-top: 6px; clear: both; /* FIXED MAJOR LAYOUT ISSUE */ border: 1px solid #333333; background-color: #CCCCCC; color: #333333; text-align: right; padding: 4px; padding-right: 15px; font-weight: bold; font-size: 10px; letter-spacing: 1px; } .formstyle { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; color: #666666; background-color: #CFD4E6; border: 1px #333333 solid; } .formbtns { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold; color: #333333; background-color: #CFD4E6; text-transform: uppercase; border: 1px #333333 solid; } /*EOF*/ Here's the code: (I do have the <head> and then the meta tags above what I'm pasting on here) </head> <body> <div id='container'> <div id='header'> <h1>My Site</h1> </div> <div id="topnav"> <a href="#" title="">Home</a> <a href="#" title="">Services</a> <a href="#" title="">Templates</a> <a href="#" title="">Contact Us</a></div> <div class='contentblock'> <h3>Content Block</h3> <p> This is my 2nd css layout. Based primarily on my first one but I had need of a left column menu...was a good learning experience, and I'd like to thank many many contributors here at oswd, as I looked at a bunch of different templates to get an idea how to do it, and then take those ideas to create my own. I took several techniques, got what I needed, and created for myself. Anyway, the usual blah blah aside, I hope someone out there finds this template useful.</p> <p> My wife has been energeticly learning html design, she is the one that helped pick the colors for this scheme, as well as created the banner as a learning excersize. Feel free to change whatever you like, the rest is up to you. Please drop me a line if you find this template useful in anyway. I didn't get much feedback from my last template, though I wasn't really expecting any, but what did come back was positive.</p> </div> <div class='contentblock'> <h3>Block Two</h3> <p> Duis malesuada egestas justo. Nunc non metus ac velit viverra tincidunt. Donec ligula wisi, tristique a, porta et, ultricies non, dui. Duis egestas nibh eu augue. Sed facilisis sapien non est. Donec aliquet, nunc vel hendrerit tempus, quam turpis dignissim est, id dapibus dui ipsum et massa. Suspendisse blandit ornare enim. Morbi libero neque, mollis in, rutrum sed, tempus at, sem. Sed id enim. Vestibulum pharetra urna sed nulla. Etiam ultricies, urna non fringilla aliquam, turpis diam venenatis diam, quis vestibulum mi nunc a velit. Curabitur volutpat turpis vel nibh. Ma I tried both suggestions and now there is a big space between the footer and the red border at the bottom, although now the page is centered in Firefox and still renders ok in IE. I tried your newest fix and still the same problem in Firefox with the footer and border and now in IE the footer is over top of the border. How did you get this to work? Did you change something else? I changed float to inherit in container and it now works in IE but still can't figure out how to get it to work with ff. http://paste2.org/p/92815 I got it to work!!! Yay! Thank you sooooo much. I'll give you best answer when it allows me to.

Public Comments

Okay let's give this a try... I'm not sure why the body has float:left in it, but first try removing that. If it breaks something else then try the following (new stuff is at the top): body { width: 100%; margin: 0; background-color: #000000; color: #333333; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; padding-top: 15px; float: left; position: relative; height: 50px; } If that doesn't help, could you please go to http://paste2.org and paste the entire HTML of a single page (or send a link if the page is live) so that I can poke around with it myself. Paste2 will give you a link to post on Answers to show your code. --- UPDATE --- I gave it a try with the snippet you sent. The code above fixed Firefox, but it doesn't work for me in IE7 (the original code or my fix). I added the following to make it work in IE7 as well: body { text-align: center; } #container { text-align: left; } IE thinks that the text-align property has something to do with the alignment of blocks, hmm.... --- UPDATE --- With regard to the big black space, inside the #container rule there is a line that sets a specific pixel height for the container (height: 685px;) AND it sets a padding (padding: 6px;). Those two are a deadly mix as IE will include the padding in the height, and Firefox will add the padding in addition to the height, so in Firefox the box was about 12 pixels taller. If you don't want the giant black space at all (I'm not sure how your footer works since it got cut but it must go in that empty space), you should just remove that height: 685px; ... it's just not good design practice, especially for a template, sheesh! =) --- UPDATE --- It sounds like something in the footer code is messed up, but the footer CSS looks okay so I'm not sure without seeing the HTML. Please use that http://paste2.org site to paste the entire HTML because Answers cut off the code for the footer. --- UPDATE --- Thanks for the code. I added a footer div and it looks fine for me in FF, IE7, and Opera (as well as IE6 and both XP/Vista). I just removed the float on body and added the text aligns. --- UPDATE --- Ahh that's a relief, congrats. I'll keep an eye out for more of your questions =)