0

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 ?

4
Contributors
10
Replies
11
Views
7 Years
Discussion Span
Last Post by fatihpiristine
0

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.

0

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!]

0

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.

0

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.

0

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

0

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;
}

Edited by Troy III: n/a

0

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.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.