Layout not rendering properly in IE

**MonchiKi** · 07-24-2006, 04:55 PM

Hello,

I’m working on a site where the CSS layout renders correctly on Firefox and Safari but not IE. I’ve simplified the site and uploaded it here:

http://www.geocities.com/hyojin_hwang/test.html

In IE, the red borders are not lined up as they are in Firefox. In addition, there is some extra space between the banner and the bottom content.

The code is here:

<html>
<head>

<style type="text/css">

body {
color: #4F4F4F;
margin: 0px;
padding: 0px;
text-align: center; }
#container {
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
padding: 0px;
background-color: grey;
border: 1px solid #4F4F4F;
min-width: 820px;
text-align: center; }
#banner {
height: 200px;
margin: 0px;
padding: 0px;
background-color: blue;
min-width: 820px;
text-align: center; }
#content {
margin-left: auto;
margin-right: auto;
padding; 0px;
background-color: yellow;
text-align: center;
border-right: 5px solid #A52A2A;
border-left: 5px solid #A52A2A;
width: 754px;
voice-family: "\"}\"";
voice-family: inherit;
width: 744px; }
html>body #content {
width: 744px; }
#leftcontent {
float: left;
width: 170px;
padding: 5px;
margin: 0px;
border-right: 1px solid #B4B4B4;
background-color: orange; }
#rightcontent {
margin-left: 170px;
padding: 5px;
background-color: #green;
text-align: justify; }

</style>
</head>

<body>

<div id="container">

<div id="banner" valign=bottom>
<img src="http://www.geocities.com/hyojin_hwang/w45650959.jpg" border=0 style="margin: 0px; padding: 0px">
</div>

<div id="content">

<div id="leftcontent">
 
</div>

<div id="rightcontent">
 
</div>

</div>

</div>

</body>
</html>

Can someone please take a look at it and tell me what I may be doing incorrectly?

Thanks for your help!

**jscheuer1** · 07-24-2006, 06:32 PM

Use a DTD on the page:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>

Spell grey with an a - gray.

add:

margin-top:-4px;

to the #content declaration, and if you want to get rid of that thin line above the #content division in IE and possibly others, add:

border-top-width:0;

to the #container declaration.

Also, I'm not sure what background-color you really want for #rightcontent but:

background-color: #green;

is invalid, it should be:

background-color: green;

All of this was worked out for IE 6 PC and FF 1.5.04 PC. Mac browsers may behave differently.

**jscheuer1** · 07-24-2006, 08:45 PM

I played around with this a bit more and liked this simplified version:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>

<style type="text/css">
body {
   color: #4F4F4F;
   margin: 0px;
   padding: 0px;
   }
#container {
   min-width:820px;
   width:expression(Math.max(document.documentElement.clientWidth-42, 820)+'px');
   margin:0 20px 20px 20px;
   padding: 0px;
   background-color: gray;
   border: 1px solid #4F4F4F;
   text-align: center;
   }
#banner {
   background-color: blue;
   }
#banner img {
   vertical-align:bottom;
   }
#content {
   margin:0 auto;
   background-color: yellow;
   border-right: 5px solid #A52A2A;
   border-left: 5px solid #A52A2A;
   width: 744px;
   }
#leftcontent {
   float: left;
   width: 170px;
   padding: 5px;
   border-right: 1px solid #B4B4B4;
   background-color: orange;
   }
#rightcontent {
   margin-left: 170px;
   padding: 5px;
   background-color: green;
   text-align: justify;
   }
</style>
</head>

<body>

<div id="container">

   <div id="banner">
      <img src="http://www.geocities.com/hyojin_hwang/w45650959.jpg" border="0">
   </div>

   <div id="content">
   
      <div id="leftcontent">
         &nbsp;
      </div>

      <div id="rightcontent">
         &nbsp;
      </div>

   </div>

</div>

</body>
</html>

**MonchiKi** · 07-25-2006, 02:12 AM

Thank you soooooo much, jscheuer1. I'm sorry about the little mistakes - I was in a hurry trying to simplify my layout.

One last thing - it seems that when the leftcontent is longer than rightcontent, leftcontent extends below its parent div. Is there any way to avoid this?

Again, thank you so much!

**jscheuer1** · 07-25-2006, 02:58 AM

Well, you have 744px to play with between the #leftcontent and the #rightcontent. As long as the total of the two widths (as calculated by the browser) does not exceed 744px, you should be OK.

If you add a division right after #rightcontent with style:

Code:

#clears {
   clear:both;
   }

like so:

HTML Code:

      <div id="rightcontent">
         &nbsp;
      </div>
<div id="clears"></div>

Things could work out well.

With width:170px from #leftcontent and the margin-left:170px from #rightcontent, the content in #leftcontent should wrap (as long as there isn't a wider than 170px image in there or no possibility of a line break for some other reason like - using all   characters to populate it). The background-color of yellow should then show through from #content if #rightcontent isn't tall enough to match the wrapped height of #leftcontent.

If you have changed things and/or are seeing a different result, I would need to see an example of the problem.

Thread: Layout not rendering properly in IE

Thread Tools

Search Thread

Layout not rendering properly in IE

Bookmarks

Bookmarks

Posting Permissions