Nathan Smith let me know about this little gem. IE 8 (only) thinks that all table cells have a colspan attribute, whether they do or not. So if you are looking to style table cells uniquely that have that attribute, it’s a bit tough.
td[colspan],
th[colspan] {
/* WARNING: this will apply in IE 8 to table cells
even if they don't have a colspan */
background: red;
}
What we would expect to happen is something like this:
Instead in IE 8, every single table cell is matched:
This is totally unique to IE 8. Neither 7 or 9 does this, and 6 doesn’t support attribute selectors so that’s out anyway. It also thinks the value of the colspan is 1, so all of these are out:
th[colspan],
th[colspan="1"],
th[colspan*="1"],
th[colspan^="1"],
th[colspan$="1"],
td[colspan],
td[colspan="1"],
td[colspan*="1"],
td[colspan^="1"],
td[colspan$="1"] {
/* All problematic in IE 8 */
}
Solution
If you really need to make this selector work, you can instead select by colspan values that are anything except for the value of 1. A little verbose, but it works.
th[colspan*="0"],
th[colspan*="2"],
th[colspan*="3"],
th[colspan*="4"],
th[colspan*="5"],
th[colspan*="6"],
th[colspan*="7"],
th[colspan*="8"],
th[colspan*="9"],
th[colspan*="11"] {
/* Styles */
}
td[colspan*="0"],
td[colspan*="2"],
td[colspan*="3"],
td[colspan*="4"],
td[colspan*="5"],
td[colspan*="6"],
td[colspan*="7"],
td[colspan*="8"],
td[colspan*="9"],
td[colspan*="11"] {
/* Styles */
}
Charming. I actually wrote some code at work for an internal tool which used
[colspan]
a couple of weeks ago. I would have spotted this myself if I’d ever viewed the output in IE (and IE8 is what I have on that machine). But I get to use Firefox, and fortunately the HTML files I produce don’t need to target IE (yay!).Could you not apply the style to all td/th elements and then reverse it for the single colspan items?
E.g.
td, th { background-color: red; }
td[colspan=1], th[colspan=1] { background-color: white; }
Chris
That’s exactly what my first thought was. And it works.
Actually, I was thinking something slightly different. That example would produce unpleasant results for other browsers.
You would want to define the “default” rule to include just the td/th selectors as well (for non-IE8 browsers where you haven’t specified colspan).
E.g.
td[colspan],
th[colspan] {
background: red;
}
td,
td[colspan=”1″],
th,
th[colspan=”1″] {
background: #fff;
}
Also, you might serve the latter rules via conditional comment to IE8 only.
No should be using IE no matter the version.
Yawn. That’s such an old argument. People used that argument about other browsers when IE6 first came out.
Use any browser – but use the latest version.
Well, even when I am a beginner, the most difficult thing I’ve felt during writing down the CSS is making it work in IE and all others. IE just won’t cooperate. IE’s saying like “I am totally different from others. I do it my way…” .
keep in mind, if it wasn’t for IE and all it’s headaches, CEO’s and housewives would be littering the web with Front Page WYSIWYG crap (much like 15 years ago). I’m good with IE bugs and that’s part of the reason I have my job. THANK YOU MS!
What are they smoking over at MS?
Smoking AND Drinking, I might add.
Looks a good place to put modernizr to use, no?
You’d still have to write all that extra IE8 targeted nonsens but at least you could keep it separate from the nice, normal stuff.
Though I suppose it would add a bit of extra markup adding .ie8 before all of those selectors….
I just learn something new :)
Thank you so much!
IE7 have the same bug
In my testing it does not.
Right! I have tested it on Windows 7 IE9 by switching modes :)
maybe you should try testing it in an actual copy of IE7.
IE7 (standards mode): works (only colspan th’s, td’s are red)
IE7 (quirks mode): doesn’t work (_NO_ th’s, td’s are red)
Interesting! The IE is working hard to live up to his reputation :)
yes, that’s totally because
IE IS SHITT AND SHOULD BE DESTROYED!!!!
why, I mean, WHY does ANYONE use that obsolete-upon-delivery browser??? WTF people WAKE UP!
Because there are a whole bunch of advantages for sysadmins. The main reason for them is to make sure they don’t break any of their companies internal web applications. They don’t care about the newest HTML5 features, but they do care about headaches when destroying millions worth applications when a browser like Firefox automatically updates and breaks their application.
The IE is working hard to live up his reputation..
Want a good EQ test? Administer IE.
Great exploit. However, I like to just skip IE8 altogether. <meta http-equiv=”X-UA-Compatible” content=”IE=7, IE=edge” /> I know I’ll lose my gold star for validation, but IE6 & IE7 can be addressed with one legacy stylesheet ( typically). Moving on to modern browsers…
colspan=”0″ ? What would you do with a colspan value of zilch?
IE (7, not tested on others yet) shows the cell anyway, and does _not_ apply the background.
Fx and Chrome show the cell also, and _does_ apply the background.
Well, yes, but are there any actual reasons a developer would use colspan=”0″?
other than as a workaround for this specific bug?
I can’t think of one. : )
IE or another word for it is internet exploder. Mark this as another IE fail
if IE8 would support :not it would be easy to go around this
td[colspan]:not([colspan=”1″])
but well, just another IE bug, like maaaany others…
Geez will them guys at MS ever bring out a “modern” browser that works. Sigh …
They did. Haven’t you seen IE 9?
IE9 is quite lovely as modern browser, when compared to lte IE 8.
As much as IE browser compatibility gives me headaches, their is a simple solution to this post… Stop using tables!!
Interesting post.Nice tutorial one and works properly with all browsers.
Thanks a lot.