come on my selector pt3/bug me not

published on:
February 08, 2008 / 12:53
comments
8 comments

With the present and future of css selectors explained, there is only one area untouched. The land of buggy implementations. While all browsers have problems handling certain css selectors (especially some borderline cases), there is only one king in the land of css selector bugs. And he makes the lives of us everyday css implementors a lot harder than it's supposed to be. Guess which browser we're talking about.

nasty IE6 bug

multiple selectors on one html element

1/ a.action.print { *properties* } 2/ body#blog.article { *properties* }

If you've read through both articles you might have wondered why I haven't mentioned the fact that a combination of classes and ids can be used on one single html element.

Well, you can do it, sort of, if you're careful enough. In the example above, all links that have both the action and print class assigned to it will be targeted. The order of the classes stated in html or css don't have an influence on the selection of the element. Similarly, you can string together ids and classes on the same html element, as illustrated in the second example.

This will work in all browsers, except for IE6 (and below, I assume).

the ignorant beast

1/ .action.print { *properties* } 2/ .page.print { *properties* } 3/ .print { *properties* }

When stringing together multiple classes on a single html element, IE6 will ignore whatever comes between the html element and the last class. If you look at the example above, all three selectors will match html elements with the class "print" defined on them. Furthermore, the specificity of all three rules will be the same for IE6.

This means that the singular .print selector will override all properties in the previously matched selectors.

bug prevention

There are a couple of things you can do to counter this bug.

1. The safest solution is to have classes that are all unique in name. Sadly, this is not the cleanest method and goes in against the logic of stringing classes together. Especially with class names like "last" or "first" this can become quite a drag.

2. Another solution is to actually flip the order of the classes around, where the most important class for the selection will come in last. This method will only work in very specific cases and can backfire pretty quickly if you're not paying close attention.

3. Not always possible, but sometimes it can be enough to simply expand the context of the selector to fix the problem. If you can differentiate both selectors by further defining their contexts, there's no problem at all.

4. If you have access to the html, there's another dubious fix for this issue. If you're really in a deadlock situation, you could add an extra html element to the source code and splice the selector string into descendant selectors. This solves your problem but adding extra mark-up might be overkill.

5. One final thing that can protect you against this bug is to make sure the longer strings always precede the shorter strings. The specificity of both selectors will remain the same for IE6 but the longer one will win the battle due to it appearing last in the css source.

mixing ids and classes

1/ #header.twoCol { *properties* } 2/ #header.threeCol { *properties* }

While the problem above cannot occur on a single page, this could mess up your layout if you're working on a multi-page site. I have done some testings but can't find any logic in the buggy behavior of IE6. It will apply some of the selectors but the problem seems more complicated than the multiple classes issue.

If you have any articles or leads on this, please share!

scared yet?

While it is an annoying bug that has no neat, all-purpose solution there's no real need to stop stringing together classes. As long as you can recognize the issue when you encounter it in IE, there's always one way to counter it. In most projects I've done, there have always been issues in IE6 related to this bug, but never many, and never any that couldn't be fixed.

Still, another reason for IE6 to disappear as quickly as possible. And with this, my mini-series on css selectors is completed. I hope you found it useful somehow.

Comments

dave

comment number
#1
date
April 30, 2008 02:48

I'm getting severely bitten by the "mixing ids and classes" bug. Been trying different combinations, changing specificity, names etc for hours. Here's what's happening in my case:

I have an element with an id of sidebar and, depending on context, am also applying a class to it eg:
<div id="sidebar" class="home"> ... </div>

The css for this would be (sorry, can't seem to get 'hash' character to render, so am using $): $sidebar { ... } $sidebar.home { ... } $sidebar.about-us { ... } etc

This works fine on standard browsers, but IE (curse it's black heart) seems to only acknowledge the first defined class - so in the example above, it'll render the css on a div with id="sidebar" class="home", but ignore the class-styling of a div with id="sidebar" class="about-us".

dave

comment number
#2
date
April 30, 2008 03:02

Addendum: removing specificity - $sidebar { ...} .home { ... } .about-us { ... } etc simply means that where a specific attribute is set in $sidebar to act as a default value (with the intention of overriding it when/if a class is applied) the id takes precedence, and the value defined in the class is ignored.. whatever the workaround, the css is gonna get ugly.

Niels Matthijs

comment number
#3
date
April 30, 2008 09:18

Hey dave,

it's a pretty messy situation alright. Sadly, the whole id/class bug thing in IE6 is more complex than the double class bug. Haven't really figured it all out myself, but maybe this article will be of help to you. Haven't fully read it myself, but it's still marked in my bookmark list as "high priority".

dave

comment number
#4
date
April 30, 2008 10:17

Hey Niels

The article you mentioned seems to have a workaround! Yay! And thanks.

In my case, I ended up recoding so I didn't have to rely on a class applied to an id - basically modified an id on a container <body id='section-home'><div id='sidebar'>... - the container can then be used to specifically target the sidebar. The only reason I didn't do this to start with is it's a php (wordpress) site and dynamically applying an id based on a site section rather than just the current page was a bit convoluted.

But definitely filed for future reference.

ignacio

comment number
#5
date
July 18, 2008 07:02

I found a solution for the "mixing ids and classes" bug, you have to place the declarations in different style sheets... Worked in IE... not roughly tested... Incredible.

http://www.ultrashock.com/forums/client-side/css-pulling-hair-out-90467.html

Had to read like 20 pages about the same issue to find this.

oddbill

comment number
#6
date
January 22, 2009 08:59

I figured out a much simpler solution to the problem Dave described - I just had the exact same issue (again, I'm using Dave's substitution of $ for the hash in the CSS below).

For IE6, when you are trying to do this:

$sidebar (...)
$sidebar.home (...)
$sidebar.about-us (...)

Instead of having the class modify the id, make completely separate ids:

$sidebar (...)
$sidebar_home (...)
$sidebar_about-us (...)

Then, in the php when you are writing the sidebar element into the page, do something like this:

<?php   
if (is_page('home')) 
    echo "<div id='sidebar_home'>";
elseif (is_page('about-us')) 
    echo "<div id='sidebar_about-us'>";
else
    echo "<div id='sidebar'>";
?>

You'll have to put the full specifications content in each separate id in the css, so you get a little repetition, but at least it spares you monkeying with the page layout too much, and you don't have to mess around with separate style sheets, and it works fine in at least firefox & chrome as well.

This is truly one boneheaded bug - I've been going crazy for 2 days trying to come up with a workaround. I thought I was making some sort of mistake until I found you guys here discussing it.

Of course the discussion is months old now, but hopefully future googlers will find this addition helpful.

oddbill

comment number
#7
date
January 22, 2009 09:03

Arrg - some of php block I put in that reply is messing up your page here now! Sorry!

horoszkóp

comment number
#8
date
September 04, 2010 09:35

Good all round article, Ive just finished my CIW course work and am awaiting my exam dates. 4 years of work over and I was never formally introduced to the difference between ID and Class -

"Im going with ID's for layout and classes for content..."

doesnt realy work in a 'standards' sense, since you may for example, have a relatively placed div element which will be replicated down the page, ie: have the same style applied, this is a "layout" element and therefore ( by the above statement ) should be id, not class... this would cause a parser error ( and the browser probably ignore the error, render perfectly well. or ignore the id altogether, depending on the browser ).

* required fields

Leave your data
Leave a comment