944,111 Members | Top Members by Rank

Web Development > Web Design > HTML and CSS > background-color wraps in IE
Ad:
You are currently viewing page 1 of this multi-page discussion thread
Permalink
Oct 10th, 2009
0

background-color wraps in IE

Expand Post »
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.

css Syntax (Toggle Plain Text)
  1. body
  2. {
  3.     background-color: #363636;
  4.     color: #FFFFFF;
  5.     font-family: tahoma,sans-serif;
  6.     font-size: 70%;
  7.     height: 100%;
  8.     line-height: 1.2em;
  9.     margin: 0;
  10.     padding: 0;
  11.     text-align: left;
  12.     width: 100%;
  13. }


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

css Syntax (Toggle Plain Text)
  1. html
  2. {
  3.     /* Fix for background issue in IE */
  4.     background-color: #363636;
  5.     height: 100%;
  6.     width: 100%;
  7. }
  8.  
  9. body
  10. {
  11.     background-color: #363636;
  12.     color: #FFFFFF;
  13.     font-family: tahoma,sans-serif;
  14.     font-size: 70%;
  15.     height: 100%;
  16.     line-height: 1.2em;
  17.     margin: 0;
  18.     padding: 0;
  19.     text-align: left;
  20.     width: 100%;
  21. }

anyone knows why it is happening ?
Attached Files
File Type: zip test.zip (546 Bytes, 28 views)
Similar Threads
Reputation Points: 6
Solved Threads: 19
Posting Whiz in Training
fatihpiristine is offline Offline
283 posts
since Sep 2007
Permalink
Oct 11th, 2009
0
Re: background-color wraps in IE
Check your url. You import core.css from where. Are the HTML and css same root?
Reputation Points: 120
Solved Threads: 134
Practically a Master Poster
Zero13 is offline Offline
620 posts
since Jan 2009
Permalink
Oct 11th, 2009
0
Re: background-color wraps in IE
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.
Reputation Points: 6
Solved Threads: 19
Posting Whiz in Training
fatihpiristine is offline Offline
283 posts
since Sep 2007
Permalink
Oct 11th, 2009
0
Re: background-color wraps in IE
-what doctype are you using?
Reputation Points: 120
Solved Threads: 61
Posting Pro
Troy III is offline Offline
511 posts
since Jun 2008
Permalink
Oct 11th, 2009
0
Re: background-color wraps in IE
XHTML 1.0 strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" dir="ltr">

html is valid. tried with transnational as well
Reputation Points: 6
Solved Threads: 19
Posting Whiz in Training
fatihpiristine is offline Offline
283 posts
since Sep 2007
Permalink
Oct 11th, 2009
0
Re: background-color wraps in IE
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!]
Reputation Points: 120
Solved Threads: 61
Posting Pro
Troy III is offline Offline
511 posts
since Jun 2008
Permalink
Oct 12th, 2009
0
Re: background-color wraps in IE
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.
Reputation Points: 10
Solved Threads: 7
Junior Poster in Training
leahmarie is offline Offline
94 posts
since May 2009
Permalink
Oct 12th, 2009
0
Re: background-color wraps in IE
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.
Reputation Points: 6
Solved Threads: 19
Posting Whiz in Training
fatihpiristine is offline Offline
283 posts
since Sep 2007
Permalink
Oct 12th, 2009
0
Re: background-color wraps in IE
Click to Expand / Collapse  Quote originally posted by Troy III ...
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
Reputation Points: 6
Solved Threads: 19
Posting Whiz in Training
fatihpiristine is offline Offline
283 posts
since Sep 2007
Permalink
Oct 12th, 2009
0
Re: background-color wraps in IE
Click to Expand / Collapse  Quote originally posted by fatihpiristine ...
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 and CSS Syntax (Toggle Plain Text)
  1. html, body
  2. {
  3.     background-color: #363636;
  4.     color: #FFFFFF;
  5.     margin: 0;
  6.     padding: 0;
  7.     width: 100%;
  8.     height: 100%;
  9. }
  10. body
  11. {
  12.     font-size: 70%;
  13.     font-family: tahoma,sans-serif;
  14.     line-height: 1.2em;
  15.     text-align: left;
  16. }
Last edited by Troy III; Oct 12th, 2009 at 3:15 pm.
Reputation Points: 120
Solved Threads: 61
Posting Pro
Troy III is offline Offline
511 posts
since Jun 2008

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: Table border
Next Thread in HTML and CSS Forum Timeline: z-index with images


Tags
css



About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC