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

Here is a test page: 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:

<font face='Courier New'>.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;
}</font id='Courier New'>

Anyone got any ideas.

Regards

Owen.

-------------------------------------------------------------------------------------------
Developer services and tutorials: www.drdev.net

Multiple Parameter UD4 / Access 2000 Search Tutorial: www.tdsf.co.uk/tdsfdemo/

owen, check this test link and see if the rollovers work for you here, this is something i did a while back.

test.webworldfx.net

this is how i got them to work, modify to your own needs

<pre id=code><font face=courier size=2 id=code>
/* rightNav Link Properties */
#rightNav a {
display: list-item;
border: 1px dotted #000;
text-decoration: none;
line-height: lem;
width: 99%;
list-style-type: none;
}
#rightNav a:link, #rightNav a:visited {
color: #666;
}
#rightNav a:hover, #rightNav a:active {
color: #FFFFFF;
background-color: #006666;
border: 1px solid #000;
}
</font id=code></pre id=code>

you dont need to give all attributes to the sheet on every tag, you can group like above, and only change what needs changing.

Regards,
Dave

edit: my fonts etc.. are defined in a seperate sheet.

[DWMX 2004]|[FlashMX 2004 Pro]|[SQL]|[Access2000]|[ASP/VBScript]|[XP-Pro]


Edited by - UltraDav on 05 Dec 2004 18:39:10

Hi Dave,

Yup your site woks in Opera and Firefox. However, I found an alternative solution:

.LN a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #9097A2;
text-decoration: none;
line-height: 24px;
height: 24px;
width: 100%;
display: block; &lt;===== Just added this
}

Regards

Owen.

-------------------------------------------------------------------------------------------
Developer services and tutorials: www.drdev.net

Multiple Parameter UD4 / Access 2000 Search Tutorial: www.tdsf.co.uk/tdsfdemo/

yeah display: block can work too.

i prefer the list item display, each to their own <img src=../images/dmxzone/forum/icon_smile.gif border=0 align=middle>

glad to sorted it.

Regards,
Dave

[DWMX 2004]|[FlashMX 2004 Pro]|[SQL]|[Access2000]|[ASP/VBScript]|[XP-Pro]