PDA

View Full Version : IE layout problem



Iwan
Nov 23rd, 2006, 11:02 AM
Dear Webdesigners and Coders,

Im trying to build a layout that is suiteable in IE, Firefox and Opera. I have build the complete layout in div's with CSS but one problem IE is not doing the right thing...

I have made a little test .htm with the problem included :)

I made a Top div. A left menu bar, a content part and a right menu and a footer. The layout is put on the right positions so it seems fine. BUT i have a fixed content of 570pixels. The complete Container is 990pixels so if i use margin-left: 210px and Margin-right: 210px you have 570px for the content.

For the test i put in the content a table of 570pixels width. Firefox and Opera shows the table in the top part of the content div-layer but IE displays it at the bottom under the menu div's. When i make the table smaller. It fits. But the strange part is. If i dont put a table in the content part, the content-div layer is 570px. But after putting content in it, it makes it smaller again. It loses 6pixel or more and the content drops down again.

--> The page where the problem is shown. Try IE and Firefox and see the difference. http://www.rinkel.nl/layoutproblem.htm

I hope you guys can help me out. Because im getting INSANE HERE!!! :eek: :confused: :eek: I have tried many things and it just wont work.

Thnx for the help.

The code:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Test layout</title>

<style>

*
{
margin:0;
padding:0;
}

html, body
{
padding:0px;
margin: 0px;
}

#container
{
margin-left: auto;
margin-right: auto;
width: 990px;
}

#top
{
width: 990px;
height: 145px;
background: #999;
border: 0px solid #999;
font-size: 0px;
padding: 0;
margin: 0;
}

#links
{
float: left;
width: 180px;
height: 400px;
padding: 15px 0px 0px 15px;
border: 0px solid #999;
background: #000;
}

#rechts
{
float: right;
width: 180px;
height: 400px;
padding: 15px 15px 0px 0px;
border: 0px solid #999;
background: #000;
}

#content
{
margin-left: 210px;
margin-right: 210px;
margin-top: 15px;
padding: 0;
font-size: 12px;
font-family: arial;
border: 1px solid #999999;

}

#cleardiv
{
clear: both;
height: 1px;
}

#footer
{
clear: both;
width: 990px;
height: 115px;
margin: 0;
padding: 0;
background: #333399;
font-size: 0px;
}
</style>

</head>


<body>

<div id="container">

<div id="top"></div>

<div id="links"></div>

<div id="rechts"></div>

<div id="content">
<table border="1" cellpadding="0" cellspacing="0" style="width:570px;">
<tr><td>
Content
</td></tr>
</table>

</div>

<div id="cleardiv"></div>
<div id="footer"></div>
</div>

</body>
</html>

_Aerospace_Eng_
Nov 23rd, 2006, 11:11 AM
Since you are using a fixed width just float all 3 columns.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test layout</title>
<style type="text/css">
* {
margin:0;
padding:0;
}

#container {
width:990px;
margin:auto;
}

#top {
height:145px;
background:#999;
}

#links {
float:left;
width:180px;
height:400px;
background:#000;
padding:15px 0 0 15px;
}

#rechts {
float:left;
width:180px;
height:400px;
background:#000;
padding:15px 15px 0 0;
}

#content {
width:598px;
float:left;
margin-top:15px;
font-size:12px;
font-family:arial;
border:1px solid #999;
}

#cleardiv {
clear:both;
line-height:0px;
font-size:0;
}

#footer {
clear:both;
height:115px;
background:#339;
}
</style>
</head>
<body>
<div id="container">
<div id="top"></div>
<div id="links"></div>
<div id="content"> Content </div>
<div id="rechts"></div>
<div id="cleardiv"></div>
<div id="footer"></div>
</div>
</body>
</html>

Iwan
Nov 23rd, 2006, 12:26 PM
YES!!!!!!!!!!!!! :thumbsup:

That solves the problem!!! Your great!

By why do i have to float the content div-layer also?

Because FireFox and Opera just react the right way it has been told by the CSS!

.Container {
margin-left: 210px;
margin-right: 210px;
...
}

but IE doesnt...

Anyway...im so happy that is solved the problem by floating the content also!

All three browsers display the layout the right way now :cool: