Member Avatar

hey guys..

i have a problem on IE7. following css causing this. the problem is that wrapper div when its height is less than viewable area of the browser, browser doesn't apply background color. only applied to main div.

body
{
    background-color: #363636;
    color: #FFFFFF;
    font-family: tahoma,sans-serif;
    font-size: 70%;
    height: 100%;
    line-height: 1.2em;
    margin: 0;
    padding: 0;
    text-align: left;
    width: 100%;
}

i fixed this giving same background color html but same code is working on another website www.biranket.com

html
{
    /* Fix for background issue in IE */
    background-color: #363636;
    height: 100%;
    width: 100%;
}

body
{
    background-color: #363636;
    color: #FFFFFF;
    font-family: tahoma,sans-serif;
    font-size: 70%;
    height: 100%;
    line-height: 1.2em;
    margin: 0;
    padding: 0;
    text-align: left;
    width: 100%;
}

anyone knows why it is happening ?

Check your url. You import core.css from where. Are the HTML and css same root?

Member Avatar

yes they are there.. if you realized the html has no white space at all which is generated by c# code. same code used on www.biranket.com but i don't have this problem there.

-what doctype are you using?

Try this:

html, body
{
    background-color: #363636;
    color: #FFFFFF;
    font-family: tahoma,sans-serif;
    font-size: 70%;
    height: 100%;
    line-height: 1.2em;
    margin: 0;
    padding: 0;
    text-align: left;
    width: 100%;
}

[for strict mode!]

In my opinion you could use a separate file of css dedicated to IE, Most designers do this things because of IE's bringing the problem all the time when it comes to appearance.

Member Avatar

it is not need to be something specific to IE coz i don't see any reason to do that. It is kind of rendering issue no ? coz it doesn't happen in IE6. only IE7. haven't tried with IE8.

Member Avatar

Try this:

html, body
{
    background-color: #363636;
    color: #FFFFFF;
    font-family: tahoma,sans-serif;
    font-size: 70%;
    height: 100%;
    line-height: 1.2em;
    margin: 0;
    padding: 0;
    text-align: left;
    width: 100%;
}

[for strict mode!]

that works if you see my first post above. i have did the same.

but there you will get issue with font-size which will 70% for body from 70% given to HTML

that works if you see my first post above. i have did the same.

but there you will get issue with font-size which will 70% for body from 70% given to HTML

That's why CSS is invented for.
You group select and you divide particulars when needed.
So we will split that body of statements in two groups so we drop properties not needed for html to assign only to element that will need them.

html, body
{
    background-color: #363636;
    color: #FFFFFF;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
body
{
    font-size: 70%;
    font-family: tahoma,sans-serif;
    line-height: 1.2em;
    text-align: left;
}
Member Avatar

yea right... anyways thanks for the suggestions.

another tricky solution i found: setting the overflow to visible for wrapper div. now it is working fine.