I'm having problems trying to get the same display in both IE6 and Firefox and Netscape.

Using CSS I have styled a variety of anchor links at differant sizes and cols.

However, the prob is this: in Firefox and Netscape 7+ my PAGE CONTENT LINKS do not apply the background colour change that be be viewed in IE6 - While in IE6, if any link is clicked on the page all small sclaed links inherit the font size of normal global nav links.

Is this because of probs with how my CSS is cascading?

<style type="text/css">
body { font-family: "Lucida Grande", Arial, sans-serif; font-size:10pt; color:#4D6E8E; }
div { width:650px; }
a:link { background-color:#4D6E8E; font-size:14pt; text-decoration:none; color:#ffffff;}
a:visited { color:#ffffff; text-decoration:none; font-size:14pt; background-color:#4D6E8E; }
a:hover { background-color:#CC0066; color:#ffffff; text-decoration:underline; }
a:active {background-color:#4D6E8E; font-size:14pt; text-decoration:none; color:#ffffff;}
a:link, a:visited, a:hover, a:active { padding: 2px 8px; }
#header { font-size: 8pt; }
#header_link { width:325px; float:left; text-align:left; color:#4D6E8E; padding-bottom:5px;}
#page_date {width:325px; float:right; text-align:right; color:#4D6E8E; padding-bottom:5px;}
#head_link {font-size: 8pt; background-color:#ffffff; color:#4D6E8E; text-decoration:none; padding:0px;}
#content { width:650px; position:relative; padding-top:15px;}
#sidebar { width:160px; position:absolute; top:0; left:0; padding-top:15px; }
#mcontent { width:480px; position:absolute; top:0; right:0; padding-top:15px; padding-left:10px; }
div a.slinks { font-size:12px; background-color:#CCFFFF; color:#4D6E8E; display:block; border-style:solid; border-color:#ffffff; border-width:2px;}
h1 { color: #CC0066; font-size: 32px; margin:0; }
h2 { font-size:18px; background-color:#ffffff; color:#CC0066; margin:0; }
h3 { font-size:14px; background-color:#ffffff; color:#CC0066; margin:0; }
h1, h2, h3 { vertical-align:top; }
strong { color:#CC0066; font-size:12pt; font-weight:bold; }
#sections { width:480px; position:relative; padding-top:10px; }
#forums { width: 235px; position:absolute; top:0; left:0; border-right: 1px dashed #4D6E8E; padding-right:5px; }
#services { width: 230px; position:absolute; top:0; right:0; padding-left:10px; }
hr { border-style:dashed; border-width:1px; border-color:#4D6E8E; }
#mcontent p { font-size: 12pt; }
#footer { background-color: #52BCEC; position:absolute; top:870px; padding-top: 10px; padding-bottom: 10px; }
#footer p { font-size: 8pt; text-align:center; color:#ffffff; }

</style>

The problem can be view at:

http://www.mediamole.net/safe14/index.html

Gaz

__________________
Gaz

Odd. A specificity bug in IE concerning pseudo-classes, I guess. Has someone else heard of something like that?

Anyway, you could list the different different link states to make it work.

Instead of
div a.slinks {...}
use
a.slinks:link, a.slinks:visited, a:slinks:hover, a.slinks:active {...}

But the slinks class is redundant, really, since you have IDs aplenty already. Use one of them and you don't have to class the links at all. :)

#sidebar a {...}

--
http://yupapa.com

Thanks for the tips. Still encounter problems though. As by doing what you recommended it altered the global links above it.

I think the problem has been that because I having been playing with the CSS while making amendments to the design etc.. I have got the CSS inheritance a little mixed up.

So, initially to overcome the problem, I have stated in the CSS:
#navlinks a {...}

which has sorted out the link problem with the secondary links

Gaz

I'm confused now. There is no id "navlinks" in the page you linked to. But you have a rule #sidebar a {}.

--
http://yupapa.com