...

View Full Version : IE/win behaving badly with nested divs (css page layout)



Fumigator
05-22-2006, 06:06 AM
I'm having design troubles with a (supposedly) basic page layout. I boiled down the layout to a header, a content column (removed the left and right columns) and a footer.

Firefox displays just what I think should be displayed. IE gets really squirrelly when I adjust the margin of the content div.

Here's a link to exhibit A:

http://www.camelotguilds.org/prototype/main-prototype3.htm

And here's the code:


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

<style type="text/css">
html, body {
margin:0;padding:0;
background: #000040;
}

body {
font: 76% tahoma, arial,sans-serif;
text-align:center;
background: #000040 url(img/background-test2.gif) repeat-y 50% 0;
}

p {
margin:0 10px 10px;
}

div#container {
text-align:left;
width:900px;
margin: 0 auto;
border: 2px solid #ff0000;
}

div#wrapper {
float:left;
width:900px;
border: 1px solid #0000ff;
}

div#content {
float: left;
margin: 20px 220px 20px 220px;
color: #ffffff;
border: 1px solid #00ff00;
clear: right;
letter-spacing: .1em;
word-spacing: .2em;
line-height: 1.8em;
}

div#footer {
clear:left;
width:100%;
background: #333;
color: #FFF;
text-align: center;
}

div#footer p {
margin7:0;
}

</style>
<title>Main Page Prototype</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">
</head>

<body>

<form name="form1" action="" method="post">

<div id="container">
<img src="img/mainpageprototype.jpg" width=900 height=50><br>
<div id="wrapper">
<div id="content">
<p>You are currently viewing the content of a test page. To switch views to another test page, click on the the link that doesn't exist.You are currently viewing the content of a test page. To switch views to another test page, click on the the link that doesn't exist.You are currently viewing the content of a test page. To switch views to another test page, click on the the link that doesn't exist.You are currently viewing the content of a test page. To switch views to another test page, click on the the link that doesn't exist.You are currently viewing the content of a test page. To switch views to another test page, click on the the link that doesn't exist.You are currently viewing the content of a test page. To switch views to another test page, click on the the link that doesn't exist.You are currently viewing the content of a test page. To switch views to another test page, click on the the link that doesn't exist.</p>
</div>
</div>


<div id="footer">
<p>Copyright Footer</p>
</div>
</div>

</body>
</html>

I inserted borders to identify div boundaries. If you look at the page in Firefox, the divs overlay the background graphic beautifully. If you look in IE, the container div stretches to the boundaries of the window, which screws up the placement of the header and the footer.

NOW, watch what happens when I change the margin definition in the div#content id definition to this:


margin: 20px 0px 20px 0px;

Check the changed page out here:

http://www.camelotguilds.org/prototype/main-prototype3b.htm

Now in IE the boundaries of the container div are correct!

If I could just understand _why_ IE is doing what it's doing... then I'd feel like I was getting somewhere. But I'm at a loss why changing a div within a div is altering the format of the outer div.

Any ideas?

Pepe, the bull
05-22-2006, 06:32 AM
Does changing the Content Div to this work like you want it to?


div#content {
margin: 20px auto;
width: 460px;
color: #ffffff;
border: 1px solid #00ff00;
letter-spacing: .1em;
word-spacing: .2em;
line-height: 1.8em;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum