Jump to content

breaks in IE...


POMO-man
 Share

Recommended Posts

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

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

Guest FirefoxRocks

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

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

Guest FirefoxRocks

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...