Welcome to WebmasterWorld Guest from 54.147.199.169

Forum Moderators: not2easy

Message Too Old, No Replies

Footer not clearing content in IE7

     
11:27 pm on Mar 14, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Mar 13, 2006
posts:41
votes: 0


Hey all... i usually dont have any troubles with footers because well i have several working ones on the Internet atm.
Basically i don't want footers to sit at the bottom of the viewpoint... as long as they sit under the content im happy.
I have done this several times.
But i got this one website that is being a pain and it just doesnt want to clear the content.

Ive tried everything but the solution just wont reveal itself, can someone shed some light on this problem.

<html>
<head>
</head>
<body>
<!-- used to make shadowed edges /-->
<div id="outer">
<div id="inner">
<!-- end shadowed edges -->
<div id="header">
<h1>logo</h1>
</div>
<div id="content">
<div id="menu_container">
<ul>
<li>link</li>
</ul>
</div>
<div id="text">
<h1>Heading 1 </h1>
<p>Lorem ipsum est lorem fierent te, ea mei doming vituperata, an decore
commune est. Ad appetere lobortis disputando eam, his in illum nostro.
Ne legimus intellegebat mel, omnium omittantur ius no. Ne pri veri
probatus inciderint, porro euripidis pri ne. Dicant ubique at sed.</p>
</div>
</div>
</div>
</div>
<div id="footer">
<p>footer junk</p>
</div>
</body>
</html>

and now the css

* {padding: 0px; margin: 0px;}

html{
background-image: url(images/back.jpg);
background-repeat: repeat-x;
text-align: center;
height: 100%;
color: #000000;
}

body{
height: 98%;
font-size:62.5%;
font-family: Verdana, Arial, Helvetica, sans-serif;
position: relative;
text-align: center;
margin-right: auto;
margin-left: auto;
}

#footer {
height: 20px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCCCCC;
clear: both;
font-size: 0.9em;
position: relative;
width: 770px;
margin: 50px auto 0px;
float: none;
}

#outer {
width: 780px;
background: #FFF url(images/shadow_r1_c1.jpg) no-repeat left top;
text-align: left;
position: relative;
height: 600px;
margin: 8px auto 0px;
padding: 0px;
}

#inner {
padding-left: 5px;
padding-right: 6px;
background: url(images/shadow_r1_c5.jpg) no-repeat right top;
height: 574px;
}

#header {
height: 137px;
margin: 0px;
padding: 0px;
width: auto;
position: relative;}

#content {
margin: 0px 7px;
float: left;
width: 770px;
}

#text {
width: 590px;
margin: 0px 0px 23px 12px;
padding: 0px;
float: left;
}

#menu_container{
width: 150px;
background: url(images/menu_r3_c1.gif) repeat-y;
height: 550px;
float: left;
margin: 0px 0px 0px 7px;
padding: 0px;
}

12:23 am on Mar 15, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Aug 25, 2003
posts:175
votes: 0


Cant quite see what your looking for here ive slapped your code into a test document, the footer appears at the bottom inline with the left menu and main content area. Do you want it to be inline with the base of the browser window? or something else?

If your having issues with divs not clearing when you want them to try inserting another one below the block/s you need to clear and apply this style to is

height: 0px;
clear: both;

[edited by: PSWorx at 12:29 am (utc) on Mar. 15, 2007]

1:02 am on Mar 15, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Mar 13, 2006
posts: 41
votes: 0


Ok after i read ur post i went through everything very slowly... i figured it out and its the doctype im using strict... i dont get why this effects it all.

I dont understand what the doctype does

2:06 am on Mar 15, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Aug 25, 2003
posts:175
votes: 0


I couldnt offer you a decent explanation on this other than how the html/xhtml is processed by the browser, which if set (doctype) is governed by the doctype decleration, i always include it either xhtml 1.0 or 1.1 but always forget about it when offering help on css.

Perhaps one of the forum mods could help out here or further more take a look on w3c website for additional info related to the doctype and how it affects the rendering of html.

1 example i can offer is regarding the centering of content in divs, if no doctype is used then this is not possible as far as i am aware and the use of a containing div with text-align: center is required, but with the doctype (or the correct doctype) the use of margin-left/margin-right: auto and a preset width would have the same effct.

5:33 am on Mar 15, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Mar 13, 2006
posts: 41
votes: 0


Sorry let me just change that im not sure if it is completely the doctype... i changed it to transitional and it still is stuffed in IE7 but if i dont ad one its perfect... so im totally confused and in the dark about how to fix this
6:06 am on Mar 15, 2007 (gmt 0)

Preferred Member

10+ Year Member

joined:Feb 28, 2005
posts: 646
votes: 0


I tested this in Firefox 2 [Win & OS X], Opera 9.10 [Win & OS X], Safari, IE 6 and IE 7, with all the same results, using the following doctypes:

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">

  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

All tested browsers showed the footer below both "link" and "Heading 1 [...] ubique at sed."

Most notable effects of correct doctypes in the correct location are:

  • Box model fixed
  • auto margins available
  • tables inherit font size correctly
  • that's all I can remember

... but this is not the only problem.

The other problem is that your footer is outside of both

#outer
and
#inner
(where
#inner
is inside
#outer
.) From there, both
#outer
and
#inner
have defined height values.

Height is calculated irrespective of content - basically, it will go "I am this height. What's inside me? Taller than my height? Oh well, too bad."

So, I suggest:

  • Make sure your doctype is correct, and in the correct spot - a doctype with an xml declaration preceding it will throw IE into quirks mode;
  • Remove the height values - if you want what's called
    min-height
    , you can set
    min-height
    for browsers-other-than-IE-6, and in a spot just for IE 6 to render, set height to the same value. IE 6 interprets height as
    min-height
    .

And that's it :)

7:52 am on Mar 15, 2007 (gmt 0)

Preferred Member

10+ Year Member

joined:Nov 29, 2003
posts:351
votes: 0


Also have a look there :
[webmasterworld.com...]