...

View Full Version : Skinny Column in IE



Gremdel
05-26-2007, 08:24 AM
Hi All,
I'm having trouble getting this to work in IE6. It looks fine in Firefox but in IE, it adds these margins to the right column and I don't know where they're coming from. Any help is appreciated.

The HTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Test</title>
<link rel="stylesheet" type="text/css" href="Nicamade_files/stylesheet.css"></head><body>
<div id="container">
<!-- header //-->
<div id="header">
Curabitur purus. Cras eu elit a lacus vestibulum dictum. Etiam eu sem. Donec adipiscing purus ac nunc. Vivamus auctor, magna vitae interdum accumsan, neque libero egestas nibh, quis imperdiet ipsum urna at purus. Sed scelerisque velit non arcu. Cras lacus risus, tincidunt vitae, iaculis tincidunt. <br clear="all">
</div>
<!-- header_eof //-->

<!-- body //-->
<!-- left_navigation //-->
<div id="left_column">
Curabitur purus. Cras eu elit a lacus vestibulum dictum. Etiam eu sem.
Donec adipiscing purus ac nunc. Vivamus auctor, magna vitae interdum accumsan, neque
libero egestas nibh, quis imperdiet ipsum urna at purus. Sed scelerisque velit non arcu.
</div>
<!-- left_navigation_eof //-->

<!-- body_text //-->
<div id="body_text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin ornare. In condimentum, diam quis egestas ullamcorper, nulla odio hendrerit odio, a molestie elit mauris sit amet augue. Phasellus at purus ac nibh blandit consequat. Mauris est leo, pharetra ut, vulputate vel, faucibus non, dui. Quisque in enim. Aenean mollis mollis enim. Nulla tempor. Sed rhoncus congue nulla. Suspendisse dolor erat, ultricies vel, facilisis et, ullamcorper sit amet, nibh. Nullam iaculis velit in pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam sit amet est. Vestibulum cursus neque sed ante. Phasellus aliquet tincidunt lacus. Nulla eu nisi. Nunc dictum, libero ut tincidunt gravida, ligula pede varius lectus, sed elementum erat justo quis nisl. Nullam imperdiet nisi quis turpis. Morbi augue turpis, gravida a, tempor vitae, mattis nec, enim. Aenean placerat enim eget tellus.
<br />
</div>
<!-- body_text_eof //-->

<!-- right_navigation //-->
<div id="right_column">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin ornare. In condimentum, diam quis egestas ullamcorper, nulla odio hendrerit odio, a molestie elit mauris sit amet augue. Phasellus at purus ac nibh blandit consequat. Mauris est leo, pharetra ut, vulputate vel, faucibus non, dui. Quisque in enim. Aenean mollis mollis enim. Nulla tempor. Sed rhoncus congue nulla. Suspendisse dolor erat, ultricies vel, facilisis et, ullamcorper sit amet, nibh. Nullam iaculis velit in pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam sit amet est. Vestibulum cursus neque sed ante.
</div>
<br clear="all">
<!-- right_navigation_eof //-->
<!-- body_eof //-->

</div>
<br clear="all">
</body></html>


The CSS:


BODY {
background: #F5EEBC;
color: #000000;
margin: 0px;
padding: 0px;
text-align: center;
}

#container {
width: 778px;
margin: 0px auto 0px auto;
padding-right: 5px;
padding-left: 5px;
text-align: left;
}

#header {
width: 778px;
height: 134px;
padding: 0px;
margin: 0px;
background-color: Gray;
}

#left_column {
float: left;
width: 175px;
margin: 0px;
padding: 0px;
background-color: #cee4f0;
}

#right_column {
float: right;
width: 150px;
margin: 0px;
padding: 0px;
background-color: #ede5c5;
}

#body_text {
width: 433px;
padding: 10px;
float: left;
background-color: white;
}

_Aerospace_Eng_
05-26-2007, 08:44 AM
This comes from you not using a full doctype. Currently you have a partial doctype. Change this

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
to this

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
That should fix that problem but now its created another one. You should see the word ante off to the left. This is due to comments in between two floated elements. To fix this you can either start removing comments until its gone add position:relative; to #right_column. Along your journey to code for IE you will soon find out that position:relative can sometimes be a simple fix and sometimes it can cause more harm to the document than it can fix the document.

Gremdel
05-27-2007, 03:09 AM
Thanks, AE, that worked great. I didn't get the new problem you mentioned but I'll know what caused it if it does show up.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum