The #id.class selector in IE6 28.08.2008 @ 02:11pm 92 comments

The ability to style an element using it's #id and several associated classes is often something that people believe is not possible in IE6. In some ways, that is true but it is possible to get this working with XHTML and CSS alone.

An example of what I am talking about can be seen below:

#feedback {
    background-color: #DFDFFF;
    border: 1px solid #4947BF;
    padding: 10px;
    }
#feedback.error {
    background-color: #FFBFC8;
    border-color: #AF4C59;
    }
#feedback.success {
    background-color: #CEFFBF;
    border-color: #64AF4C;
    }

<div id="feedback" class="success">
    <p>This is a success message</p>
</div>

Using the above XHTML markup you will notice that IE6 applies the #feedback styling and completely ignores the #feedback.success CSS. It is really quite strange how IE6 decides which rule to apply. For example, if my feedback div had the 'error' class it would apply the #feedback.error styling. So, in simple terms IE6 basically says "Check to see if the first #id.class rule matches and if so, apply it. If not, ignore the other #id.class rules and just apply the #id rule".

In order to get IE6 to pay attention to the other #id.class rules, you have to add another element inside your #feedback element that wraps it's containing markup and then tweak the CSS slightly... it's a pain, but it works. For example:

<div id="feedback" class="success"><div>
    <p>This is a success message</p>
</div></div>

Then the CSS should be tweaked to read as follows:

#feedback div {
    background-color: #DFDFFF;
    border: 1px solid #4947BF;
    padding: 10px;
    }
#feedback.error div {
    background-color: #FFBFC8;
    border-color: #AF4C59;
    }
#feedback.success div {
    background-color: #CEFFBF;
    border-color: #64AF4C;
    }

And voila! IE6 gets it... finally!

What people think...

There have been 92 comment(s) on this entry so far. Have something you'd like to say? Feel free to comment below.

Tech Guy said...
02.03.2010 @ 10:08pm

I wish IE6 would just go away once and for good

Handbags said...
26.02.2010 @ 02:10pm

Some blog sites cannot be shown correctly with IE. Some times we see the side columns not shown.

Jim Jones said...
25.02.2010 @ 01:53pm

Wow - what a tip!

Andrew said...
23.02.2010 @ 05:10pm

Thnx,Information is very usefull , no to IE

white mini fridge said...
21.02.2010 @ 09:58pm

Damn IE6, I'm glad it'll be gone soon!

Shifting Calories said...
21.02.2010 @ 03:55pm

Yet another reason I refuse to use IE...but great tip!

Natural Body Detox said...
21.02.2010 @ 03:42pm

Better bookmark this, I'm sure it will come in handy down the road...Thanks!

Wedding Speech Jokes said...
21.02.2010 @ 03:31pm

Let's face it, IE6 is never going to die...keep hacking away!

CopyNProfit 3.0 Sneak Preview said...
21.02.2010 @ 03:25pm

Very helpful! You'd be surprised how many non-profits and universities are still using IE6, I spent hours upon hours reworking CSS to be compatible with IE6.

UK Boot Camp said...
21.02.2010 @ 07:17am

Nice hack for IE6 - Personally will be pleased to see the back of IE6 !!!

Germscheid said...
17.02.2010 @ 03:01pm

it's cool

Energy said...
16.02.2010 @ 06:00am

I'm trying to use a class to replace a background-image on a div. The method above doesn't seem to work on what I am trying to accomplish.

So it works to replace background-colors, but not background-images

Directv said...
15.02.2010 @ 01:12pm

IE has updated numerous times since this post.

ufo led said...
14.02.2010 @ 10:39am

Great article on IE6 compatibility. This works.

jobs for 16 year olds said...
10.02.2010 @ 08:18pm


it does validate except for the server elements, css is fine.

my doc type is



=/ even the simple example i created won't work properly.. im looking for a fix; i know its a bug with IE.

Ash said...
09.02.2010 @ 09:37pm

Works ! Thanks a million !!

Tjene penger said...
08.02.2010 @ 05:12am

Just love the CSS stylesheets :) Thinking back to the days when Frames where the way to go... lol

vet said...
05.02.2010 @ 04:05am

It's really appreciable that you have written very good article for us.

peninggi badan said...
04.02.2010 @ 08:54am

looks easy when I read your post first ....
trick that is very helpful ....
thanks .....

TagByTag Web Design Tutorials said...
02.02.2010 @ 04:16am

Thanks a lot for explaining this, I was pulling my hear when trying to implement a flexible 1-3 column holy grail layout!

IE6 would just ignore certain rules for the container padding. I've solved it now by just using separate classes instead of #id.class

Ca Foreclosures said...
01.02.2010 @ 10:39pm

great blog, good article, fine writing, thanks for sahring this.

d7aym said...
31.01.2010 @ 09:41am

thanks gooood

http://www.c8o8.com/vb

Andrew Keir said...
31.01.2010 @ 03:44am

We need less support for IE6 so people upgrade and we can forget the blasted thing.

