In the stylesheet (css file) there are classes as follows:


ul.navleft {
margin: 0;
padding: 0;
text-align: left;
vertical-align: middle;
}

li.navleft {
text-align: left;
list-style: none;
margin: 0;
padding: 0;
vertical-align: middle;
}

a.navleft_1 {
display: inline;
margin: 5 auto;
padding: 0;

color: #002C66;
font-size: 12px;
font-weight: bold;
font-family:Arial;
text-decoration: none;
vertical-align: middle;

}

a.navleft_1_hover {
display: block;
margin: 5 auto;
padding: 0;
background-image:url(images/gray_box.gif);
background-position: center center;
background-repeat: no-repeat;

color: #002C66;
font-size: 12px;
font-weight: bold;
font-family:Arial;
text-decoration: none;
vertical-align: middle;

a.navleft:link { text-decoration: none; }
a.navleft:visited{ text-decoration: none; }
a.navleft:hover { text-decoration: none; }
a.navleft:active { text-decoration: none; }

img.navleft {
border: solid 0px white;
}

}

Here is the part ofhtml file (created from the dynamic jsp file):


<!-- Start navigation left -->
<table class="main" border="1" cellpadding="0" cellspacing="0">
<tr>
<td class="main_column_left">
<div style="line-height: 1px; font-size: 1px; display: block; height: 4px;"> </div>
<ul class="navleft">
<li class="navleft_active"><a class="navleft_1" href="/de/1Home/" title="Home/qualy_web/8" onmouseover='this.className="navleft_1_hover"' onmouseout='this.className="navleft_1"'>
<img class='navleft' src='/arrow_2.gif'/>   Home</a></li>
<li class="navleft"><a class="navleft_1" href="/de/7News_x_Events/" title="News & Events/qualy_web/8" onmouseover='this.className="navleft_1_hover"' onmouseout='this.className="navleft_1"'>
<img class='navleft' src='/arrow_2.gif'/>   News & Events</a></li>
<li class="navleft"><a class="navleft_1" href="/de/8Karriere/" title="Karriere/qualy_web/8" onmouseover='this.className="navleft_1_hover"' onmouseout='this.className="navleft_1"'>
<img class='navleft' src='/arrow_2.gif'/>   Karriere</a></li>
</ul>
</td>
</tr>
</table>
<!-- End navigation left -->

There are two problems in IE browser:
- first, with gray mouseover effect: there is an extra space bellow the menu title on mouse over.
- If the display property is "inline" instead of "block" then there is no extra space but the gray background was only visible over the text part of the menu item and not to the end of the column.

In Firefox is working properly.

Thanks

Something like this should work for you:

.main
{
display: block;
}

.main ul,
.main li
{
padding: 0px;
margin: 0px;
list-style: none;
}

.main a:link,
.main a:visited,
.main a:active
{
display: block;
background: #CCC; /* or whatever color you want*/
height: 20px; /* set desired height */
line-height: 20px; /* increases the line-height of the text so that you can use vertical-align*/
vertical-align: middle; /*puts text in middle instead of top*/
}

.main a:visited:hover,
.main a:hover
{
display: block;
background: #CC0000; /*highlight color*/
height: 20px; /* set to desired height */
line-height: 20px; /* increases the line-height of the text so that you can use vertical-align*/
vertical-align: middle; /*puts text in middle instead of top*/
}

<div class="menu">
<ul>
<li><a href="#1">BUTTON ONE</a></li>
<li><a href="#2">BUTTON TWO</a></li>
<li><a href="#3">BUTTON THREE</a></li>
<li><a href="#4">BUTTON FOUR</a></li>
</ul>
</div>

* I threw this together real quick and didn't test, it may not be perfect but it should get you going in the right direction.