Grow your CSS skills. Land your dream job.

Span Background Colour IE7 Problem

  • # April 28, 2010 at 7:29 am

    Hey Guys,
    This is my first post here so please be gentle.

    I’m having an issue with IE7. The code works fine in IE8, Firefox, Chrome etc… but IE7 won’t display the background colour on my span element.

    Here’s the XHTML:

    And the CSS:

    Code:
    #page-body div#picture-links span {
    position: relative;
    top: 118px;
    display: block;
    margin: -27px 2px 0;
    background-color: #444;
    background-color: rgba(68, 68, 68, 0.8);
    }

    And here is a link to the site this code is on: http://towningsfarm.uridge.com/shop.html

    Any help would be much appreciated, this is really bugging me.
    Thanks

    # April 28, 2010 at 8:46 am

    Heya Robert,

    just add width:296px; to the #page-body DIV#picture-links A SPAN

    Works like a charm

    # April 28, 2010 at 3:40 pm

    Hi Leon thanks for having a look at this for me.
    I don’t know if I’ve done something wrong somewhere else but I still seem to be having the same problems as you can see here: http://towningsfarm.uridge.com/index.html

    Amended CSS:

    Code:
    #page-body div#picture-links a span {
    width: 296px;
    height: 27px;
    position: relative;
    top: 118px;
    display: block;
    margin: -27px 2px 0;
    background-color: #444;
    background-color: rgba(68, 68, 68, 0.8);
    }

    Any ideas?

    # April 29, 2010 at 3:46 am

    it seems that ie7 does not recognize background-color, try adding just "bacground:#444;" attribute

    # April 30, 2010 at 6:50 am

    I’ve fixed it!
    @leonzinger Thank’s for the help but IE7 does support "background-color"

    The problem was IE7 doesn’t seem to like having two of the same declarations in one selector. Instead you need to add a second selector.

    This won’t work in IE7:

    Code:
    #page-body div#picture-links a span {
    background-color: #444;
    background-color: rgba(68, 68, 68, 0.8);
    }

    This will:

    Code:
    #page-body div#picture-links a span {
    background-color: #444;
    }

    #page-body div#picture-links a span {
    background-color: rgba(68, 68, 68, 0.8);
    }

    This code allows browsers that support rgba to show the transparency but those that don’t will degrade gracefully using a solid colour.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".