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 5 of 5
  1. #1
    New Coder
    Join Date
    Apr 2008
    Posts
    95
    Thanks
    20
    Thanked 0 Times in 0 Posts

    Layout Problem with IE6

    I want my bottom div to show at the bottom of the page. Its working fine in FF and IE7, but IE6 places it right after the previous layer. I have placed it within a div which has a height 100% and then set the bottom:0; in the bottom layer with a height:140px; to place it right at the bottom of the page.

    Does IE6 not recognize the bottom property.



    Code:
    @charset "utf-8";
    #hdtv_background
    {
    	background-attachment: fixed;
    	background-image: url(images/background_oasis_may.jpg);
    	background-repeat: no-repeat;
    	background-position: top center;
    	background-color: #000000;
    }
    
    input[type=text], textarea { background-color: #ffffff; }
    
    
    html, body 
    {
    	margin:0;
    	padding:0;
    	height:100%;
    }
    
    html { overflow: -moz-scrollbars-vertical; }
    
    #layout 
    {
    	position:relative;
    	margin: 0 auto;
    	border:solid 0px #000000;
    	border-bottom:0;
    	border-top:0;
    	width:762px;
    	min-height:100%;
    	display:block;
    	position: relative;
    }
    
    
    #listing
    {
    	padding-left:30px;
    	float:left;
    	width:450px;
    	padding-bottom:200px;
    	padding-top:200px;
    }  
    
    * html #listing
    { 
    	display:inline-block;
    }
    
    #container
    {
    	padding-left:40px;
    	float:left;
    	width:682px;
    	padding-bottom:140px;
    	text-align:justify;
    	padding-top:200px;
    }  
    
    #small-container
    {
    	padding-left:40px;
    	float:left;
    	width:682px;
    	padding-bottom:160px;
    	text-align:justify;
    	padding-top:30px;
    } 
    
    #tv-container
    {
    	padding-left:40px;
    	float:left;
    	width:682px;
    	padding-bottom:140px;
    	text-align:justify;
    	padding-top:150px;
    } 
    
    #phpcalendar
    {
    	padding-left:5px;
    	padding-top:205px;
    	float:left;
    	width:250px;
    	padding-bottom:80px;
    }
    
    * html #phpcalendar
    {
    	display:inline;
    }
    
    #statictopbar
    {
    	font-family: Century Gothic;
    	font-size: 12px;
    	color: #999999;
    	height: 164px;
    	border:solid 0px #000000;
    	width:762px;
    	top:0;
    	left:50%;
    	margin-left:-380px;
    	display:block;
    	position: fixed;
    }
    
    * html #statictopbar
    {
    	position:absolute;
    }
    
    img { behavior: url(iepngfix.htc); }
    
    #bottom_box
    {
    	font-family: Century Gothic;
    	font-size: 12px;
    	color: #999999;
    	background-color: #000000;
    	height: 60px;
    	border:solid 2px #000000;
    	width:762px;
    	position: relative;
    	margin: 0 auto;
    	float:left;
    }
    
    #bottom
    {
    	font-family: Century Gothic;
    	font-size: 12px;
    	color: #999999;
    	height: 140px;
    	border:solid 0px #000000;
    	width:760px;
    	position:absolute;
    	bottom:0;
    	left:1px;
    }
    
    * html #bottom
    {
    	float:left;
    	display:inline;
    }
    
    .bottomlinks
    {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	color: #898989;
    	text-decoration:none;
    }
    
    .bottomlinks:hover
    {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	color: #d0f57d;
    }
    
    .bottomtext
    {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	color: #898989;
    }
    
    .links 
    {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #57bc8e;
    	text-decoration: none;
    }
    
    .links:hover
    {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #ffffff;
    	
    }
    
    .normaltext
    {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #CCCCCC;
    	text-decoration: none;
    	line-height: 16px;
    }
    
    h1
    {
    	font-family: Arial;
    	font-size: 24px;
    	text-decoration: none;
    	line-height: 24px;
    	color: #d0f57d;
    	font-weight:normal;
    }
    
    h2
    {
    	font-family: Arial;
    	font-size: 16px;
    	text-decoration: none;
    	line-height:normal;
    	color: #d0f57d;
    	font-weight:bold;
    }
    the HTML code

    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" >
    <head>
    
    <link href="hdtv_menu2.css" rel="stylesheet" title="hey there" type="text/css" />
        <title>Oasis HD - About Us</title>    
    	</head>
    
    <body id="hdtv_background">
    <div id="layout">
    <div id="statictopbar">
    <?php
    include 'statictopbar.php';
    ?></div>
    <div id="container" class="normaltext"><br /><br />
      <h1>About Us</h1>
      <br />
      <p>Who we are</p>
    </div>
    
    <div style="clear:both"></div>
    <div id="bottom">
    <?php
    include 'bottom.php';
    ?>
    </div></div>
    </body>
    </html>

  • #2
    Regular Coder
    Join Date
    Oct 2006
    Posts
    164
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Im not sure about this. You could try giving bottom a unit like px.

    But IE6 just sucks. I wouldnt worry about it.
    Not much, but its something.

  • #3
    Regular Coder Candygirl's Avatar
    Join Date
    Apr 2008
    Location
    Switzerland
    Posts
    184
    Thanks
    3
    Thanked 56 Times in 56 Posts
    Quote Originally Posted by ksduded View Post
    Does IE6 not recognize the bottom property.
    Code:
    #layout 
    {
    	position:relative;
    	margin: 0 auto;
    	border:solid 0px #000000;
    	border-bottom:0;
    	border-top:0;
    	width:762px;
    	min-height:100%;
    	display:block;
    	position: relative;
    }
    Yes it does but it doesn't recognize the min-height property. You have to give a height 100% for IE6 and under, for exemple:

    Code:
    * html #layout 
    {
      height:100%;
    }
    "Imagination was given to man to compensate for what he is not;
    a sense of humour to console him for what he is."
    -Francis Bacon

  • Users who have thanked Candygirl for this post:

    ksduded (05-12-2008)

  • #4
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    Quote Originally Posted by Sman5109 View Post
    But IE6 just sucks. I wouldnt worry about it.
    Given that it still makes up 30% of browser share, that wouldn't be good advice.

  • #5
    Regular Coder
    Join Date
    Oct 2006
    Posts
    164
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by tomws View Post
    Given that it still makes up 30&#37; of browser share, that wouldn't be good advice.
    lol, true. But you could always blame M$
    Not much, but its something.


  •  

    Posting Permissions

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