Footer works in IE7 / FF, not IE6

Melagan · Jul 17, 2007

Greetings,

I've seen various threads on getting page footers to align horozontally at the bottom of a page (and/or browser window, depending on the length of content above it). I have a layout that renders perfectly in Firefox and IE 7, but doesn't work in IE6. I'm guessing it is because IE6 doesn't support the style min-height. Here is the applicable CSS - if someone could how me how to get this work across the major browsers, I'd greatly apprecaite it.

Code:

body {
    background-color: #FFFDE8;
    font-family: Arial;
    padding: 5px;
    margin: 0;
    min-width: 650px;
    min-height: 300px;
}

#header {
    width: 100%;
    min-height: 120px;
    margin-bottom: 35px;
}

#main {
    width: 100%;
    min-height: 375px;
}

#footer {
    width: 100%;
    clear: both;
}

Again, in 1024x768, this CSS renders the "footer" right at the bottom of the browser window in IE7/FF. In IE6, the footer renders as if I had no min-height set in my "main" div.

~Melagan
______
"It's never too late to become what you might have been.

BabyJeffy · Jul 17, 2007

Using conditional comments (bold below) you can create an "IE6 only" set of style rules...

Code:

[b]<!––[if IE 6>[/b]
<style type="text/css">
body {
    height: 300px;
}
#main {
    height: 375px;
}
</style>
[b]<![endif]––>[/b]

The conditional comments are required to prevent the code from being recognised by browsers other than IE6.

You can read all about this on an FAQ I put together:

faq215-6625

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

Melagan · Jul 17, 2007

Thanks Jeff, that seems to do the trick, but only if I put the style straight on the page. I looked at your FAQ and tried to implement this using a 'ie6.css' stylesheet, but when I link it on my pages using the conditional comments, it does not seem to work. I tried listing it in the <head> section both above and below my main CSS links.

To clarify:

Code:

<link rel="stylesheet" type="text/css"
   href="styles\mainstyle.css" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css"
   href="styles\ie6.css" />
<![end if]-->

...does not work, nor does this:

Code:

<!--[if IE 6]>
<link rel="stylesheet" type="text/css"
   href="styles\ie6.css" />
<![end if]-->
<link rel="stylesheet" type="text/css"
   href="styles\mainstyle.css" />

Cheers again,
-Melagan

~Melagan
______
"It's never too late to become what you might have been.

monksnake · Jul 17, 2007

Specify the media type and make sure your path is correct, because I have code written like your example that works fine. Also be aware that you aren't overwriting styles:

Here is the code I have:

Code:

<!--[if IE]>
   <link rel="stylesheet" type="text/css" href="./css/appIE.css" media="screen" />
   <link rel="stylesheet" type="text/css" href="./css/app2IE.css" media="screen" />
<![endif]-->

<.

BabyJeffy · Jul 17, 2007

Look at your backslashes - they ought to be forward-slashes...

Code:

<link rel="stylesheet" type="text/css" href="styles[!]/[/!]mainstyle.css" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="styles[!]/[/!]ie6.css" />
<![end if]-->

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Footer works in IE7 / FF, not IE6

Melagan

MIS

BabyJeffy

Programmer

Melagan

MIS

monksnake

Programmer

BabyJeffy

Programmer

Similar threads

Part and Inventory Search

Sponsor