View Full Version : Sliding doors vertical menu- IE white gap

04-01-2007, 08:03 AM
re: Vertical Sliding Doors:

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:

Thankyou for your help

04-01-2007, 08:56 AM
There is a deliberate white border beneath each menu item. Try removing this line:

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

04-01-2007, 11:28 AM
i have completely removed this CSS line, and it makes no difference:

(as per the example)

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?

04-01-2007, 12:08 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

li {margin:0;padding:0}

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 */


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

<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>

04-02-2007, 01:45 AM
thanks John.

Much appreciated.