Span Background Colour IE7 Problem

[roberturidge]

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:

Code:

Our Shop

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

[leonzinger]

Heya Robert,

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

Works like a charm

[roberturidge]

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?

[leonzinger]

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

[roberturidge]

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.

[Author]

Posts