PDA

Click to See Complete Forum and Search --> : Links showing up incorrectly in Firefox

kendokendokendo
06-18-2005, 03:42 PM
Hey guys,

I'm developing a simple website using HTML and CSS and so far it's pretty good. But the only problem I'm having is with Firefox. I want links in the page copy to look different from links in the navbar, and all the other browsers understand that there's 2 separate styles for links. Firefox, however, attempts to combine the two into some weird hybrid that looks awful.

My html looks like so:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<div id="navbar">
<a href="index.html">Home</a>
<a href="">Cooperative Concept</a>
<a href="">Consignment Concept</a>
<a href="">Special Events</a>
<a href="">Benefits</a>
<a href="">Designers</a>
<a href="">Products</a>
<a href="">Contact Us</a>
</div>
<div id="content2">
<p>Download an application <a class="otherlinks" href="">here</a>.</p>
</div>


and my CSS is like so:


#navbar {
position: absolute;
width: 120px;
height: 441px;
top: 0px;
left: 0px;
background: #ff7f00;
border: 1px solid #000;
list-style-type: none;
margin: 0;
padding: 0;
background-image: url(images/logoweb.gif);
background-repeat: no-repeat;
background-position: bottom center;
}

#navbar a:link, a:visited {
display: block;
text-decoration: none;
text-align: right;
padding-bottom: 2px;
padding-right: 2px;
color: #4f270d;
font-size: 0.6em;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

#navbar a:active {
color: #000;
}

#navbar a:hover {
color: #fff;
}

#content2 {
position: absolute;
width: 350px;
height: 220px;
top: 222px;
left: 473px;
background: #dbe9e9;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}

.otherlinks a:link, a:visited {
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000066;
}

.otherlinks a:active {
color: #fff;
}

.otherlinks a:hover {
color: #0000ff;
}


Everything validates. I don't know what the deal is. I'm most likely just missing some small little detail. Can anybody help?
Thanks very much in advance.
ray326
06-18-2005, 07:10 PM
#navbar a:link, a:visited {
.otherlinks a:link, a:visited {
I suspect these are the problem. The validators can't check logical errors.
williamscraig
06-18-2005, 10:11 PM
The links show up the same in all but IE - so I think the problem is IE, not the other (Opera, Netscape, FF) browsers.
kendokendokendo
06-18-2005, 10:54 PM
the solution seems to be this: if you set a style for links in one place, such as #navbar a {}, then you have to completely undo it in the next place.

for example, you want #navbar links to be underlined and red and 14px. you want .otherlinks to be just plain blue 14px, no underline.
if you do something like:


#navbar a {
text-decoration: underline;
color: red;
font-size: 14px;
}


then, in Firefox, every single link on the page will look like that unless you put:


.otherlinks a {
text-decoration: none;
color: black;
font-size; 12px;
}


thereby resetting it.
ray326
06-19-2005, 10:47 PM
I guess I was too subtle.
#navbar a:link, a:visited {
.otherlinks a:link, a:visited {
This is probably wrong. 99.9% of the time when this is coded in a stylesheet the author meant to write
#navbar a:link, #navbar a:visited {
.otherlinks a:link, .otherlinks a:visited {
and I suspect you are no different.