/    Sign up×
Community /Pin to ProfileBookmark

100% Height Layout in CSS — Problems with IE.

Copy linkTweet thisAlerts:
Sep 28.2008

I am working on adjusting my site to a 100% Height CSS Layout. However, the Footer div is not viewing properly in IE6 — it shifts to the right. The problem seems to occur when I set the footer position to Absolute. The html consists of mainly the container, header, content, main-content, and footer — as follows:

The html:

[CODE]
<head></head>
<body onLoad=””>

<div class=”bodyBG_left”></div>
<div class=”bodyBG_right”></div>

<div id=”container”>
<div id=”header”>

<h1 id=”display_homepage_title” class=”colors_homepage_title”></h1>

<div id=”header_nav”></div>

<div id=”shopping_cart_summary”></div>

<div id=”content” class=”clearfix”>
<table border=”0″ cellspacing=”0″ cellpadding=”0″ height=”100%”>
<tr>
<td id=”main_content” valign=”top”>

<script type=”text/javascript”>
document.getElementById(‘search_field’).value = QueryString(‘Search’);
</script>

<div id=”content_area”>
<div align=”center”><img src=”#” width=”760″ height=”63″ border=”0″ align=”middle” usemap=”#Map”></div>

<div align=”center”>
<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase=”http://active.macromedia.com/flash6/cabs/swflash.cab#version=6.0.0.0″ height=”400″ width=”760″>
<param name=”movie” value=”#”>
<param name=”play” value=”true”>
<param name=”loop” value=”true”>
<param name=”WMode” value=”Opaque”>
<param name=”quality” value=”high”>
<param name=”align” value=””>
<embed src=”#” play=”true” loop=”true” wmode=”Opaque” quality=”high” pluginspage “http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash” align=”” height=”400″ width=”760″>
</object>
</div>

<div style=”margin: 15px;” >
<div align=”justify”><span class=”style1″>Text Goes Here </span><a href=”#” target=”_self” class=”style1″>Read More &gt;&gt;</a> </div></div> </td>
</tr>
</table>
</div>

<div id=”footer”>
<div id=”footer_top”>
<ul>
<li><a href=”#>About</a></li>
<li><a href=”#”>Press</a></li>
<li><a href=”#”>Contact</a></li>
<li><a href=”#”>Feedback</a></li>
<li><a href=”#”>Blog</a></li>
<li class=”last”><a href=”javascript:addbookmark()”>Bookmark</a></li>
</ul>
</div>
<div id=”footer_bottom”>
<ul>
<li><a href=”#”>Terms</a></li>
<li><a href=”#”>Privacy</a> </li>
<li><a href=”#”>Index</a> </li>
<li class=”last”><a href=”#” class=”footer colors_background2_text”>Help</a></li>
</ul>
<p><a href=”/Terms.asp”>Copyright &copy; 2008 Company. All Rights Reserved.</a></p>
</div>
</div>

</div>
</body>
[/CODE]

And the CSS:

[CODE]
body, html{ height: 100%; }

body{
text-align:center;
margin:0;
padding:0;
height: 100%; /* needed for container min-height */
font-size:12px;
background-color:#2e3337;
background-image:url();
background-repeat:repeat-x;
background-position:top left;
font-family: Arial, Tahoma, helvetica, sans-serif;
}
.clearfix:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}/* Hides from IE-mac */
.clearfix {display: block;}
* html .clearfix {height: 1%;}/* End hide from IE-mac */

