IE6 and multiple background images

showing first one only

[smallcompany]

I have this in CSS:

#div100.pic1 {
background: url(../images/pic1.gif) no-repeat 20px 20px;
}
#div100.pic2 {
background: url(../images/pic2.gif) no-repeat 20px 20px;
}
#div100.pic3 {
background: url(../images/pic3.gif) no-repeat 20px 20px;
}

In HTML of three different pages I do this:

<div class="pic1" id="div100">

<div class="pic2" id="div100">

<div class="pic3" id="div100">

Only first one shows in IE6. If I change the order, IE6 will follow it and work properly only with the top one. IE7 or Firefox work fine.

Can this be fixed?

Thanks

[garann]

You want to reverse your classes and IDs - IDs should only be used once per page whereas classes can be reused. That may be your issue..

[4css]

Hi smallcompany

First, it appears that you have your divs named correctly. If I am reading it right you are saying that there is a class of pic1, pic2 and pic 3 in #div 100.

Now, maybe one thing you need to do is to place a space between your id and your class like this:
#div100 .pic2

Also, can you post a bit more code if you have it? Do you have widths, paddings etc.. on this div? Also, it might help to float your images so that they follow each other.

[4css]

Hi smallcompany,

As I was reviewing your post, I can see what garann meant by reversing your id's and classes:
this: <div class="pic1" id="div100">
should read: <div id="div100" class="pic1">

[smallcompany]

Thanks for replies.

Reversing class and div order did not have any effect.

Entering a space in CSS between div and class made it NOT to work in any of the browsers.

Setting a float (which helped in many other troubles) did not help.

So I changed my CSS settings so the class was not preceded by the div name, and it worked!

To give a bit of a background, why I did it in the div.class way at the first place:

In the past, in some cases, unless I set CSS as div.class, class settings would not affect the DIV.

Why?

[SuzyUK]

smallcompany, let me first say you're doing nothing wrong, but can I just ask if the reason for doing this so that different sections of the site can be identified, i.e. are these divs all on different pages?

There are two issues (IE of course) with this technique and the advice/answer I might give will be different depending ;)

Reversing class and div order did not have any effect.

It wouldn't, sorry garann and 4css, specificity doesn't really have a different bearing here, yes the

#id.class {}

selector itself will still count the same way as it would if it were

#id .class {}

but see more below

Entering a space in CSS between div and class made it NOT to work in any of the browsers.

it wouldn't, the space between the selectors denotes a parent/child relationship i.e. if the divs were nested

<div id="div100"><div class="pic001">...

which is not what you had in your HTML code above ;)

as per the OP it is possible to target an element which has an ID/Class or a class/class (or more) combination
see: 5.8.3 Class selectors [w3.org] (bottom)

there is no effect on specificity on the order of writing <div class="y" id="x"> because the ID has the higher specificity anyway no matter where it applied

so for example if you have:

<div class="class" id="id">

with

#id {color: yellow;}

then it will be yellow obviously

if you have it with

#id {color: yellow;}
.class{color: blue;}

it will still be yellow, not because the id is second in the HTML rule but simply because it's an ID, change the order of the HTML and it will still be yellow, the minute two rules apply to the same element, CSS specificity will take it

if you then apply

#id.class {color: green;}
#id {color: yellow;}
.class{color: blue;}

it will be green, because the two id selectors match in specificity, but the addition of the class in the first one adds 1 to it's weighting, again it will not matter in what order the rules are applied.

Sidenote:
remember in specificity weighting
0, 1, 1, 0

the first one is an ID the second 1 is a class the last 0 is the element name

the above is also true of

.class.class 

combinations but in that case you would have to watch because that all important extra point weighting just might then cause a clash if there is an ID involved anywhere, as in 1 x ID will overrule any amount of classes!

In the past, in some cases, unless I set CSS as div.class, class settings would not affect the DIV.

that I presume is a specificity issue, by adding the div before the .class you are adding 1 point to the last column (see specificity note above) and that selector then becomes more specific than a simple .class {} selector
i.e.

div.class {} <-- specificity = 0,0,1,1
.class {} <-- specificity = 0,0,1,0

I've got confused as to the point of the question now, but assuming you actually legitimately want to use the code ion the OP for section targetting, you can or should be able to

You can legitimately use both the

#id.class {}

and the

.class.class {}

combinations but both of the selectors have their separate problems in IE and I *think* the #id.class one still has problems in IE7 (but would need to check)

with the #id.class selector IE will only apply the first rule of that type in a sheet and the ignore all others, and even then I think it only actually applies the .class part of it, which is exactly what you described I think, smallcompany?
there would be a solution for this if the reason for using it is to differentiate between site sections

with the .class.class selector IE lte6 will only apply the last class in the combination, but this time it will at least try to apply all the rules of the type in a stylesheet

clear as mud heh! sorry if it's OT but as I said I'm not sure which bits were approriate to topic and which bits were misunderstandings so just ask..

[edited by: SuzyUK at 3:55 pm (utc) on July 8, 2008]

[garann]

Sorry for the lack of clarity.. This is all I meant by reversing classes and IDs:

<div id="pic1" class="div100">
<div id="pic2" class="div100">
<div id="pic3" class="div100">

That way your IDs are unique and you're reusing your class for common attributes, in theory.

[SuzyUK]

no need to apologise, I think my post is born out of my lack of clarity about the actual question too, I get what you're saying now, I was thinking you were on about swapping the order for specificity reasons as I had a query about that in stickymail, hence the muddle.. sorry.

..and your suggestion is actually one of the solutions. If the divs are all on the same page they shouldn't have the same ID anyway ;)

BUT if the div is actually unique say a header, that you simply want a differing background image on (devils advocate here) - then the ID should be the same an the class should be the differing one as it should "classify"

CSS provides us with a way to target that possibility, and all I was trying to put forward is that the notation used is right if that is the case, your way is also perfectly valid, depends on the case really.. but then perhaps we should shout for the body element "CSS Signature" instead ;)

I thought perhaps that there were some that don't know that the #id.class is actually right (you don't need the space as that targets something different) it's simply just another way to use a more specific selector

[smallcompany]

but can I just ask if the reason for doing this so that different sections of the site can be identified, i.e. are these divs all on different pages?

Yes, I am showing different images in the same section of the pages which are based on the same template. It can be a different discount or different language.

Thanks for clarifying that order thing in regards of IE.

In regards of unique div IDs, I don’t want that, but rather use class.

As already said above, #div.class is more specific and helps keep good track and CSS file organized. My question “why” was more toward situation where changes would not be applied by sole class, but only with #div.class type of settings, and I did not know the background of it, but learned it hard way.
SuzyUK’s examples put a lot of light onto it.

Thanks