IE, A CSS Nightmare!
There's entirely too much uppercase in that title but nevermind!
Whilst doing a spot of web design I've run into some interesting problems. Now, I know Internet Explorer isn't the best browser at handling CSS but considering it's majority browser market share I'm a bit miffed!!
I'll see if I can explain the problem. I am trying to have two different a(link for those that don't know) attributes in my CSS file. Now, in Firefox and Opera this isn't a problem. I just have the following code in my style.css file:
Code:
a, a:hover, a:visited, a:link, a:active
{
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
letter-spacing: 0px;
padding-top: 4px;
color: #FF0000;
}
.article a, a:hover a:visited, a:link, a:active
{
font-family: 'Trebuchet MS', Trebuchet, Verdana, sans-serif;
font-size: 12px;
letter-spacing: 0px;
padding-top: 4px;
color: #3939AC;
}
The aim of this is to have links inside the article attribute have different a tags to all the other a tags on the site. However, Internet Explorer seems to stick with the last a attribute stated in the CSS and just do that for all of them. Really really annoying. As this means that I've either got to grit my teeth, keep it as it is and exclude everyone using IE from seeing what it is intended or just have one style for all links on the site.
Does anyone have a solution to this problem because I'm stumped.
Also for anyone interested in web design and standards, I stumbled across http://www.graphicpush.com/ which I think you should take the time to look at. Man, that's one sexy site, one day mine might look as nice.