Log in

View Full Version : CSS layout problem with IE (works fine in FF and Safari)


msmedley
02-26-2008, 11:44 PM
I hope someone can figure this out. I have a the following divs on my page:

page
... header
... leftnav
... client
... footer
/page

"page" needs to be centered in the body. "header", "leftnav", "client", and "footer" should lay right over "page"

In Firefox and Safari, this displays properly. In IE, "page" doesn't center, and "header", "leftnav", "client", and "footer" shift way over to the right.

Here's the link: http://www.mikesmedley.com/test.html

Help?
msmedley
02-26-2008, 11:57 PM
I made a version that used relative positioning, which looks great in Firefox, but even worse in IE:

http://www.mikesmedley.com/test2.html
Kem
02-27-2008, 01:11 AM
You can see if it's useful.

<!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>
<title>Test</title>
<style type="text/css">
body {
background-color:white;
overflow: hidden;
}
.page {
margin-left: auto;
margin-right: auto;
text-align: center;
vertical-align: top;
width: 1024px;
height: 1000px;
background-color:blue;
float:left;
}
.header {
/* position: absolute;*/
margin-left: 0px;
margin-top: 0px;
width: 1024px;
height: 80px;
background-color:yellow;
clear:right;
}
.leftnav {
/* position: absolute;*/
margin-left: 0px;
/* margin-top: 80px;*/
width: 200px;
height: 538px;
background-color:red;
float:left;
}
.clientarea {
/* position: absolute;
margin-left: 200px;
margin-top: 80px;*/
width: 794px;
height: 508px;
padding: 15px;
text-align: left;
background-color:#c0c0c0;
font-family: "Trebuchet MS", "Century Gothic", Arial, Helvetica;
font-size: 12pt;
overflow: wrap;
float:left;
clear:right;
}
.footer {
/*position: absolute;
margin-left: 0px;
margin-top: 618px;*/
width: 1024px;
height: 80px;
background-color:green;
clear:right;
}
</style>
</head>
<body>
<div class="page">
<div class="header">This is the header area</div>
<div class="leftnav">
This is the left nav area
</div> <!-- left nav div -->
<div class="clientarea">
This is the client area
</div> <!-- client area div -->
<div class="footer">This is the footer area</div>
</div> <!-- page div -->
</body>
</html>


My E very bad, so i can't explan clearly! Sorry and have fun!
Medyman
02-27-2008, 01:18 AM
I think this is what you want...


<html>
<head>
<style>
#page { margin:5px auto; width:900px; background:blue;}
#header { background:yellow; }
#leftnav { float:left; background:red;}
#client { background:orange; }
#footer { clear:both; background:tan; }
</style>
</head>
<body>

<div id='page'>
<div id='header'>This is the header</div>
<div id='container'>
<div id='leftnav'>This is the left nav</div>
<div id='client'>This is the Client area</div>
</div>
<div id='footer'>This is the footer</div>
</div>

</body>
</html>


Most of the css is background colors, so not necessary (unless you want it of course). The only thing to note is the CSS for #page, #leftnav, #footer


Edit: Looks like Kem beat me to it ;)
msmedley
02-27-2008, 01:20 AM
Kem-

Thank you for trying, but...

1. In IE, it is not centered.

2. In Firefox, it is not centered, and the green footer is not visible.
msmedley
02-27-2008, 01:23 AM
Medyman, yours did not center in IE.
rangana
02-27-2008, 01:31 AM
Adding a strict DTD on Medyman's code will get this working:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Put this above the <html> tag.

See if it helps :D
msmedley
02-27-2008, 01:50 AM
Jeez, simplicity fixed it. I changed my "page" div in my original source to be just:


margin: 5px auto;
width: 1024px;
height: 1000px;
background-color:blue;


And it worked fine. No floats, no clears.

Thanks everyone! :)
Kem
02-27-2008, 02:02 AM
Msmedley
Congratulations!!!!

1. In IE, it is not centered.

2. In Firefox, it is not centered, and the green footer is not visible.
Sorry for not properly testing before posting

Medyman!


Edit: Looks like Kem beat me to it
You're from VN, aren't u?. I think so!!!^^
genia
02-29-2008, 12:40 PM
add to the required div the following:
margin: 0 auto;

should do the trick.