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.

Code:

<!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 Code:

<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:

Code:

<!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

**msmedley** · 02-27-2008, 01:50 AM

Jeez, simplicity fixed it. I changed my "page" div in my original source to be just:

Code:

    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.

Thread: CSS layout problem with IE (works fine in FF and Safari)

Thread Tools

Search Thread

CSS layout problem with IE (works fine in FF and Safari)

Bookmarks

Bookmarks

Posting Permissions