CODEWITHSUNDEEP
css
benstpierre
benstpierre

Reputation: 33581

declaring background property in css twice

I am reverse engineering a previous employee's work and noticed a number of css classes look like this...

.img-shadow {
  float:left;
  background: url(../images/shadowAlpha.png) no-repeat bottom right !important;
  background: url(../images/shadow.gif) no-repeat bottom right;
}

Can anybody think of a reason for a css class to declare background twice like this (specifically with the !important)?

Upvotes: 0

Views: 355

Answers (4)

mVChr
mVChr

Reputation: 50185

It's a cheap PNG fix for IE6. Since IE6 won't recognize the !important tag, it will use the GIF background, while all other browsers will use the PNG.

Upvotes: 1

Piotr Findeisen
Piotr Findeisen

Reputation: 20730

According to wikipedia, the second background rule is for IE6.

Internet Explorer 6 and below also have a problem with !important declarations when the same property of the same element has another value specified within the same code block, without another !important declaration. This should result in the second value being overridden by the first, but IE6 and lower do not honor this.

Upvotes: 3

MikeM
MikeM

Reputation: 27405

looks like he's attempting to support browsers that don't handle alpha .png's properly (cough IE6 cough)

Upvotes: 0

Knu
Knu

Reputation: 15134

Older versions of IE will use the last one.
These versions had problems with png transparency.

Upvotes: 0

Related Questions