#body a{
text-decoration:none;
}
body #header ul li.last{
margin:0;
padding:0;
border:none;
}
#body a:hover{
text-decoration:underline;
}
#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:790px;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
background-color: #FFFFFF;
}
#header{
width:790px;
height:100px;
padding:0;
margin:0px auto;
position:;
border-bottom:0px solid #adadad;
}
#header h1{
width:491px;
height:67px;
position:absolute;
top:10px;
left:23px;
font-size:1.5em;
text-align:left;
}
.header_background{
background:url() no-repeat left top;
}
#top_nav{
padding:0px 0px 0px 0px;
margin:0px 15px 0px 0px;
width: 100%;
font-size:14px;
text-align:right;
padding-top:5px;
padding-bottom:5px;
border-bottom:0px solid #adadad;
background-color: #FFFFFF;
}
#top_nav ul{
list-style:none;
margin:0;
padding:0;
}
#top_nav ul li{
display:inline;
margin-right:1em;
padding-right:1em;
border-right:0px solid #adadad;
}
#top_nav ul li a{
color:gray;
font-weight:normal;
}
#top_nav h1 a:hover{
color:#666666;
}
#header_nav {
position:absolute;
top:0px;
right:0;
text-align:left;
font-family: Arial, Tahoma, helvetica, sans-serif;
font-size:11px;
padding:10px;
}
#header_nav ul{
list-style:none;
margin:0;
padding:0;
}
#header_nav ul li{
display:inline;
margin-right:1em;
padding-right:1em;
border-right:1px solid #adadad;
}
#header_nav ul li a{
color:gray;
font-weight:normal;
}
#content{
padding:0;
margin:0px auto;
text-align:left;
width:790px;
background-color: #FFFFFF;
padding:0em 0em 0em; /* bottom padding for footer */
padding-bottom: 120px; /* bottom padding for footer */
}
#content #main_content{
padding:0px;
margin:0px;
width:790px;
border-right:0px solid #ADADAD;
border-left:0px solid #ADADAD;
background-color: #FFFFFF;
}
#footer{
margin:0px auto;
padding:0px;
width: 790px;
height: 115px;
font-family: Arial, Tahoma, helvetica, sans-serif;
color:#adadad;
background-color: #FFFFFF;
padding-bottom:1em;
width:100%;
bottom:0; /* stick to bottom */
position:relative;
}
#footer > *{
margin:0;
padding:0;
}
#footer ul li.last{
border:none;
padding:0;
margin:0;
}
#footer a{
color:#666666;
font-family:Arial, Helvetica, sans-serif;
}
#footer ul{
list-style:none;
margin:0;
padding:0;
}
#footer ul li{
display:inline;
border-right:1px solid #adadad;
margin-right:1em;
padding-right:1em;
}
#footer_top{
margin-bottom:1.5em;
padding:10px;
border-top: 1px solid #adadad;
color:gray;
}
#footer_top a{
color:gray;
}
#footer_top ul li{
border-right:1px solid gray;
}
#footer_bottom{
margin:0;
padding:0;
font-size:11px;
color:#666666;
}
#footer_bottom a{
font-size:11px;
}
.bodyBG_left, .bodyBG_right {
position:absolute;
left:50%;
top:0px;
width:171px;
height:700px;
}
.bodyBG_left {
margin-left:-567px;
background: url() left top no-repeat;
}
.bodyBG_right {
margin-left:397px;
background: url() right top no-repeat;
}
#nav_menu div.nav_section{
margin:0;
padding:0;
width:160px;
margin-bottom:1em;
}
#shopping_cart_summary{
margin:0;
padding:0;
text-align:center;
color:#666;
font-weight:normal;
position:absolute;
top:60px;
right:20px;
font-size:12px;
padding:5px;
}
#nav_menu #shopping_cart_summary h3{
margin-bottom:.5em;
}
div.nav_section ul{
margin:0;
padding:0;
list-style:none;
text-align:left;
margin-top:4px;
margin-left:0px;
}
#nav_menu{
margin:0;
padding:0;
width:160px;
border:0px solid #adadad;
border-bottom:none;
border-top:none;
height:100%;
}
#nav_menu h3{
margin:0px 0px 0px 5px;
padding:0px;
font-size:1em;
border-top:0px solid #adadad;
border-bottom:1px solid #cccccc;
color:#666666;
padding:5px;
text-align:left;
}
div.nav_section ul li{
margin:0;
padding:0;
color:#606060;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
text-align:left;
margin-bottom:.5em;
padding-left:15px;
background:url() no-repeat 3px 3px;
}
div.nav_section ul li a{
color:#606060;
text-decoration:none;
list-style:none;
font-size:1.1em;
font-weight:normal;
}
div.nav_section ul li a:hover{
text-decoration:underline;
}
#navigation_menus{
padding:0px;
margin:0;
width:160px;
text-align:center;
}
#notext a {
display:block;
width:250px;
height:75px;
text-indent:-9999px;
}
#search_section{
padding:0;
margin:0;
text-align:left;
width:160px;
margin-bottom:10px;
}
#search_section form{
margin:10px 5px;
padding:0px;
margin-left:10px;
height:34px;
}
#search_section input{
margin:0px;
padding:0px;
vertical-align:middle;
}
*html #search_section form{
margin:10px 0px;
margin-left:5px;
height:24px;
}
#search_section input#search_field{
margin:0px;
border:1px solid #adadad;
width:115px;
height:20px;
vertical-align:middle;
font-size:10px;
padding:2px;
}
*html #search_section input#search_field{
height:20px;
width:110px;
}
#search_section input#search_button{
margin:0;
padding:0;
width:20px;
height:20px;
}
#search_section h3{
border-top:none;
}
span.ir{
display:none;
}
#display_cart_summary .cartsummary_empty {
display: none;
}
#display_cart_summary .cartsummary_full {
background-color: #CCCCCC;
border-bottom-width: 0px;
border-right-width: 0px;
border-top-width: 0px;
border-left-width: 0px;
border-style: solid;
border-color: #000000;
text-align: center;
}
#display_homepage_title a{
text-indent:-99999px;
display:block;
width:300px; height:40px;
text-align:left;
}
#display_homepage_title #homepage_title{
text-indent:0;
display:block;
width:573px;
height:40px;
font-size:30px;
background:transparent;
margin-top:10px;
margin-left:10px;
text-align:left;
}

