POMO-man Posted September 18, 2007 Share Posted September 18, 2007 Yeah, you guys get this ALL the time. Can't figure out why these two DIVs won't line up side-by-side in IE.If you visit www.printingservices.net you'll see that Firefox handles this code well, the two DIVs (under the NAV bar) line up nicely. But, in IE it breaks and the DIV with the silver background drops to below.Anybody got a hack for this? Link to comment Share on other sites More sharing options...
POMO-man Posted September 18, 2007 Author Share Posted September 18, 2007 Here is the XHTML:<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><xhtml><head><LINK REL="SHORTCUT ICON" HREF="graphics/favicon.ico"><title>:: Printing Services ::</title><style type="text/css">h1 {color:#333333; Font-size: 2.25em; font-family: serif; letter-spacing: -1px; } h2 {color:#333333; Font-size: 1em; font-family: sans-serif; text-decoration: underline; } h3 {color:#666666; Font-size: .85em; font-family: sans-serif; letter-spacing: .25px; line-height: 120%; } a {color:#333333; } pre { color:#808080; } #navcontainer ul{padding: .2em 0;margin: 0;list-style-type: none;background-color: #036;color: #FFF;width: 100%;font: normal 90% arial, helvetica, sans-serif;text-align: center;} ul#navlist{margin-left: 0;padding-left: 0;white-space: nowrap;}#navlist li{display: inline;list-style-type: none;}#navlist a { padding: 3px 10px; }#navlist a:link, #navlist a:visited{color: #fff;background-color: #036;text-decoration: none;}#navlist a:hover{color: #E8DEB1;background-color: #00539F;text-decoration: none;}#container{width: 650px;}#mainleft{float:left;margin-top: 12px;width: 180px;height: 300px;margin-left: 10px;margin-right: 10px;}#mainright{background-color: silver;margin-top: 20px;padding-left: 10px;float: left;width: 430px;height: 300px;}#printingservices{margin-bottom: -10px;}#bottom{float:left;padding-top: 1px;padding-left:50px;}</style></head><body><div id="container"><div id="printingservices"><h1>Printing Services, Inc. </h1></div><div id="navcontainer"><ul id="navlist"><li id="active"><a href="index.html" id="current">home</a></li><li><a href="contact.html">contact</a></li><li><a href="about.html">about</a></li><li><a href="shop.html">shop</a></li><li><a href="locate.html">locate</a></li></ul></div><div id="mainleft"><h2 align="center">Welcome</h2><h3>Printing Services, Inc. is your one-stop resource for all of your printing needs.Our commitment to quality shines through in every job we produce.</h3><hr /> <h3 align="center">Please look around our web site and <a href="contact.html">contact</a> us for more information.</h3><h3 align="center">email: <a href="mailto:design@printingservices.net">design@printingservices.net</a></h3></div><div id="mainright"><p align="center">Printing Services, Inc</p><p align="center">8815 S. Sprinkle Rd</p><p align="center">Portage, MI 49002</p></div></div><div id="bottom"><pre>All images and content Copyright © 2007, Printing Services, Inc.</pre><div></body></xhtml> Link to comment Share on other sites More sharing options...
Guest FirefoxRocks Posted September 19, 2007 Share Posted September 19, 2007 You have tiny errors in your XHTML document, so I will correct them for you <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><link rel="shortcut icon" href="graphics/favicon.ico" /><title>:: Printing Services ::</title><style type="text/css">h1{color:#333;font-size: 2.25em;font-family: serif;letter-spacing: -1px;}h2{color:#333;font-size: 1em;font-family: sans-serif;text-decoration: underline;}h3{color:#666;Font-size: .85em;font-family: sans-serif;letter-spacing: .25px;line-height: 120%;}a{color:#333;}pre{color:#808080;}#navcontainer ul{padding: .2em 0;margin: 0;list-style-type: none;background-color: #036;color: #FFF;width: 100%;font: normal 90% arial, helvetica, sans-serif;text-align: center;}ul#navlist{margin-left: 0;padding-left: 0;white-space: nowrap;}#navlist li{display: inline;list-style-type: none;}#navlist a { padding: 3px 10px; }#navlist a:link, #navlist a:visited{color: #fff;background-color: #036;text-decoration: none;}#navlist a:hover{color: #E8DEB1;background-color: #00539F;text-decoration: none;}#container{width: 650px;}#mainleft{float:left;margin-top: 12px;width: 180px;height: 300px;margin-left: 10px;margin-right: 10px;}#mainright{background-color: silver;margin-top: 20px;padding-left: 10px;float: left;width: 430px;height: 300px;}#printingservices{margin-bottom: -10px;}#bottom{float:left;padding-top: 1px;padding-left:50px;}</style></head><body><div id="container"><div id="printingservices"><h1>Printing Services, Inc. </h1></div><div id="navcontainer"><ul id="navlist"><li id="active"><a href="index.html" id="current">home</a></li><li><a href="contact.html">contact</a></li><li><a href="about.html">about</a></li><li><a href="shop.html">shop</a></li><li><a href="locate.html">locate</a></li></ul></div><div id="mainleft"><h2 style="text-align:center">Welcome</h2><h3>Printing Services, Inc. is your one-stop resource for all of your printing needs. Our commitment to quality shines through in every job we produce.</h3><hr /><h3 style="text-align:center">Please look around our web site and <a href="contact.html">contact</a> us for more information.</h3><h3 style="text-align:center">email: <a href="mailto:design@printingservices.net">design@printingservices.net</a></h3></div><div id="mainright"><p style="text-align:center">Printing Services, Inc</p><p style="text-align:center">8815 S. Sprinkle Rd</p><p style="text-align:center">Portage, MI 49002</p></div></div><div id="bottom" style="white-space:pre">All images and content Copyright © 2007, Printing Services, Inc.<div></body></html> The errors were:1. It is <html> not <xhtml>. There is no such element as <xhtml>in XHTML. LOL2. I think this is a minor mistake as your element <link> was capitalized, so was the attributes, and missing self-ending slash.3. I compressed your CSS a little, hope you can still read it.4. Replaced align="center" with style="text-align:center"5. The copyright symbol is an entity, written using ©For the <div> elements, there is the negative margins, padding, border, etc. Just play around and you'll get it somehow. Link to comment Share on other sites More sharing options...
POMO-man Posted September 19, 2007 Author Share Posted September 19, 2007 Thank you for helping the code be more well-formed.As for why it's breaking... you're saying to just keep fiddling with it until something works?(Note to Microsoft: Thanks for IE. I love headaches.) Link to comment Share on other sites More sharing options...
jlhaslip Posted September 19, 2007 Share Posted September 19, 2007 IE's box model is different. Either widen the container or narrow the two inside div by removing some margins.Check this out: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><link rel="shortcut icon" href="graphics/favicon.ico" /><title>:: Printing Services ::</title><style type="text/css">h1{color:#333;font-size: 2.25em;font-family: serif;letter-spacing: -1px;}h2{color:#333;font-size: 1em;font-family: sans-serif;text-decoration: underline;}h3{color:#666;Font-size: .85em;font-family: sans-serif;letter-spacing: .25px;line-height: 120%;}a{color:#333;}#navcontainer ul{padding: .2em 0;margin: 0;list-style-type: none;background-color: #036;color: #FFF;width: 100%;font: normal 90% arial, helvetica, sans-serif;text-align: center;}ul#navlist{margin-left: 0;padding-left: 0;white-space: nowrap;}#navlist li{display: inline;list-style-type: none;}#navlist a { padding: 3px 10px; }#navlist a:link, #navlist a:visited{color: #fff;background-color: #036;text-decoration: none;}#navlist a:hover{color: #E8DEB1;background-color: #00539F;text-decoration: none;}#container{width: 680px; margin: 0 auto; border: 1px solid #cccccc; }#mainleft{float:left;margin-top: 12px;width: 200px;height: 300px;margin-left: 10px;margin-right: 10px;}#mainright{background-color: silver;margin-top: 20px;margin-right: 10px;margin-bottom: 10px;float:right;width: 430px;height: 300px;}#printingservices{margin-bottom: -10px;}#bottom{padding-top: 1px;padding-left:50px;clear:both; border-top: 1px solid #cccccc; color:#808080; }</style></head><body><div id="container"><div id="printingservices"><h1>Printing Services, Inc. </h1></div><div id="navcontainer"><ul id="navlist"><li id="active"><a href="index.html" id="current">home</a></li><li><a href="contact.html">contact</a></li><li><a href="about.html">about</a></li><li><a href="shop.html">shop</a></li><li><a href="locate.html">locate</a></li></ul></div><div id="mainleft"><h2 style="text-align:center">Welcome</h2><h3>Printing Services, Inc. is your one-stop resource for all of your printing needs. Our commitment to quality shines through in every job we produce.</h3><hr /><h3 style="text-align:center">Please look around our web site and <a href="contact.html">contact</a> us for more information.</h3><h3 style="text-align:center">email: <a href="mailto:design@printingservices.net">design@printingservices.net</a></h3></div><div id="mainright"><p style="text-align:center">Printing Services, Inc</p><p style="text-align:center">8815 S. Sprinkle Rd</p><p style="text-align:center">Portage, MI 49002</p></div><div id="bottom">All images and content Copyright © 2007, Printing Services, Inc.<div></div></body></html> Floated the right hand div to the right, added a little margin and borders here and there, removed the pre tag, centred it, moved the footer into the container, generally played with it a little bit. :)Hope it helps, but do check the code and see if you understand the changes.*edit*Not used to having the html bbcode, sorry... Link to comment Share on other sites More sharing options...
Guest FirefoxRocks Posted September 20, 2007 Share Posted September 20, 2007 Oh I remember it is something related to the "box-model 20px" bug. Try Googling the term and some results should help you.Also, could people please wrap HTML/XHTML code in the BBCode tags? It makes it a lot more readable. Link to comment Share on other sites More sharing options...
POMO-man Posted September 21, 2007 Author Share Posted September 21, 2007 Thanks for your help, guys! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.