Sliding doors vertical menu- IE white gap

**naftus** · 04-01-2007, 08:03 AM

re: Vertical Sliding Doors:
http://www.dynamicdrive.com/style/cs...vertical-menu/

Problem:
In IE6, a white gap appears under each menu option, while there is no white gap in Firefox.

How do I remove the white gap for IE browsers?

example here:
http://ewebs.com/dd/test.html

Thankyou for your help

**ddadmin** · 04-01-2007, 08:56 AM

There is a deliberate white border beneath each menu item. Try removing this line:

Code:

border-bottom: 1px solid white; /* White border beneath each menu item link, to add depth */

**naftus** · 04-01-2007, 11:28 AM

i have completely removed this CSS line, and it makes no difference:

(as per the example)
http://www.ewebs.com/dd/test.html

The white border seems to be an IE interpretation of the CSS, as opposed to the white border feature already in that menu.

..any other tips?

**jscheuer1** · 04-01-2007, 12:08 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<style type="text/css">


li {margin:0;padding:0}

.slidedoormenu{
list-style-type: none;
margin: 0;
padding: 0;
width: 181px; /* width of menu (don't forget to add border with below!) */
border-left: 8px solid #FFCA19; /* thick left border of menu */
}

.slidedoormenu li{
border-bottom: 1px solid #978f75; /* Gray border beneath each menu item */
}

.slidedoormenu li a{
background: white url(http://www.ewebs.com/dd/vstrip2.gif) repeat-y left top; /* Background image positioned to the left(v) top(h) corner initially */
font: 11px "Verdana","helvetica","Arial";
display: block;
color: black;
width: auto;
padding: 7px 0; /* Vertical (top/bottom) padding for each menu link */
text-indent: 8px;
text-decoration: none;
}

.slidedoormenu li a:visited, .slidedoormenu li a:active{
color: black;
}

.slidedoormenu li a:hover{
background-position: -387px 0; /* Shift background image horizontally 387px, or the start of the 2nd background image */
color: black;
}

.slidedoormenu li.lastitem, .slidedoormenu li.lastitem a{
border-bottom-width: 0; /* For last menu item within menu, remove bottom border */
}

.slidedoormenu li.lastitem a{
padding: 8px 0; /* increase vertical border of last menu link by 2px (default is padding: 7px 0) to account for removed border width */
}

</style>

<!--[if IE]>
<style type="text/css">
.slidedoormenu li a {
padding:4px 0!important;
}
.slidedoormenu li.lastitem {
margin-bottom:-19px;
}
</style>
<![endif]-->

<body>
<ul class="slidedoormenu">
<li><a href="http://www.dynamicdrive.com/">Your Yearbook</a></li>
<li><a href="http://www.dynamicdrive.com/">Browse Ideas</a></li>
<li><a href="http://www.dynamicdrive.com/style/" >How to Create</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">Prices</a></li>
<li class="lastitem"><a href="http://www.javascriptkit.com/domref/">Getting Started</a></li>
</ul>
</body>
</html>

**naftus** · 04-02-2007, 01:45 AM

thanks John.

Much appreciated.

Thread: Sliding doors vertical menu- IE white gap

Thread Tools

Search Thread

Sliding doors vertical menu- IE white gap

Bookmarks

Bookmarks

Posting Permissions