menu looks bad on ie6

[gilyotina]

here's a test page ive uploaded so its easier for you to help me:

click to go (http://pokerpuma.com/)

on ie7 it looks ok (though i have some small issues there too),
but ie6 makes a mess.

I tried to use the anti-comments method, but didnt help.

If anyone has a trick, besides bringing down microsoft, plz help..

[Centauri]

Two problems here (have you looked at this in Firefox? - the dropdowns don't show at all).

There is an error in the css file, with an extra comma appearing after the list of elements in the hover css .menu ul li:hover ul, /*when top item is hovered this happens to the submenue*/
.menu ul li a:hover ul,
.menu ul li.hover ul,
{
display:block;

} remove the highlighted comma.

Next, you have set the <a>s at 50px high, with a top margin of 10px on the <li>s and you expect that to fit in a 46px high div - IE7 and FF might allow oversized content to hang outside of a container, but IE6 won't. Reduce the height of the <a>s to 36px.

[gilyotina]

thanks,

it solved the gap issue in IE6 and also made it function on FF.

However, I still have the ie6 of repeating links (the first submenu shows twice the 'news' link) or part of the link (the third submenu splits the word 'surrender').

Any idea?

[Centauri]

Remove the red highlighted float :.menu ul li:hover ul li a, /*when top item is hovered this happens to the submenue items links*/
.menu ul li.hover ul li a,
.menu ul li a:hover ul li a{
float:left;
display:block;
background:#a88b6c;
color:#333;
text-align:left;
text-decoration:none;
border:0;
}Also, the blue highlighted line is invalid, as there are no <ul>s within an <a>, which is not allowed anyway.

[gilyotina]

alright, did all that,
I also had 2 other places with the mistake of ul inside a.

after removing them all, and the float, ie6+7 works great, but ff makes trouble..no bg for the submenu and also once the mouse is out from the top links (to go to the submenu) - the submenu disappears.

??

[Centauri]

???? I see no change on the site ....

[gilyotina]

here its up, sorry.

now you can see the ff problem..

[Centauri]

In three places where you commented out the invalid css rule, you have left a trailing comma so that the same probnlem exists as in my first post here. The list of elements that the rule applies to should be separated with a comma, but no comma should follow the list. Best just to remove the offending items instead of commenting them out.

You are also getting overlap in the submenus due to the height still being set from the top level, and the submenu link widths are too narrow due to the same thing - over-riding the top level sizes makes things look a little better :
.menu ul li:hover ul li a, /*when top item is hovered this happens to the submenue items links*/
.menu ul li.hover ul li a {

display:block;
background:#a88b6c;
color:#333;
text-align:left;
text-decoration:none;
border:0;
height: auto;
padding: 3px 0;
width: auto;
}

[gilyotina]

T H A N K S
this solved all the problems,

awsome