SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background not extending down the page in IE6

    Hi

    web page in question

    I have a div called content that holds a small amount of text and an image. i used a float right to make the image move to the right. the image is longer then the text which is causing a gap between my content and footer.

    this was happening in both IE and FF. i did a search in the forums and found the overflow:auto fix for firefox but the problem remains in IE6

    Here is my code, both of which validated except for color warnings.

    css of page

    Code:
    /* CSS Document */
    
    
    body {
    	margin: 0;
    	padding: 0;
    	font-size: small;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	text-align: center;
    	color: #000000;
    	background-color: #383e43;
    	}
    	
    #container {
    	margin: 0 auto;
    	width: 780px;
    	text-align: left;
    	
    	}
    	
    #courseid {
    	background-color:#383e43;
    	}
    	
    #courseid p {
    	color:#CCCCCC;
    	margin:0;
    	padding: 1px 0;
    	font-size:90%;
    	}
    	
    #header {
    	height: 170px;
    	background:#333 url(images/bg-placeholder.jpg);
    	}
    	
    #header H1 {
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-size: 220%;
    	color:#FFFFFF;
    	margin:0;
    	padding:120px 0 0 10px;
    	}
    	
    	
    .menu {
    	height:28px;
    	background-color:#333;
    	border-bottom:#000000 solid 2px;
    	border-top:#000000 solid 2px;
    	}
    
    
    	
    /* remove the bullets, padding and margins from the lists */
    .menu ul{
    list-style-type:none;
    padding:0;
    margin:0;
    }
    /* make the top level links horizontal and position relative so that we can position the sub level */
    .menu li{
    float:left;
    position:relative;
    z-index:100;
    }
    
    /* use the table to position the dropdown list */
    .menu table{
    position:absolute;
    border-collapse:collapse;
    z-index:80;
    left:-1px;
    top:25px;
    }
    
    /* style all the links */
    .menu a, .menu :visited {
    display:block;
    font-size:95%;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    width:150px;
    padding:7px 0 7px 5px;
    color:#CCCCCC;
    background:#2c3135;
    text-decoration:none;
    margin-right:1px;
    text-align:left;
    }
    /* style the links hover */
    .menu :hover{
    color:#ccc;
    background: url(images/asdf.gif) top repeat-x #2c3135;
    }
    
    /* hide the sub level links */
    .menu ul ul {
    visibility:hidden;
    position:absolute;
    width:150px;
    height:0;
    }
    /* make the sub level visible on hover list or link */
    .menu ul li:hover ul,
    .menu ul a:hover ul{
    visibility:visible;
    }	
    	
    	
    	
    
    #crumbs {
    	background:#CCCCCC;
    	height:30px;
    	padding:0;
    	margin:0;
    	border-bottom:#B1B1B1 solid 2px;
    	}
    	
    #crumbs p {
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size:85%;
    	padding:7px 0 7px 5px;
    	margin:0;
    	color:#000000;
    	}
    
    	
    #content {
    	background-color:#F2F2F2;
    	overflow:auto;
    	
    	}
    	
    #content p {
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size:100%;
    	padding:7px 10px 7px 20px;
    	margin:0;
    	}
    	
    #content img.key {
    	float:right;
    	margin: 10px 20px 10px 5px;
    	padding: 0 0 0 10px;
    	}
    	
    #content H1 {
    	font-family:Georgia, "Times New Roman", Times, serif;
    	font-size:130%;
    	padding:7px 0 0 10px;
    	margin:0;
    	}
    	
    #content H3 {
    	font-family:Georgia, "Times New Roman", Times, serif;
    	font-size:110%;
    	padding:3px 0 3px 10px;
    	margin:0;
    	}
    	
    #footer {
    	height: 30px;
    	background-color:#2c3135;
    	clear:both;
    	}
    	
    #footer p{
    	margin:0;
    	float:right;
    	padding: 7px;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size:85%; 
    	color:#CCCCCC;
    	}

    html of page

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Gen Ed 60 Home</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    
    <div id="container">
    
    <div id="courseid">
    <p>Gen Ed 60 :: Natural Sciences or Technology</p>
    </div>
    
    <div id="header">
    
    <h1>Cyberspace and Society</h1>
    
    </div>
    
    
    
    <div class="menu">
    
    <ul>
    <li><a href="#">Information<!--[if IE 7]><!--></a><!--<![endif]-->
    <table><tr><td>
    	<ul>
    	<li><a href="#" title="course description">Course Description</a></li>
    	<li><a href="#" title="Class Schedule">Class Schedule</a></li>
    	<li><a href="#" title="Instructor Information">Instructor Information</a></li>
    	</ul>
    </td></tr></table>
    <!--[if lte IE 6]></a><![endif]-->
    </li>
    
    <li><a href="#">Resources<!--[if IE 7]><!--></a><!--<![endif]-->
    
    <!--[if lte IE 6]></a><![endif]-->
    </li>
    
    <li><a href="#">Labs<!--[if IE 7]><!--></a><!--<![endif]-->
    <table><tr><td>
    	<ul>
    
    	<li><a href="#" title="lab 1">Lab 1</a></li>
    	<li><a href="#" title="lab 2">Lab 2</a></li>
    	<li><a href="#" title="lab 3">Lab 3</a></li>
    	<li><a href="#" title="lab 4">Lab 4</a></li>
    	<li><a href="#" title="lab 5">Lab 5</a></li>
    	<li><a href="#" title="lab 6">Lab 6</a></li>
    	</ul>
    </td></tr></table>
    <!--[if lte IE 6]></a><![endif]-->
    </li>
    
    <li><a href="#">Consultants<!--[if IE 7]><!--></a><!--<![endif]-->
    
    <!--[if lte IE 6]></a><![endif]-->
    </li>
    
    <li><a  href="#">Contact Us<!--[if IE 7]><!--></a><!--<![endif]-->
    
    <!--[if lte IE 6]></a><![endif]-->
    </li>
    
    </ul>
    </div>
    
    <div id="crumbs">
    
       <p>
       <a href="index.html">Home</a> >> 
       <a href="#">Labs</a> >> 
       You are here   </p>
    
    </div>
    
    <div id="content">
    
      <img src="images/istock2160078.jpg" alt="key image" class="key" />
      <h1>Cyberspace and Society</h1>
      <h3>Spring 2007 </h3>
      <p>Welcome to the website for General Education 60: Cyberspace and Society. This course is part of the General Education Natural Sciences or Technology requirement and satisfies a &quot;Science B&quot; requirement.</p>
      <p>The navigation system above provides links to information and resources to help you throughout the semester. The site will be updated frequently during the semester with additional information. </p>
    
      <p>Best wishes for an interesting and productive semester.</p>
    </div>
    
    <div id="footer">
    
    <p>footer info goes here - and only here!</p>
    </div>
    
    </div> 
    
    
    
    </body>
    </html>
    Thanks for your time. If in addition to pointing out my mistake you can post a link to a site that really explains my problem that would be great. But I have been stuck on this one part for a few hours and I am going crazy

  2. #2
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok i found the answer in the forums - just had to refine my search.

    it seems for IE you need

    height:1%

    so i put in my div for content

    height:1%;


    not really sure why that fixed the problem but it did.

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's a layout bug. Make sure you put that in a conditional comment though.

  4. #4
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi dan

    is this what you mean?

    #content {
    background-color:#F2F2F2;
    overflow:auto;
    /* Hides from IE-mac \*/
    height:1%;
    /* End hide from IE-mac */
    }

    or is there something better/something more that i need?


Bookmarks

Posting Permissions

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