Problem with Menu, UL, LI in NN4

[pindky]

Hello,

I am trying to create a menu. It looks fine in IE, but in NN4.x the .menu color is not showing up as white and it is not observing the style of the UL and LI.

The menu is online at:

http://www.smallworldgraphics.com/test/organizeplus/menu_twolevels.htm

I can't figure out the problem at all. I can't even figure out why NN4.x isn't rendering the .menu class and keeping the font white. That's pretty basic.


The HTML is:
<table width=&quot;170&quot; border=&quot;0&quot; cellspacing=&quot;3&quot; cellpadding=&quot;0&quot;>
<tr>
<td><a href=&quot;index.html&quot; onMouseOut=&quot;MM_swapImgRestore()&quot; onMouseOver=&quot;MM_swapImage('logo','','images/logo_over.jpg',1)&quot;><img name=&quot;logo&quot; border=&quot;0&quot; src=&quot;images/logo.jpg&quot; width=&quot;170&quot; height=&quot;100&quot;></a></td>
</tr>
<tr>
<td bgcolor=&quot;#330000&quot;class=&quot;menu&quot;><a href=&quot;#&quot;>Services</a></td>
</tr>
<tr>
<td>
<ul>
<li class=&quot;sub&quot;><a href=&quot;#&quot;>Organize Your Home</a></li>
</ul>
<table width=&quot;170&quot; border=&quot;0&quot; cellspacing=&quot;1&quot; cellpadding=&quot;0&quot;>
<tr>
<td width=&quot;15%&quot;>&nbsp;</td>
<td width=&quot;*&quot; class=&quot;low&quot;><a href=&quot;#&quot;>Clutter Control</a></td>
</tr>
<tr>
<td width=&quot;15%&quot;>&nbsp;</td>
<td width=&quot;*&quot; class=&quot;low&quot;><a href=&quot;#&quot;>Space Planning</a></td>
</tr>
<tr>
<td width=&quot;15%&quot;>&nbsp;</td>
<td width=&quot;*&quot; class=&quot;low&quot;><a href=&quot;#&quot;>Paper Management </a></td>
</tr>
<tr>
<td width=&quot;15%&quot;>&nbsp;</td>
<td width=&quot;*&quot; class=&quot;low&quot;><a href=&quot;#&quot;>Filing Systems</a></td>
</tr>
<tr>
<td width=&quot;15%&quot;>&nbsp;</td>
<td width=&quot;*&quot; class=&quot;low&quot;><a href=&quot;#&quot;>Feng Shui</a></td>
</tr>
<tr>
<td width=&quot;15%&quot;>&nbsp;</td>
<td width=&quot;*&quot; class=&quot;low&quot;><a href=&quot;#&quot;>Bill Paying &amp; Mail Processing</a></td>
</tr>
<tr>
<td width=&quot;15%&quot;>&nbsp;</td>
<td width=&quot;*&quot; class=&quot;low&quot;><a href=&quot;#&quot;>Residential Relcation</a></td>
</tr>
<tr>
<td width=&quot;15%&quot;>&nbsp;</td>
<td width=&quot;*&quot; class=&quot;low&quot;><a href=&quot;#&quot;>Home Staging</a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td><ul>
<li class=&quot;sub&quot;><a href=&quot;#&quot; >Organize Your Office</a></li>
</ul></td>
</tr>
<tr>
<td bgcolor=&quot;#660000&quot; class=&quot;menu&quot;><a href=&quot;#&quot;>Before &amp; After Photos</a></td>
</tr>
<tr>
<td bgcolor=&quot;#993333&quot; class=&quot;menu&quot;><a href=&quot;#&quot;>Client Testamonials</a></td>
</tr>
<tr>
<td bgcolor=&quot;#CC6633&quot; class=&quot;menu&quot;><a href=&quot;#&quot;>FAQ's</a></td>
</tr>
<tr>
<td bgcolor=&quot;#CC9966&quot; class=&quot;menu&quot;><a href=&quot;#&quot;>My Background</a></td>
</tr>
<tr>
<td bgcolor=&quot;#FFCC99&quot; class=&quot;menu&quot;><a href=&quot;#&quot;>Contact Me</a></td>
</tr>
</table>



The CSS is:
body {
margin : 0px:
}

.menu {
font-family : verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color: white;
font-weight: bold;
text-align: right;
padding: 3px;
}

}

.menu a:link {
font-family : verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color: white;
font-weight: bold;
text-align: right;
padding: 3px;
text-decoration: none;
}

.menu a:visited {
font-family : verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color: white;
font-weight: bold;
text-align: right;
padding: 3px;
text-decoration: none;
}

.menu a:hover {
text-decoration : underline;
}

UL {
list-style : square outside none;
color : #993333;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 10px;
font-weight : bold;
padding: 2px;
margin-bottom: 4px;
text-align: right;
}

LI {
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 10px;
font-weight : bold;
color : #993333;
text-align: right;
}

.sub {
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 10px;
font-weight : bold;
color : #993333;
}

.sub a:link {
color : #993333;
text-decoration: none;
}


.sub a:visited {
color : #993333;
text-decoration: none;
}

.sub a:hover {
text-decoration : underline;
color: #FFCC99;
}

.low {
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 10px;
font-weight : normal;
color : #CC6633;
text-align: right;
}

.low a:link {
color : #CC6633;
text-decoration: none;
}


.low a:visited {
color : #CC6633;
text-decoration: none;
}

.low a:hover {
text-decoration : none;
background-color: #FFCC99;

 

[Boomerang]

Hi pindky,

NN4.x don't supports a lot of the css stuff.
Use this as a workaround:

<td bgcolor=&quot;#330000&quot; class=&quot;menu&quot;><a class=&quot;menu&quot;href=&quot;#&quot;>Services</a></td>

<li class=&quot;sub&quot;><a class=&quot;sub&quot; href=&quot;#&quot;>Organize Your Home</a></li>

<li class=&quot;sub&quot;><a class=&quot;sub&quot; href=&quot;#&quot; >Organize Your Office</a></li>

<td bgcolor=&quot;#660000&quot; class=&quot;menu&quot;><a class=&quot;menu&quot; href=&quot;#&quot;>Before & After Photos</a></td>

<td bgcolor=&quot;#993333&quot; class=&quot;menu&quot;><a class=&quot;menu&quot; href=&quot;#&quot;>Client Testamonials</a></td>

<td bgcolor=&quot;#CC6633&quot; class=&quot;menu&quot;><a class=&quot;menu&quot; href=&quot;#&quot;>FAQ's</a></td>

<td bgcolor=&quot;#CC9966&quot; class=&quot;menu&quot;><a class=&quot;menu&quot; href=&quot;#&quot;>My Background</a></td>

<td bgcolor=&quot;#FFCC99&quot; class=&quot;menu&quot;><a class=&quot;menu&quot; href=&quot;#&quot;>Contact Me</a></td>

about the hovers:
NN4.x don't supports hovers at all !!

Hope this helps,
Erik
<!-- My sport: Boomerang throwing !!
This year I will participate at the World Championships in Germany. (

http://www.boomerang2002.com)

!! Many Happy Returns !! -->

 

[pindky]

Wow! Terrific thanks. I also noticed I had made a spacing typo which apparently NN4 wasn't too fond of!!