color: inherit; issue with IE 7

hi

I am working on a site and I am trying to specify the colours of text links based on a particular class. The main body has a colour to define text and i also have this (cut down version)

Code: Select all

.panelText{
    position: absolute;
    margin-left:160px;
    margin-top:5px;
    position:absolute;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:10px;
    width:180px;
    float:left;
}

.panelText a{
text-decoration:none;
color: inherit;
}

.panel001{
    background-image:url(../images/panels/001.gif);
    height: 103px;
    width: 361px;
    color:#FFFFFF;
}
.panel002{
    background-image:url(../images/panels/002.gif);
    height: 103px;
    width: 361px;
    color:#000000;
}

etc etc

The colour properly gets inherited in firefox, but in IE it colours it using the colour of the main body text. I can specify the colour for IE by adding

color: [what colour I want];

to .panelText a, but this then appies to to all of the panels.

I have also tried defining the a tag for each panel but that doesnt work either.

Any ideas?

Anyone?

I have read that IE has issues with inheritance, but I cant find a solution...

Would this link be helpful?

Did you try adding different classes to the different links?
There is an example above. I used this last week and it worked for me.

Thanks for the reply. I already have separate class for the different links.

There is away round, setting the a attribute in a separate class for each item, but as I have dozens of classes, I was hoping there might be a cleaner way of doing it. After all, it works fine on firefox. Looks like I'll just have to have loads of code that shouldn't be needed.

By that I mean

.panel001{
background-image:url(../images/panels/001.gif);
height: 103px;
width: 361px;
color:#FFFFFF;
}
.panel001 a{
color:#FFFFFF;
}

(I have 12 of these so far, and probably more so it seems like a lot of extra code)