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 6 of 6
  1. #1
    Regular Coder
    Join Date
    May 2004
    Location
    The First State
    Posts
    233
    Thanks
    9
    Thanked 0 Times in 0 Posts

    layout not working in IE 6

    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?

    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" 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>
    Attached Thumbnails Attached Thumbnails layout not working in IE 6-ie.gif   layout not working in IE 6-ff.gif  

  • #2
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    You need to give us your footer image.
    .
    .

  • #3
    Regular Coder
    Join Date
    May 2004
    Location
    The First State
    Posts
    233
    Thanks
    9
    Thanked 0 Times in 0 Posts
    here's the footer image
    Attached Thumbnails Attached Thumbnails layout not working in IE 6-bgd_bot.jpg  

  • #4
    New Coder
    Join Date
    Aug 2006
    Posts
    96
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #5
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    Remove this from #bottom:

    Code:
    position:absolute;
    width:100%;
    .
    .

  • #6
    Regular Coder
    Join Date
    May 2004
    Location
    The First State
    Posts
    233
    Thanks
    9
    Thanked 0 Times in 0 Posts
    beautiful that worked! thanks for the help


  •  

    Posting Permissions

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