يوتيوب said...
27.01.2010 @ 06:17pm

i love this great blog

Car said...
26.01.2010 @ 08:32am

thanks for this, could you point me in the right direction to sort my

    out in IE6? i get gaps between the
  • elements on one of my sites?

midoelgamed said...
24.01.2010 @ 05:52pm

Sorry but adding extra mark-up is just plain wrong.
People should stop looking for hacks and tricks and learn to write IE6 compatible code from the start. This should only help if you are editing someone else's code and cant change the css!

Gordon Wandtattoo said...
22.01.2010 @ 05:49pm

Nice Informations, thanks. I will see how usefull they can be for me and test it on one of my websites. Best regards Gorden Wandtattoo

Web templates said...
22.01.2010 @ 02:53pm

Thank you for your post! Even though IE6 will not exist anymore but I think it will be useful for us. THanks

wedding vendor quotes said...
16.01.2010 @ 07:30am

I find this awesome. Thanks,cheers.

sudoku tips and tricks said...
15.01.2010 @ 03:59am

well its not sudoku tips and tricks but I appreciate the work as well.

Pink Office Chair said...
11.01.2010 @ 11:39pm

Great trick....I'm always interested in seeing what's new on you site.

iphone fix said...
04.01.2010 @ 11:11pm


However, the additional markup to the page ... Sometimes people have child elements for semantics but do not know they can target those children style in IE6.

For example, the markup in the past, I used a similar style to the next for the anchors as buttons:

Button

... This is entirely semantic, and if someone wants to be neutral, positive and negative buttons, they would probably have added classes btn-positive/btn-negative anchor and style to share. But they could only target the strong brands and use different class voters instead.

titan betting said...
31.12.2009 @ 03:12am

i love this great blog

bingo online italiano said...
31.12.2009 @ 03:09am

That is a great little trick.

titan bet aams said...
31.12.2009 @ 03:08am

very nice web

gratta e vinci gratis said...
31.12.2009 @ 03:07am

That is a great little trick.

منتديات ساحل الجعافره said...
21.12.2009 @ 01:01am

Thanks dear

Knowledge Network said...
19.12.2009 @ 03:45pm

This is a great trick. IE6 is really a pain to code for. Doing a number of tricks using CSS like the one above have helped making designing for different browsers slightly easier, but IE6 is still the worst.

Jenna said...
16.12.2009 @ 03:38pm

Si, you're living on another planet if you really believe that it is possible to create some of the amazing designs we see today without adding extra markup to achieve it. Sometimes extra markup is necessary and it can still be semantic (my example above probably wasn't the best).

However, extra markup aside... sometimes people already have child elements for semantic purposes but don't realise that they can target those children to style in IE6.

For example, in the past I've used markup similar to the following to style anchors like buttons:

<a href="#" class="btn"><strong>Button</strong></a>

... this is completely semantic and if someone wanted neutral, positive and negative buttons they'd probably have added btn-positive/btn-negative classes to the anchor and styled them separately. But, they could just target the strong tags and use multiple class selectors instead.

Si said...
16.12.2009 @ 08:14am

Sorry but adding extra mark-up is just plain wrong.
People should stop looking for hacks and tricks and learn to write IE6 compatible code from the start. This should only help if you are editing someone else's code and cant change the css!

Benjamin Reid said...
16.12.2009 @ 06:56am

Well #feedback.error won't work. Just do the id and class on different lines.

#feedback { }
.error { }

Then write the usual markup. Work for me.

myWandtattoo said...
06.12.2009 @ 01:44pm

Many thanks, elegant tweak!

Selbstklebende Folie said...
05.12.2009 @ 11:58am

I was looking for information like this. Best regards Michael

Learn-er said...
30.11.2009 @ 08:58pm

Simple work around for ie6.

Raisins said...
24.11.2009 @ 06:17am

Firefox or chrome are the best. I think the information presented will be useful to many people a lot.

eSky - Premium Web Directory said...
22.11.2009 @ 07:56pm

Great trick!

Jackie said...
05.11.2009 @ 01:15pm

Pretty cool trick / idea.

CSS Tutoring said...
29.10.2009 @ 08:10pm

Nice CSS tricks that I doubt I will be needing anytime soon. I usually prefer creating CSS styles just for IE6

seo of india said...
29.10.2009 @ 07:25am

I am agree with you. Nice post.

Terry said...
27.10.2009 @ 09:27am

Awesome tip!

copper clad aluminium wire said...
19.10.2009 @ 06:07am

I m a starter in this field . I just started to bulild website, blog . It is a little complicated for my simple head . But really enlighting

skf bearings said...
19.10.2009 @ 04:33am

Thank you for your share,it is a useful article

Sms Falas said...
17.10.2009 @ 03:48am

Thanks for nice CSS tips . I am big fan of CSS and its very simple and flexible .

vista codec package said...
16.10.2009 @ 07:54am

very useful post. thanks for everything!

Golden triangle tours said...
09.10.2009 @ 05:03am

Nice blog, that can make you happy and can open new way of earning.

