Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 327
  • Last Modified:

Problem with display change of <li> on hover

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;
}
</style>


<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>
</ul>
</div>


0
gdemaria
Asked:
gdemaria
  • 3
1 Solution
 
Mark StegglesWeb DeveloperCommented:
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

Regards,

Steggs
0
 
gdemariaAuthor Commented:
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!
0
 
gdemariaAuthor Commented:
I didn't mean its a surpise that you're right.  It was a surprise at what the solution is...

 Lol, just in case..
0
 
gdemariaAuthor Commented:
oops, forgot to close
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now