waynewex Posted August 6, 2008 Share Posted August 6, 2008 Okay, for some reason, my entire site is floating to the left in IE7, yet shows up centered in FireFox? My CSS looks like this. I've highted the wrapper in red so that you don't have to go through the rest of the code. I left all of the code in because maybe another element is causing this to happen. I'm sure somebody has an indea. /* CSS Document */ body,html{ margin: 0px; padding: 0px; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size:12px; background-color: #fbfbf7; } h1,h2,h3,h4,h5,p{ padding:0px; margin:0px; margin-top:5px; font-family: Helvetica; color: #000000; } h1{ color: #000000; font-family: Georgia, serif; } h2{ color:#c00000; font-family: Georgia; } a{ color:000000; text-decoration: none; font-weight:bold; } a:hover{ color:c00000; text-decoration: none; } img{ border:0px; padding:2px; } #wrapper{ width: 1000px; margin:auto; border-right:#d7d7cb 1px solid; border-left:#d7d7cb 1px solid; border-bottom:#d7d7cb 1px solid; } #topnav{ background-color: #000000; height:40px; border-bottom:#CCCCCC 1px solid; color: #FFFFFF; } #topnav a{ text-decoration: none; color: #FFFFFF; } #topnav a:hover{ text-decoration: none; color: #CCCCCC; border-bottom:#CCCCCC 1px dotted; } #banner{ height: 100px; background-color:#c00000; width:1000px; border-bottom:#d7d7cb 1px solid; } #bannerad{ margin: auto; width: 980px; padding: 5px; } #nav{ background-color:#FFFFFF; border-bottom:#d7d7cb 1px solid; height: 70px; width:1000px; } #mainbody{ height:600px; background-color:#FFFFFF; width:1000px; margin:auto; } #leftcol{ float: left; width:333px; padding: 5px; height:300px; } #centercol{ float: left; width:300px; padding: 5px; border-left:#d7d7cb 1px solid; } #rightcol{ float:right; width:333px; padding: 5px; height:300px; } #footer{ height: 100px; border-top:#d7d7cb 1px solid; background-color: #000000; color: #FFFFFF; } #footer a{ text-decoration: none; color: #FFFFFF; } #footer a:hover{ text-decoration: none; color: #CCCCCC; border-bottom:#CCCCCC 1px dotted; } Quote Link to comment Share on other sites More sharing options...
haku Posted August 7, 2008 Share Posted August 7, 2008 Hard (near impossible) to say without seeing the (X)HTML. You can try changing margin: auto; to margin: 0 auto; and see if that works. Quote Link to comment Share on other sites More sharing options...
waynewex Posted August 7, 2008 Author Share Posted August 7, 2008 Figured that. Here's the XHTML. <html> <head> <title>MyTest</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <LINK href="stylesheet.css" rel="stylesheet" type="text/css"> </head> <body> <!--Start wrapper--><div id = "wrapper"> <!--Start top nav--><div id="topnav"><span style="float:right; padding:10px;"><a href="http://mytest.com">LOGIN</a> | <a href="http://mytest.com">REGISTER</a></span> <!--End top nav--></div> <!--Start banner--><div id = "banner"> <!--Start bannerad--><div id ="bannerad"><div align="center"><img src="test.png"><img src="test2.png"> </div> <!--End bannerad--></div> <!--End banner--></div> <!--Start nav--> <div id = "nav"> <span style="padding:5px; padding-left:10px; float:left;"><h1>My<font color="#CC0000">Wexford</font>.com </h1></span> <!--End nav--></div> <!--Start body--><div id="mainbody"> <!--Start leftcol--> <div id = "leftcol"><br/> <br/> <div align="center"><img class="bor" src="test3.jpg"> </div> <!--End leftcol--></div> <!--Start centercol--><div id ="centercol"><br/><br/><br/> <h2>Lorem ipsum dolor</h2> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br/><br/> <h2>Lorem ipsum dolor</h2>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="www.test.com" title="My test. com">More >></a><br/><br/> <h2>Lorem ipsum dolor</h2>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br/><br/> <!--End centercol--></div> <!--Start rightcol--><div id ="rightcol"><br/><br/><br/> <h2>Latest Sport</h2> <table width="263" height="338" cellpadding="4" cellspacing="4"> <tr> <td> </td> <td><strong>U18s Soccer</strong></td> <td><strong>Pts</strong></td> </tr> <tr> <td width="18">1</td> <td width="196">Rosslare</td> <td width="49">45</td> </tr> <tr> <td>2</td> <td>Wexford Albion</td> <td>44</td> </tr> <tr> <td>3</td> <td>North End</td> <td>34</td> </tr> <tr> <td>4</td> <td>Town Celtic</td> <td>32</td> </tr> <tr> <td>5</td> <td>Crossabeg</td> <td>32</td> </tr> <tr> <td>6</td> <td>Ajax</td> <td>31</td> </tr> <tr> <td>7</td> <td>Test Team</td> <td>28</td> </tr> <tr> <td>8</td> <td>Another Test</td> <td>23</td> </tr> <tr> <td>9</td> <td>Testing Again</td> <td>21</td> </tr> <tr> <td>10</td> <td>And Again</td> <td>8</td> </tr> </table> <div id="contentbox"> <div id="contentboxheader"> <h2>Company Name</h2> </div> <div id="contentboxbody"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div></div> <!--End rightcol--></div> <!--End body--></div> <!--Start footer--><div id = "footer"><span style="float:left; padding:8px;">© MyTest- <a href="www.test.com" title="My Test. com">Test</a></span><span style="float:right; padding:8px;">Telephone: 086-3005668</span> <!--End footer--></div> <!--End wrapper--></div> </body> </html> Quote Link to comment Share on other sites More sharing options...
lostprophetpunk Posted August 7, 2008 Share Posted August 7, 2008 All you needed to do was put 'text-align: center' in the wrapper CSS code. It's a known IE hack and works wonders. But make sure that you have all the other text-align things set in all of the places inside the wrapper div, otherwise all of your text will be centered. Quote Link to comment Share on other sites More sharing options...
waynewex Posted August 7, 2008 Author Share Posted August 7, 2008 But I've used margin:auto; many times on IE7 and it's worked? Quote Link to comment Share on other sites More sharing options...
haku Posted August 7, 2008 Share Posted August 7, 2008 That text-align comment was wrong - it won't fix the problem at hand. It would center everything inside the element, but the element itself is not centered, and isn't 100% width, so it's not going to solve the problem. It's also not the greatest coding in that you have to go and reset every element inside whatever it is that you have applied the text-align to. Looking at your code, and assuming it's all your code, I'm about 99% sure it's because you don't have a doctype (DTD) in your html. This throws IE into quirks mode, which makes it, well, quirky. Quote Link to comment Share on other sites More sharing options...
TheFilmGod Posted August 7, 2008 Share Posted August 7, 2008 #wrapper{ width: 1000px; margin:auto; border-right:#d7d7cb 1px solid; border-left:#d7d7cb 1px solid; border-bottom:#d7d7cb 1px solid; } change to: #wrapper{ width: 1000px; margin: 0 auto; border:#d7d7cb 1px solid; border-top: none; } Yes, Haku is correct. You can relate IE7 quirk mode to a person getting drunk. It's not pretty and anything goes... Remember to make the dtd as strict. This makes IE run in the most standard compliant mode that browser can do. Text-align is a poor way to align things, as it is only designed to align text in the center. Block elements should not be affected in this, although IE improperly renders this behaviour. Quote Link to comment Share on other sites More sharing options...
waynewex Posted August 12, 2008 Author Share Posted August 12, 2008 That text-align comment was wrong - it won't fix the problem at hand. It would center everything inside the element, but the element itself is not centered, and isn't 100% width, so it's not going to solve the problem. It's also not the greatest coding in that you have to go and reset every element inside whatever it is that you have applied the text-align to. Looking at your code, and assuming it's all your code, I'm about 99% sure it's because you don't have a doctype (DTD) in your html. This throws IE into quirks mode, which makes it, well, quirky. You were right. I was using Dreamweaver MX for this when I usually use CS3. So that's what threw me off. Thanks!!!! :) :) Quote Link to comment Share on other sites More sharing options...
suren_g Posted December 18, 2008 Share Posted December 18, 2008 Similar problem, different solution. We had a <!-- comment --> at the top of our HTML template. This threw IE into whacky mode, where margin: auto's weren't being applied properly. We removed the comment and the sun started shining once more... Solution was listed at http://csscreator.com/node/26128#comment-140912 Cheers! Quote Link to comment Share on other sites More sharing options...
haku Posted December 18, 2008 Share Posted December 18, 2008 The problem essentially stems from the same source. Before your doctype, you can't have ANYTHING. No whitespace at all. If you do, the browser doesn't recognize the doctype. As a result, having a comment before the doctype invalidates the doctype, and causes the same problems as having no doctype at all. Glad you got it sorted! Quote Link to comment Share on other sites More sharing options...
glenelkins Posted December 18, 2008 Share Posted December 18, 2008 you could also put the wrapper inside another container: #container { width: 100%; } <div id="container"> <div id="wrapper"></div> </div> that works in all browsers Quote Link to comment Share on other sites More sharing options...
SuperBlue Posted December 18, 2008 Share Posted December 18, 2008 I helped out on a similar problem not long ago. DW and blindly usage of templates seam to be the main source. IE6 however still needs the text-align fix, you dont need to reset the text-alignment more then once if done right. Quote Link to comment Share on other sites More sharing options...
bronzemonkey Posted December 19, 2008 Share Posted December 19, 2008 IE7 doesn't need the text-align hack. That was only IE5. If you want to center a page you put {width:960px; margin:0 auto;} and that will center in all browsers from IE6 through to FF3. Similar problem, different solution. We had a <!-- comment --> at the top of our HTML template. This threw IE into whacky mode, where margin: auto's weren't being applied properly. We removed the comment and the sun started shining once more... Probably because you were kicking IE into quirks mode by having an html comment outside of the html doc. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.