IE7 Bug - White Space in Menu

White space between bottom menu link and rounded corner image

[iorhael]

Hi...am new here. Usually I can figure out IE bugs just by googling, but this one has me stumped. I have a side menu with top and bottom rounded corner images. The menu looks fine in FF, IE8, Chrome, and Safari, but IE7 has a white space between the bottom link and the bottom rounded corner image that I cannot get rid of. I have tried a multitude of fixes but none work, and I'm needing to get this site finished up, so I'm hoping you guys can help me out ;)

Here's the site link: <>

And the code:

/*SubMenu - Services and Practitioners pages*/

#submenu {
width: 180px;
margin-left: 5px;
margin-bottom: 20px;
}

#submenu ul {
margin: 0;
padding: 0;
list-style-type: none;
}

#submenu li {
background-color: #ebc484;
margin: 0;
padding: 0;
padding-left: 10px;
padding-bottom: 3px;
line-height: 100%;

}

#submenu li.top { /* to add rounded top*/
margin: 0;
padding: 0;
background: transparent url(../images/submenu_top.gif) no-repeat;
width: 180px;
height: 14px;

}

#submenu li.bottom { /* to add rounded bottom*/
margin: 0;
padding: 0;
background: transparent url(../images/submenu_bottom.gif) no-repeat;
width: 180px;
height: 14px;
}

#submenu li a, #submenu li a:visited {
font: normal 13px 'Trebuchet MS', Arial, Helvetica, sans-serif;
text-align: left;
text-decoration: none;
color: #465c02;
}

#submenu li a:hover {
color: #fff;
}

#submenu ul ul {
margin: 0;
padding: 0;
}

#submenu li ul li { /*sub-sub menu*/
margin: 0;
padding: 0;
padding-left: 15px;
padding-bottom: 3px;
}

#submenu li ul li.first { /*to add space after first link*/
padding-top: 4px;
}

[edited by: SuzyUK at 10:28 pm (utc) on Dec. 18, 2009]
[edit reason] please no personal URL's per TOS, thanks [/edit]

[limbo]

Hi iorhael

Welcome to WebmasterWorld [webmasterworld.com] :)

Could you post up a little HTML snippet too? Minimised to the basic elements - Could be a number of things. My first thoughts were some inherent padding, line-height or inline display properties from another source in your CSS.

Post it up and we'll take a look.

[iorhael]

Limbo, Thanks for replying..here is the code for the menu:

<ul>
<li class="top"></li>
<li id="mass"><a href="services/massage.php">Massage Therapy</a>
<ul>
<li id="swed" class="first"><a href="services/swedish.php">Swedish Relaxation</a></li>
<li id="deep"><a href="services/deeptissue.php">Deep Tissue</a></li>
<li id="inj"><a href="services/injuryrehab.php">Injury Rehabiliation</a></li>
<li><a href="services/whattoexpect.php">What to Expect</a></li>
</ul></li>
<li id="cranio"><a href="services/craniosacral.php">Craniosacral Therapy</a></li>
<li id="zero"><a href="services/zerobalance.php">Zero Balancing</a></li>
<li id="accu"><a href="services/acupressure.php">Acupressure</a></li>
<li class="bottom"></li>
</ul>

[limbo]

I would try a different approach

I think it'd be better to apply the top image to the container #submenu and the bottom image the to background of the ul using background-position:bottom; and use some padding the same height as submenu_bottom.gif

That also means you can remove the empty list items.

Also ensure your HTML and CSS are validated and that you have 'reset [webmasterworld.com]' the browser defaults.

[iorhael]

That did the trick Limbo...thanks so much for helping me out!

[iorhael]

Limbo, I was wondering if you could help me with a similar issue on another site. I have made the same fix you suggested above to this menu on this site:

<snip>

However extra white space still shows up between the links in IE7.

Here's the code and html:

#menu {
float: left;
width: 150px;
background: transparent url(../images/menu_top.gif) no-repeat;
padding-top: 22px;
}

#menu ul {
list-style-type: none;
margin: 0;
padding: 0;
background: transparent url(../images/menu_bottom.gif) no-repeat bottom left;
padding-bottom: 22px;
}

#menu li {
margin: 0;
padding: 0;
background-color: #5e3c9b;
width: 150px;
border-bottom: 1px solid #fff;
}

#menu li.first { /*border for first link*/
border-top: 1px solid #fff;
}

#menu a {
display: block;
text-decoration: none;
text-align: left;
font: 11px Verdana, Arial, Helvetica, sans-serif;
color: #fff;
padding: 4px 0 4px 15px;
}

#menu a:hover {
background-color: #00a64b;
}

HTML:

<ul>
<li class="first" id="drk_home"><a href="index.php">Home</a></li>
<li id="about"><a href="about.php">About</a></li>
<li id="port"><a href="drk_portfolio/port_1.php">Portfolio</a></li>
<li id="svcs"><a href="services.php">Web Services</a></li>
<li id="plan"><a href="plan.php">Getting Started</a></li>
<li id="writ"><a href="writing.php">Content Writing</a></li>
<li id="rates"><a href="rates.php">Rates</a></li>
<li id="cont"><a href="contact.php">Contact</a></li>
</ul>

Thank you!

Examplified + No URL's please, see TOS [webmasterworld.com]

[edited by: limbo at 4:49 pm (utc) on Dec. 28, 2009]

[limbo]

Maybe float the list items and add display:block too. List items are inline by default, so can take on the browsers defaults for line-height.

[iorhael]

You did it again, Limbo! Thanks so much :) It looks just fine in all browsers now.

I was wondering why this forum snipped my web site link? I would think viewing sites would be important in a forum like this one. I hope you got to see the site and the menu before that happened.

[limbo]

We have a pretty fervent link policy here, to deter spammers, and ensure quality is as high as possible. Feel free to take a look at the Terms of Service, and if you have other questions, feel free to drop in. Masses of knowledge across the board.

[iorhael]

oops yeah..I figure it was something I hadn't read...my bad.