Problem with display change of <li> on hover

Posted on 2007-08-10
Last Modified: 2012-06-22
Below is a simple script that shows some "tabs" or a single menu row.   For some reason I am unable to get the hover color take up the entire <li> block.   The hover is light blue, the tab is dark blue.  When I hover over the <li> tag, the dark blue area changes to light blue except for a few pixels on the side.  I cannot figure out how to get rid of these pixels of dark blue.  When hovering over, I would like the entire tab to change to light blue.   In IE, the few pixels appear on the right, in Firefox they appear on the left.

<style type="text/css">
ul.pageTab {
 padding-bottom: 5px;
 padding-top: 5px;
 padding-left: 0;
 margin-top: 0;
 /* cancels gap caused by top padding in Opera 7.54 */
 margin-left: 0;
 color: white;
 font-family: Arial,Helvetica,sans-serif;
 line-height: 18px;
 text-align: left;
 width: 100%;

ul.pageTab li {
 display: inline;
 padding-left: 0;
 padding-right: 0;
 padding-bottom: 5px;
 /* matches link padding except for left and right */
 padding-top: 5px;
 border-right: 3px solid #fff;
 background-color: #036;

ul.pageTab li a {
 padding-left: 10px;
 padding-right: 10px;
 padding-bottom: 5px;
 padding-top: 5px;
 color: white;
 text-decoration: none;

ul.pageTab li a:hover, ul.pageTab li.current a {
 background-color: #369;
 color: white;

<div id="xxxxx">
<ul class="pageTab">
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li class="current"><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>

Question by:gdemaria
    LVL 30

    Accepted Solution

    Hello gdemaria,

    The space in IE is caused by whitespace in your html, format like this

    <li><a href="#">Item one</a></li
    ><li><a href="#">Item two</a></li
    ><li class="current"><a href="#">Item three</a></li
    ><li><a href="#">Item four</a></li
    ><li><a href="#">Item five</a></li></ul>

    I dont see the problem in firefox, if you still do... then try to use a strict doctype, and add * {padding:0;margin:0;} to your styles


    LVL 39

    Author Comment

    Wow, that's a surprise.  You're absolutely right.

    I never suspected that because the color attribute is assigned to LI or <A> which are both closed.   That space is AFTER the </li> which means the background color should have stopped at that point, shouldn't it?  

    Thanks for your help steggs!
    LVL 39

    Author Comment

    I didn't mean its a surpise that you're right.  It was a surprise at what the solution is...

     Lol, just in case..
    LVL 39

    Author Comment

    oops, forgot to close

    Featured Post

    Why You Should Analyze Threat Actor TTPs

    After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

    Join & Write a Comment

    Suggested Solutions

    As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
    CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
    In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
    In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …

    734 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    21 Experts available now in Live!

    Get 1:1 Help Now