Link CSS class ignored in IE – quick fix

If you have a CSS rule like

body a {
/* default styling */
}

and there’s a case where you want to apply a different class to an anchor (link) by doing

CSS
a.myClass {
/* new style */
}

HTML
<a href="foobar.html" class="myClass">....</a>

then your efforts will be shot down by our good ol’ friend IE 6. To make it work in Internet Explorer, one technique is to use the id selector for your classes, like so

CSS
#linkContainer a {
/* new style */
}

HTML
<span id="linkContainer">
<a href="foobar.html">....</a>
</span>

You can use any other tag in place of the span, but I prefer it since it doesn’t have an effect on the layout mostly.

Advertisements

2 thoughts on “Link CSS class ignored in IE – quick fix

  1. Additionally, I had a problem with an IE6 bug where it was simply not working b/c of a tag surrounding the linked copy. This was in an Expression Engine site still in development. http://dev.www.umb.edu/ee/index.php/services/services
    The linked code was surrounded by a few EE tags so not sure if that was adding to the problem.
    {category_name}

    By removing the tag, the linked copy turned white per the stylesheet.

  2. smittieh says:

    Why does IE suck so much? Took me hours to figure this out..

    so, Thanks!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: