Hi,

I have two questions that I hope you can help with. My aim is to have two html windows with the same horizontal menu layout and a white font-color. Both html windows are linked to the same css code window.

I can get each menu to have a different background-color. And in IE6 the font-colors in both menus are white.

But in Firefox the navigation link font-color in each html window is a different color: it’s white in one menu and purple in another. Yet the tagline font-colors in both menu’s are white. I’m a bit lost about the reason why.

My questions:
1) Could it be because each html window should have it’s own css code window?
2) Are the colors in the css code somehow mixing or neutralizing each other to create white in one menu and purple in another? Or is there another reason for the different navigation link font-colors in Firefox?
3) How come the problem only arises with the navigation links and not the taglines?

I hope you can help clarify my thinking. Thanks.



The html code:

<div id="headbottom">
<p class="tagline">Some words<p>
<ul>
<li> <a href="">Word1</a>|</li>
<li> <a href="">Word2</a>|</li>
<li> <a href="">Word3</a>|</li>
<li> <a href="">Word4</a></li>
</ul>
</div> <!...headbottom...>

The css code for Window 1:

#headbottom {padding: 10px 0 10px 0; margin-left: auto; margin-right: auto; border-top: 1px solid green; border-bottom: 1px solid green; background-color: #890F60; width: 100%; height: 1%}
#headbottom ul{ margin: 0; padding: 0 30px 0 0; text-align: right; }
#headbottom li{ display: inline; color: white; }
#headbottom a:link, #headbottom a:visited {text-decoration: none; color: white}
#headbottom a:hover{background-color: #4F4532; font-family: times new roman, trebuchet, sans-serif; font-size: x-large}
.tagline {font-weight: light; color: white; white-space: nowrap; font-style: italic; margin-top: 0; margin-left: auto; margin-right: auto; width: 200px; float: left; }


The css code for Window 2:

#headbottom2 {padding: 10px 0 10px 0; margin-left: auto; margin-right: auto; border-top: 1px solid green; border-bottom: 1px solid green; background-color: #808080; width: 100%; height: 1%}
#headbottom2 ul{ margin: 0; padding: 0 30px 0 0; text-align: right; }
#headbottom2 li{ display: inline; color: white; }
#headbottom2 a:link, #headbottom a:visited {text-decoration: none; color: white}
#headbottom2 a:hover{background-color: #4F4532; font-family: times new roman, trebuchet, sans-serif; font-size: x-large}
Already written class css tagline fits here

This line:

#headbottom2 a:link, #headbottom a:visited {text-decoration: none; color: white}

explains the purple text in one browser. You targeted the :visited link wrongly, with #headbottom instead of #headbottom2, so the visited link is showing up at its default purple color once you have clicked on it once.

wayfarer07,

Ahhh...... I could have kicked myself wayfarer07. I looked and looked at it but couldn't find what was wrong. Gee whiz. Thanks for helping me out here; if not for you I'd still be stuck. Much appreciated wayfarer07.