Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts

    IE/win behaving badly with nested divs (css page layout)

    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/prototy...prototype3.htm

    And here's the code:

    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:

    Code:
    margin: 20px 0px 20px 0px;
    Check the changed page out here:

    http://www.camelotguilds.org/prototy...rototype3b.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?

  • #2
    Regular Coder Pepe, the bull's Avatar
    Join Date
    Feb 2005
    Location
    Vancouver, WA
    Posts
    163
    Thanks
    1
    Thanked 16 Times in 16 Posts
    Does changing the Content Div to this work like you want it to?

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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •