Div Width Error in IE [Archive] - HTML Forums - Free Webmaster Forums and Help Forums

Eddy999999

12-14-2006, 05:51 PM

I'm kind of a newbie at CSS, and I'm trying to make a layout for my game I'm working on in PHP using CSS instead of tables. The basic layout is a main content div in the center, with top, left, right, and bottom divs around it. Everything looks perfect in Firefox, but not so much in IE.

It looks to me like IE is not calculating the widths correctly for the divs. I took a screenshot, calculated what the widths of the divs should be, and measured it out in PSP, and they don't match up with what they are supposed to be. Heres the source code:

site.css:

body
{
color: #404040;
text-align: center;
background-image: url('Images/pageBG.jpg');
}

#headerContent
{
position: absolute;
background-image: url('Images/menuBG.jpg');
left:2%;
top:2%;
width: 96%;
height:11%;
}

#leftContent
{
background-image: url('Images/menuBG.jpg');
position: absolute;
left:2%;
top: 12%;
right:83%;
height: 86%;
width: 15%;
}

#mainContent
{
background-image: url('Images/contentBG.jpg');
position: absolute;
top:12%;
left:17%;
right:17%;
height: 71%;
width: 66%;
overflow: auto;

}

#rightContent
{
background-image: url('Images/menuBG.jpg');
position: absolute;
top:12%;
left:83%;
height:71%;
width:15%;
margin-left:0%;
}

#bottomContent
{
background-image: url('Images/menuBG.jpg');
position: absolute;
top:83%;
left:17%;
width:81%;
height:15%;
margin-top:0%;
margin-left:0%;
}

#headerBackground
{
background-image: url('Images/specialBG.jpg');
border: 3px outset #000000;
width: 75%;
margin: auto auto auto auto;
}

#links
{
background-image: url('Images/specialBG.jpg');
width: 75%;
height: 50%;
margin: 25% auto 25% auto;
border: 3px outset #000000;
}

#cornerTL
{
background-image: url('Images/cornerTL.jpg');
background-repeat: none;
position:absolute;
width: 25px;
height: 25px;
top:2%;
left:2%;
}

#cornerTR
{
background-image: url('Images/cornerTR.jpg');
background-repeat: none;
position:absolute;
width: 25px;
height: 25px;
top:2%;
left:98%;
margin-left:-25px;
}

#cornerBL
{
background-image: url('Images/cornerBL.jpg');
background-repeat: no-repeat;
position: absolute;
width:25px;
height:25px;
top:98%;
left:2%;
margin-top:-25px;
}

#cornerBR
{
background-image: url('Images/cornerBR.jpg');
background-repeat: no-repeat;
position: absolute;
width:25px;
height:25px;
top:98%;
left:98%;
margin-top:-25px;
margin-left:-25px;
}

span.pop
{
color:c0c0c0;

}

h1, h2, h3, h4, h5, h6
{
font-family: "algerian";
color: #c00000;
}

a
{
color: #808080;
text-decoration: none;
font-weight: bold;
}

a span
{
display:none;
}

a:hover span
{
display:block;
position:absolute;
top:0%;
left:80%;
width:100%;
background-color: #c0c0c0;
color: #404040;
border: 3px outset #000000;
font-size:75%;
z-index:1;
}

#pop
{
margin:0px;
position:relative;
}

table
{
margin-left: auto;
margin-right: auto;
}

layoutTest.html (A page I created just to test the layout)

<html>
<head>
<title>Test Page</title>
<link href="site.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="headerContent">
<div id="headerBackground"><h1 style="margin-top:0px; margin-bottom:0px; color: #c00000;">Layout Test Page</h1></div>
</div>
<div id="leftContent">
<div id="links">
<h2 style="color: #c00000;">Menu</h2>
<font size=4>
<div id="pop"><a href="test1.html">Test Link 1<span>This is the first Test Link</span></a></div>
<div id="pop"><a href="test2.html">Test Link 2<span>This is the second Test Link</span></a></div>
<div id="pop"><a href="test3.html">Test Link 3<span>This is the third Test Link</span></a></div>
</div>
</font>
</div>
<div id="rightContent">
<p style="color:#800000">This is the right content</p>
</div>
<div id="bottomContent">
<p style="color:#800000">This is the bottom content</p>
</div>
<div id="mainContent"><div id="mainBorder">
<p>This is the main content</p>
</div></div>
<div id="cornerTL"></div><div id="cornerTR"></div><div id="cornerBL"></div><div id="cornerBR"></div>
</body>
</html>

If you want to see what it looks like, go here:
http://mikwaz.freehostia.com/fg2/layoutTest.html

What really confuses me is why the heights and left and top coordinates are calculated correctly, but the widths are not, even though they all use percentages. Someone please help me figure out what is wrong. I have been trying to figure this out for a while, and google isn't seeming to help :(

wolfdogg

12-15-2006, 05:59 PM

you need to add some lines of css specifically for IE, these are know issues. IE takes your widths ads adds the borders and margins to them, or something of the sort. take a closer look at the sizing in IE's display, and try to see what borders or margins are being added to the sizes.

the proper thing to do is add IE tags in your css like this;
heres my navbar
#navbar { width: 140px; float: left; margin: 3px 0px 0px 5px;}
heres my IE correction following the navbar tag
* html #navbar {margin-left: 2px;}
you can see that my left margin is 5 pizels, but needs to be 3pixels less on IE because IE is subtracting the margins from the width, or something of the sort.

we use the * html to call IE browser specific styles and those take precedence over other similar named styles(* html #navbar takes precedence in IE over the #navbar tag)

essentially, get it looking right in firefox first, then adjust the IE specific styles after.

i hope this is what you needed.