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=http://www.webdeveloper.com/forum/archive/index.php/"index.html">Home</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"">Cooperative Concept</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"">Consignment Concept</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"">Special Events</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"">Benefits</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"">Designers</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"">Products</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"">Contact Us</a>
</div>
<div id="content2">
<p>Download an application <a class="otherlinks" href=http://www.webdeveloper.com/forum/archive/index.php/"">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.#navbar a:link, a:visited {
.otherlinks a:link, a:visited {
I suspect these are the problem. The validators can't check logical errors.The links show up the same in all but IE - so I think the problem is IE, not the other (Opera, Netscape, FF) browsers.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.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.
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=http://www.webdeveloper.com/forum/archive/index.php/"index.html">Home</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"">Cooperative Concept</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"">Consignment Concept</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"">Special Events</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"">Benefits</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"">Designers</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"">Products</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"">Contact Us</a>
</div>
<div id="content2">
<p>Download an application <a class="otherlinks" href=http://www.webdeveloper.com/forum/archive/index.php/"">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.#navbar a:link, a:visited {
.otherlinks a:link, a:visited {
I suspect these are the problem. The validators can't check logical errors.The links show up the same in all but IE - so I think the problem is IE, not the other (Opera, Netscape, FF) browsers.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.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.