Sent by Holly Bergevin on 2 July 2004 06:06
From: "Tim Hardy" [EMAIL-REMOVED]>
> I'm trying to
>hide a LI in an unordered list that's a part of a menu I'm using. I need to
>be able to do this client-side by changing a property of the LI, but
>display:none isn't working due to something in the menu.
>
>http://omegacreations.com/HidingListItem.html
Hi Tim,
The problem you're having is actually a specificity issue. The LI you want to hide, even though you
have given it the class that hides the first one, is being overridden by other selectors on your
page. This will work to hide that LI -
#menu #menuList li.Item1 {display: none;}
After that, though, there is ugliness in IE... did you expect any different? I can almost fix the
look of the borders, but with the background color on #menu, I'm at a loss to tell you how to
eliminate the "spillage" that occurs at the bottom.
But, if you can set the background color of #menu to be the same as the color of the column it is
in, you can change the following and get pretty much what you want I think -
Remove:
#menu {border-left: 1px solid #000000;
border-right: 1px solid #000000; }
#menu li ul {border-left: 1px solid #000000;
border-right: 1px solid #000000;}
Change:
#menu li ul {margin: 0 0 0 -1px;}
There may still be a little funkyness in the display of the last list item when hovered. I just
moved the closing tag of the UL following the last Option 2 LI to be on the same line as the closing
tag of that same LI and the problem went away. It's some sort of whitespace bug, no doubt.
So, it isn't perfect, but maybe it gives you a new starting point to work from.
hth,
~holly
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
