Development CSS problem.

I'm designing a site and havig a problem with a CSS rollover efect.

Here is a test page: http://www.tdsf.co.uk/Phoenix/

The rollover effect for the left side navigation, Section one, Section two etc. works fine in IE and Opera, but not Mozilla/Firefox, where the link and rollover effect does not fill the table cell.

Here is the relevant CSS code:

.LN a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #9097A2;
text-decoration: none;
line-height: 24px;
height: 24px;
width: 100%;
}
.LN a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #9097A2;
text-decoration: none;
line-height: 24px;
height: 24px;
width: 100%;
}
.LN a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #5B6371;
text-decoration: none;
line-height: 24px;
height: 24px;
width: 100%;
background-color: #DCDFE3;
}
.LN a:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #5B6371;
text-decoration: none;
line-height: 24px;
height: 24px;
width: 100%;
background-color: #DCDFE3;
}

Anyone got any ideas.

 

add display:block to the style declaration

[edit]
try this site for css help http://css.maxdesign.com.au/index.htm
[/edit]

 

and for the longest CSS document I've ever seen, see http://s.deviantart.com/styles/napalm.css/2844.css

 

Thanks for that fatal_error, it works like a charm. I am a happy bunny!

 

just tried it again and it works - but why does it say '5 Netscape' when it loads?

editt - cos I'm using Firefox

 

Jazzle,

The pop-up message was while I was testing. I have set up a browser detection script and 2 style sheets, because the rollover effects still screw up on early versions of Netscape.

I have now made the top navigation links text/css as well, previously they were rollover images.

For some reason the latest version of Firefox is detected as Netscape version 5, I'm not sure why, but in any case the script is working as I want now.

 

thought it must be something like that.
Firefox uses the same rendering engine as Netscape which is why it appears as Netscape to many/most detection scripts.

 

I've been using a javascript rollover method that only worked in IE, so this CSS method is a lot better, thanks for the tip.

I'm using it in a table menu as http://www.cpemma.co.uk/gloss.html (top menu is CSS version, bottom one js.

One slight snag - if the user has a narrow window so longer cell items wrap to 2 lines, the single-line items on the same row don't light up to fill the whole table cell in the css method with display: block.

Any ideas?

css is:

Code:

#navcontainer td
{
margin: 0;
padding: 0;
}

#navcontainer a
{
font-size: 12px;
text-align: center;
display: block;
color: blue; 
text-decoration: none;
background-color: #cccccc;
padding: 2px;
}

#navcontainer a:hover  
{
color: red; 
text-decoration: underline;
background-color: white;
}

#navcontainer a:visited 
{
color: #800080; 
text-decoration: none
background-color: #cccccc;
}  

 

u need a height:100% tag in there (#navcontainer a), although you should probably avoid using the table at all and just go for a horizontal list. there's loads on the site i linked to a couple of posts ago.

 

omg that site makes my site look like a cheap design

Do you mind if I copy your design layout?

 

height don't work, and the css is buggy in IE6, only the very first table cell is lighting as soon as the cursor enters the cell. OK in the Fox.

I'll try the list ways.