Problems with Firefox

[Kianna]

I'm using a style for my links, the same Melfina is using for Celestial Star on the left navigation column thingy. However, mine refuse to work in Mozilla Firefox (which I think is the satan of browsers x.x) I was wondering if there is a certain code you have to add to make this work? Does anyone know how to help me? I'd appreciate it.

[Kianna]

Okay maybe this will help.

http://www.starsandspikes.com/test2.php

If you look at it in IE, everything is fine, but if you look at it in Firefox the links are all screwed up. Does anyone know how to fix this?

[Zelaven]

maybe copy & paste your stylesheet here? if it's not too long, that is.

[Kianna]

It is a bit long but I will anyways.

Code:

body, div, table, td, tr
 {scrollbar-DarkShadow-Color:#790000;
scrollbar-Track-Color:#ED1C24;
scrollbar-Face-Color:#ED1C24;
scrollbar-Shadow-Color:#000000;
scrollbar-3dLight-Color:#000000;
scrollbar-Highlight-Color:#FABBBE;
scrollbar-Arrow-Color:#000000;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 9px;
font-family: verdana;
color:#000000;
cursor: normal;
background-repeat: repeat-y;
text-align:justify;
line-height:11px;}

input, select {font-family:Verdana; font-size:9px; border: 1px solid #000000; background-color:transparent; height:17px;}
textarea {font-family:Verdana; font-size:9px; border: 1px solid #000000; background-color:transparent;}

A:link {text-decoration:none; color:#ED1C24; font-size:9px; font-family: verdana; font-weight:bold; cursor:help; height:2;}
A:active  {text-decoration:none; color:#ED1C24; font-size:9px; font-family: verdana; font-weight:bold; cursor:help; height:2;}
A:visited  {text-decoration:none; color:#ED1C24; font-size: 9px; font-family: verdana; font-weight:bold; cursor:help; height:2;}
A:hover  {text-decoration:none; color:#FFF200; height:2; font-size:9px; font-family: verdana; font-weight:bold; height:2;cursor:help;}


.head {
color:#ED1C24;
border-bottom:3px double #ED1C24;
border-right:0px;
border-left:0px;
border-top:0px;
background-color: transparent;
font-family: verdana;
font-weight:bold;
font-size: 16px;
letter-spacing:5px;
padding-bottom:3px;
}

.side {
color:#000000;
border-right: 1px solid #000000;
background-color: #FABBBE;
font-family: verdana;
font-weight:normal;
font-size: 10px;
}

.nav {
color:#000000;
border-bottom: 1px solid #000000;
background-color: #880E11;
font-family: verdana;
background: url('images/v3/head.gif');
font-weight:bold;
font-size: 12px;
padding-top:7px;
padding-right:5px;
text-align:right;
padding-bottom:6px;
}

.nav2 {
color:#000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
background-color: #transparent;
font-family: verdana;
font-weight:normal;
font-size: 10px;
}

.navtop {
color:#000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
background-color: #790000;
font-family: verdana;
font-weight:normal;
font-size: 10px;
}

.navlinks
{
display : block;
color : #000000;
font-size : 10px;
text-align : left;
padding-left : 5px;
padding-bottom: 2px;
background : url('images/v3/nav.gif');
border-bottom : 1px solid #FFFFFF;
border-right : 0px;
}

.navlinks:hover
{
color : #000000;
background :#FFF200;
border-bottom:1px solid #000000;  
}

.navlinks:link
{
color : #ffffff;
background :#FFF200;
background : url('images/v3/nav.gif');
border-bottom:1px solid #ffffff;  
}

.table {
color:#000000;
border:1px solid black;
padding: 0px;
background-color: #ffffff;
font-family: verdana;
font-weight:normal;
font-size: 10px;
}

.outline {
color:#000000;
border-bottom:1px solid black;
padding: 0px;
background-color: #FABBBE;
font-family: verdana;
font-weight:normal;
font-size: 10px;
}

.content {
color:#000000;
border:0px none;
padding: 0px;
background-color: #FFFFFF;
padding:15px;
font-family: verdana;
font-weight:normal;
font-size: 10px
}

.padding {
color:#000000;
padding: 0px;
background-color: #FFFFFF;
padding:5px;
font-family: verdana;
font-weight:normal;
font-size: 10px
}

.content2 {
color:#000000;
border:1px solid black;
padding: 0px;
background-color: #FABBBE;
padding:5px;
font-family: verdana;
font-weight:normal;
font-size: 10px
}

.contenthead {
color:#000000;
background-color: #880E11;
font-family: verdana;
background: url('images/v3/head.gif');
font-weight:bold;
font-size: 12px;
padding-top:7px;
padding-left:35px;
text-align:left;
padding-bottom:6px;
}

h1, h2, h3, pre {
  margin:0px 10px 10px 10px;
  padding-top: 0px;
}

h1 {
  font-size:12px;
}
h2 {
  font-size:11px;
}
h3 {
  font-size:10px;
}

The class I'm using for the links is "navlinks"

[Melfina]

Try changing it from a class to an id like #navlinks instead of .navlinks and linking it by id="navlinks"

[Kianna]

I'll try that but I don't think it will work. I'm pretty sure I've tried that before with older layouts and it did the same thing.

[Kianna]

Yeah it does the same thing x.x

here's what I did in the style sheet...

Code:

#navlinks
{
display : block;
color : #000000;
font-size : 10px;
text-align : left;
padding-left : 5px;
padding-bottom: 2px;
background : url('images/v3/nav.gif');
border-bottom : 1px solid #FFFFFF;
border-right : 0px;
}

#navlinks:hover
{
color : #000000;
background :#FFF200;
border-bottom:1px solid #000000;  
}

#navlinks:link
{
color : #ffffff;
background :#FFF200;
background : url('images/v3/nav.gif');
border-bottom:1px solid #ffffff;  
}

and here's a code for a link...

Code:

<a href="brushes.php" id="navlinks">Adobe Photoshop Brushes</a>

Gah x.x

[Kianna]

AHA PROBLEM PARTIALLY PWNED!

In the stylesheet I added height: 14px; and at least the menu isn't all scrunched up. But when I hover the background should turn yellow and it won't do that in firefox either. I can manage without it but it would be great if you guys could help.

Melfina I notice that you have pretty much the same thing going on for your links and they work fine in firefox, did you do anything special?