PDA

View Full Version : CSS Vertical List Menu white space



canitgirl
Apr 23rd, 2009, 07:23 PM
Hi, I have modified the menu at http://www.javascriptkit.com/script/script2/verticalmenu.shtml just slightly, to add in an extra submenu set.

Now, I notice my problem even occurs on the example given, and I am curious as to whether it is just me, or it happens all the time. It seems that each subsequent submenu, when opened, appears slightly below the item it originates from, creating white space above it.

The more submenus the menu has, the more off-kilter it makes the page look because of the increasing white space. Is there any way to remove this white space, so that all elements line up?

Not sure you need it, as it appears to occur in the sample as well, but if you do here are the codes I am using.

CSS (external file):



.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 40px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}

.glossymenu li{
position: relative;
}

.glossymenu li a{
background: white url(glossyback.gif) repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}

.glossymenu li ul{ /*SUB MENU STYLE*/
position: absolute;
width: 70px; /*WIDTH OF SUB MENU ITEMS*/
left: 0;
top: 0;
display: none;
}

.glossymenu li ul a{
width: 60px; /*WIDTH OF SUB MENU ITEMS - 10px padding-left for A elements */
}

.glossymenu li ul li{
float: left;
}

.glossymenu li ul li ul {
position: absolute;
width: 110px;
left: 0;
top: 0;
display: none;
margin-left: 72px;
}

.glossymenu li ul li ul a{
width: 100px;
}

.glossymenu li ul li ul li{
float: left;
}

.glossymenu .arrowdiv{
position: absolute;
right: 2px;
background: transparent url(arrow.gif) no-repeat center right;
}

.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}

.glossymenu li a:hover{
background-image: url(glossyback2.gif);
}

/* Holly Hack for IE \*/
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }
/* End */


Head and Body coding:



<html>
<head>

<link rel="stylesheet" type="text/css" href="cssverticalmenu.css" />

<script type="text/javascript" src="cssverticalmenu.js">

/***********************************************

* CSS Vertical List Menu- by JavaScript Kit (www.javascriptkit.com)
* Menu interface credits: http://www.dynamicdrive.com/style/csslibrary/item/glossy-vertical-menu/
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more

***********************************************/

</script>

</head>

<body>

<ul id="verticalmenu" class="glossymenu">
<li><a href="#">A</a>
<ul>
<li><a href="#">Aa-Ad</a>
<ul>
<li><a href="">Abattoir</a></li>
<li><a href="">Abele</a></li>
</ul>
</li>
<li><a href="">Ae-Ah</a></li>
<li><a href="">Ai-Al</a></li>
<li><a href="">Am-Ap</a></li>
<li><a href="">Aq-At</a></li>
<li><a href="">Au-Az</a></li>
</ul>
</li>
</ul>

</body>
</html>


As you can see, this is to be used for a personal dictionary once it is completed. I don't expect anyone else to see it but me, but I would like it to work. And if I decide to use the menu for something else in future, it would be nice to know how to fix it in advance.

Thanks.

canitgirl
Apr 23rd, 2009, 08:00 PM
Oh, solved my own problem. Add margin-top: -1px; to both the .glossymenu li ul and .glossymenu li ul li ul codes in the external css file.

Rick Reichert
May 6th, 2010, 05:47 PM
This fix works! After much web searching and many dead ends this solution solved the mysterious "jumping white space" in my vertical ul li ul li menu list in IE 7. Thank you!!!!!