Wierd behaviour - help required

Hello all i am developing a new site using ALA's Holy Grail as a starting point however i have come accross a very strange error that i cant for the life of me figure out.

The prtoblem exists only in IE (shock!) and it is occurring in the footer, well below it. what is happening is the bgcolour is not applied below the footer.

You can see what i mean by looking here www.organiclinker.com/design

any ideas?

I put this post here as i was un aware whether it was CSS or a HTML issue

Cheers
Mike

 

Did you try changing the colour of the background in the #footer-wrapper part of your CSS to the green instead of the white ?

 

Not tested.

Try adding these style rules;

html {
    height: 100%;
    }

body {
    min-height: 100%;
    _height: 100%;
    ...
    }

Code (markup):

cheers,

gary

 

ah dammit - always something so simple - that seems to have got it - i guess i was thrown by it working in FF!

bloody browsers need their heads knocking together lol

thanks for all the help everyone

 

You're welcome.
Glad I could help.

 

I don't want to rock your day, but I use the IE 7 beta and it looks terrible. It scrolls forever, yet looks good in firefox.

Might be an idea to take a look in IE7

 

What in the world is "_height"?

 

The underscore is a legal character to start a property name. Since there is no property named "_height", modern browsers ignore the rule. IE, otoh, simply ignores the "_" and reads it as height. It's just a simple way to feed a rule to IE while the good browsers ignore it.

In this case,

body {
    min-height: 100%;
    _height: 100%;
    ...
    }

Code (markup):

We're telling modern browsers we want body to be at least as high as html. IE doesn't support min-*, but treats height as min-height, so we tell it that height is 100%. The height must be hidden from modern browsers because they would honor the value. Backgrounds, borders, &c. would end at the viewport even if the content continued on. Thus, the underscore hack.

cheers,

gary

 

I'm very new to css. Still reading, trying to learn, experimenting and tearing my hair out. But, before I go completely mad, may I check out your view of another take on min-height?
Would you get the same effect without using a hack if the code was reversed? As in:

body {
height: 100%;    
min-height: 100%;
}

Code (markup):

IE and the compliant browsers pick up the height, then move on to the next line. IE ignores min-height, but the others pick it up and because it is the last height declaration that is the one they act on.

It seems to work for me, or have I been reading the wrong tutorials