Muscle Mass said...
08.10.2009 @ 11:28pm

I never knew you could do that. Great little trick.

Magic Tricks Revealed said...
08.10.2009 @ 11:28pm

Thanks for the CSS info.

Board Exam said...
06.10.2009 @ 09:56pm

This trick is so great.

Career Target said...
06.10.2009 @ 09:55pm

This great trick works. Thanks for posting.

Poptropica said...
05.10.2009 @ 12:44am

Great to see that at least some CSS tricks work in IE6.

Julian said...
04.10.2009 @ 02:18pm

Thanks for this post. Works great for me

Drug Treatment Centers said...
04.10.2009 @ 04:06am

Awesome blog your feedback and info provided are really appreciable.
thanks!

Tyler Brownell said...
02.10.2009 @ 08:14am

I thought this was impossible. Thank you so much!

Darba piedāvājumi said...
30.09.2009 @ 08:10am

Still so many people use IE6.

But thanks for tutorial I will give it a try.

Maracas said...
28.09.2009 @ 03:29pm

Isn't this another reason why we should all continue the glorious revolution against IE6?

air purifier ratings said...
24.09.2009 @ 04:12am

Thanks for this info, i will put to use right now

Phoenix SEO said...
22.09.2009 @ 03:09pm

Awesome code, I will save this in my programming DB of things to save for a rainy day - because I know I will need it

sugar cookies said...
22.09.2009 @ 02:02pm

hi,
Thanks for nice CSS tips . I am big fan of CSS and its very simple and flexible .

Nicolas said...
21.09.2009 @ 04:08am

Great one! Many people who are using IE6 will find this one very useful. I'd better try this one.

arab-ia said...
15.09.2009 @ 10:29pm

That is a great little trick.

Meg said...
11.09.2009 @ 07:15pm

I'll look into it. Thanks for sharing.

online furniture store said...
10.09.2009 @ 02:19pm

More proof that everyone should be using firefox or chrome. god IE is such a pile of junk

waLlpaPer said...
10.09.2009 @ 05:45am

it is a shame that IE6 is still on most used browsers :(
That was a nice article thank you

Rusli Zainal sang Visioner said...
07.09.2009 @ 02:16am

wow...that sure is a lot of work to do just to get it to work in crappy IE6, huh? looking forward to the day when all anyone uses is Chrome, Safari and Firefox!!

Poptropica said...
03.09.2009 @ 03:14pm

thanks for your tutorial..!!!

raudensah said...
03.09.2009 @ 02:51pm

yes thanks your information god luck!!

Austin deck said...
03.09.2009 @ 01:45pm

Excellent presentation. Austin deck wishes to have more articles like this

edu links said...
02.09.2009 @ 01:32pm

wow...that sure is a lot of work to do just to get it to work in crappy IE6, huh? looking forward to the day when all anyone uses is Chrome, Safari and Firefox!!

Garry said...
01.09.2009 @ 06:21am

thanks for the suggestion. I like your post.

Phoenix Furniture said...
29.08.2009 @ 04:36pm

Nice trick man, will be doing these on a few of my sites.

Rochester hvac said...
28.08.2009 @ 08:55am

We like this information post yes it is much needed for people who use IE6.

Teresa said...
27.08.2009 @ 02:25pm

Thanks for this tip. I`m rebuilding customer`s site from tables to css and your post saved me from crazyness

jon said...
25.08.2009 @ 11:29pm

need to try this

Multiply Themes said...
25.08.2009 @ 10:22pm

This is really cool tweak, need to try this.

Joe Wolfe said...
13.08.2009 @ 11:16am

Let me reiterate:

You use the code above to replace a background-color on a div.

I'm trying to use a class to replace a background-image on a div. The method above doesn't seem to work on what I am trying to accomplish.

So it works to replace background-colors, but not background-images

Joe Wolfe said...
13.08.2009 @ 11:10am

Apparently this IE6 hack no longer works...either that or it just didn't for me.

orip said...
04.02.2009 @ 09:25am

Thanks, elegant tweak!

JBagley said...
29.01.2009 @ 06:48am

Perfect solution for the site I am currently building and IE6 is just not playing nice with regards to multiple selectors.

Sophia said...
05.01.2009 @ 11:39pm

That's is really cool!

Duryodhan said...
17.12.2008 @ 01:13am

Hello
Your blog is very good ,
I am Duryodhan from orissa India
I am workin as a SEO Spacalist
I want talk to U give your persional mail id

Alec Gorge said...
09.09.2008 @ 05:58am

Very neat. It makes you wonder how does microsoft make a rendering and layout engine so buggy that simply adding a child element fix the problem.

Jason Cole said...
29.08.2008 @ 03:20pm

That is a great little trick.

Add your thoughts

Fields in bold are required.

Add a comment



Latest entries

Categories

Who am I?

I am Jenna Smith - a front end web developer who has been busy coding XHTML & CSS for the last 6 years. If you are interested in seeing my work or getting in touch you can do so through my growldesign website.