...

View Full Version : layout not working in IE 6



finstah1
08-01-2007, 09:04 PM
this is driving me crazy! I've attached a FF and IE screenshot of my problem. I have an image positioned at the bottom of my container that goes out of whack when I add the 3 floated columns in the main area. I thought it was a clearing issue but nothing seems to work. Can someone see something I missed somewhere?



<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style>
html,body {
margin:0;
padding:0;
height:100%;
background:gray;
font-family:arial,sans-serif;
font-size:small;
color:#666;
}

p {
line-height:1.5;
margin:0 0 1em;
}

#container {
position:relative;
margin:0 auto;
width:770px;
background: #F0F0F0 url("images/bgd_container.gif") no-repeat bottom;
height:auto !important;
height:100%;
min-height:100%;
}


#content { padding:1em 1em 5em; /* bottom padding for footer */}

#content p {
text-align:justify;
padding:0 1em;
}

#bottom {
position:absolute;
width:100%;
bottom:0; /* stick to bottom */
background: url("images/bgd_bot.jpg") no-repeat center bottom;
}

/*#bottom p {
padding:1em;
margin:0;
}*/

#header {
width: 770px;
height: 187px;
background: url("images/header.jpg") no-repeat left top;
}

h1#topImg {
padding: 187px 0 0 0;
overflow: hidden;
background: url("images/header.gif") no-repeat left top;
height: 0px !important;
height /**/:187px;
}

/* footer start */
#footer {
height: 25px;
width: 400px;
margin: 0 auto;
}

#footer ul {
display: block;
clear: both;
padding-top: 5px;
margin: 0px;
height: auto;
font: bold 11px Arial, Helvetica, sans-serif;
text-align: center;
overflow: hidden;
}

#footer ul li {
display: inline;
list-style-type: none;
margin: 0;
font: bold 11px Arial, Helvetica, sans-serif;
color: #CCC;
}

#footer ul li a, #footer ul li a:link {
font: bold 11px Arial, Helvetica, sans-serif;
color: #036;
text-decoration: underline;
}

#footer a:visited {color: #FFF;}
#footer a:hover { text-decoration: underline;}
/* footer end */

#leftnav {
float: left;
width: 160px;
margin: 0;
padding: 1em;
}

#rightnav {
float: right;
width: 160px;
margin: 0;
padding: 1em;
}

#content {
margin-left: 200px;
border-left: 1px solid gray;
margin-right: 200px;
border-right: 1px solid gray;
padding: 1em;
max-width: 36em;
background-color: #F00;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1 id="topImg">Vice President for Finance</h1>
</div>

<!--<div id="header">
<h1>Vice President for Finance</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.<</p>
</div> -->
<div id="leftnav">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.</p>
</div>
<div id="rightnav">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.</p>
</div>
<div id="content">
<h2>Subheading</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

<div id="bottom">&nbsp;</div>
</div>
<div id="footer">
<ul>
<li>220 Hall &middot; </li>
<li>University &middot; </li>
<li>blah blah &middot; </li><br />

<li><a href="mailto:vpfinance@.edu">vpfinance@.edu</a> &middot; </li>
<li>phone: .2107 &middot; </li>
<li>fax: .2466</li>
</ul>
</div>
</body>
</html>

Jutlander
08-01-2007, 09:25 PM
You need to give us your footer image.

finstah1
08-01-2007, 09:31 PM
here's the footer image

skinner927
08-01-2007, 09:39 PM
add on IE conditional that bumps the footer over a few pixels. Not the best thing to do but the easiest. The problem is probably with the object box model. I haven't taken a good look at your code but I'd be thats what it is. The only thing to do, without re-writing alot, is to add the IE conditional.

Jutlander
08-01-2007, 09:57 PM
Remove this from #bottom:


position:absolute;
width:100%;

finstah1
08-01-2007, 10:03 PM
beautiful that worked! thanks for the help



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum