Skip navigation
Currently Being Moderated

Div background color not showing in Internet Explorer 8 and before

Apr 3, 2012 5:05 AM

Tags: #div #background_color

My Footer div is not showing the background color (supposed to be black...)  in Internet Explorer 8 and earlier.  It's assuming the body color instead.  Also the border color on top of the 'bubbles' that run across the page is wrong (supposed to be blue)    Is this just because Internet Explorer 8 and earlier did not support div background and border colors yet, or is there a work-around??  Or maybe I did something wrong?

 

The site is:    www.meridianwaterfiltration.com

 
Replies
  • Jim Carpenter
    509 posts
    Apr 6, 2006
    Currently Being Moderated
    Apr 3, 2012 5:40 AM   in reply to fourwhitesocks

    I don't have IE 8 or earlier, but you might want to try to do this in your css (remove the rgb)

     

    .footer {

    position: relative;

    width: 100%;

    padding: 0;

    margin-top: 0;

    clear: both;

    height: 350px;

    background-color:#000000;

    }

     

    It works in compatablity view in IE9.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 3, 2012 5:43 AM   in reply to Jim Carpenter

    I don't think that IE8 does rgba.

     

    It should be OK with rgb but not rgba.

     

    Martin

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 3, 2012 5:54 AM   in reply to martcol

    martcol wrote:

     

    I don't think that IE8 does rgba.

     

    It should be OK with rgb but not rgba.

     

    Martin

     

    No its doesnt

     

    I'd just use a hexidecimal color - black #000 and blue: #03f (see below)

     

    .footer {

    position: relative;

        width: 100%;

        padding-top: 0px;

        padding-right: 0;

        padding-bottom: 0px;

        padding-left: 0;

        background-image: none;

        background-repeat: repeat-x;

        margin-top: 0px;

        clear: both;

        height: 350px;

        background-color: #000;

     

    }

    #bubble {

        background-image: url(Images/water drop 0banner.jpg);

        background-repeat: repeat-x;

        width: 100%;

        height: 43px;

        border-top-width: 3px;

        border-top-style: solid;

        border-top-color: #03F;

        margin: 0px;

        padding: 0px;

        background-color: #3FF;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 18, 2013 2:45 PM   in reply to osgood_

    What about if you use transparent color? Is any fall back solution (for IE 8 or less it would should rgb color, for all others rgba)?

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points