[/CODE]

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@opifexSep 28.2008 — there are a couple of problems in the css, but i think it would be better to fix the html problems first.

  • 1. close the "container" div

  • 2. close the "header" div
    • Copy linkTweet thisAlerts:
    @ne_plus_ultraauthorSep 28.2008 — Yep -- the html is correct -- While attempting to clean up the copy/paste I must have accidentally deleted. Still not sure how to fix the absolute positioning problem with the footer in IE6?


    there are a couple of problems in the css, but i think it would be better to fix the html problems first.

  • 1. close the "container" div

  • 2. close the "header" div
    • [/QUOTE]
    Copy linkTweet thisAlerts:
    @opifexSep 28.2008 — take out the height: and define the horizontal position

    [CODE]#footer{
    margin:0px auto;
    padding:0px;
    width: 790px;
    font-family: Arial, Tahoma, helvetica, sans-serif;
    color:#adadad;
    background-color: #FFFFFF;
    padding-bottom:1em;
    width:100%;
    position:absolute;
    bottom:0; /* stick to bottom */
    left:0;
    }[/CODE]

    ie can't handle an absolute position without both coordinates!
    Copy linkTweet thisAlerts:
    @ne_plus_ultraauthorSep 28.2008 — Thank you - that seemed to do the trick! I wonder why it isn't addresed -- every tutorial I have found doesn't make this adjustment? Thanks again.
    Copy linkTweet thisAlerts:
    @opifexSep 28.2008 — the problem with the majority of the published tutorials is that they concentrate on "tricks" and whatnot. the core of css coding is the same for all browsers and the "rules" are available as W3C standards. while the majority of browsers available will default to the "defaults" recommended in the DTD's, all do not conform, so it's best to declare all of the css properties that apply to the element (inherited or not). IE has particular problems with many different properties.

    enjoy!
    Copy linkTweet thisAlerts:
    @ne_plus_ultraauthorSep 29.2008 — Thank you that is very helpful. One thing that I did notice is that once the footer was placed at an absolute position ... if the content exceeds the viewing area then the scrollable area doesn't show. I applied min-height to the container, content, and main#content -- but it still doesn't expand. Any suggestions?
    Copy linkTweet thisAlerts:
    @opifexSep 29.2008 — you are probably creating conflicts in the css. you'll need to link to the page so people can see where you're at.
    ×

    Success!

    Help @ne_plus_ultra spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.20,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...