Can anyone help with an issue I'm having with a CSS ul list menu?
#header-container #header ul.top-nav
{
float: left;
margin: 20px 0 20px 10px;
}
#header-container #header ul.top-nav li
{
float: left;
margin-right: 8px;
border-right: 1px solid #008cd3;
line-height: 15px;
}
I've noticed that in IE6 and IE7, the margin-bottom on the ul element is only 19px. I tried adjusting it by removing the margin-bottom and setting a fixed height of 36px, which solved the alignment issue across different browsers. However, I'm not sure if this is considered a hack.
Has anyone else encountered this problem before?
<div id="header-container">
<div id="header">
<a href="/" class="logo">esPAY</a>
<ul class="top-nav">
<li><a href="">adam wright</a></li>
<li><a href="">Links</a></li>
<li><a href="">Help</a></li>
<li class="last"><a href="">Logout</a></li>
</ul>
<div id="TabStrip1" class="RadTabStrip RadTabStrip_esPay RadTabStripTop_esPay">
...menu code telerik..
/* Header */
header-container
{ width: 100%; margin-bottom: 10px; background: transparent url('Images/navbg.gif') top left repeat-x; height: auto; }
#header-container #header
{
width: 960px;
margin: auto;
position: relative;
}
/* Header / Logo */
#header-container #header a.logo
{
width: 200px;
height: 53px;
text-indent: -5000px;
background: url('Images/logo.gif') left top repeat;
position: absolute;
top: 20px;
right: 0;
}
/* Header / Top Navigation */
#header-container #header ul.top-nav
{
float:left;
margin: 20px 0 20px 10px;
}
#header-container #header ul.top-nav li
{
float: left;
margin-right: 8px;
border-right: 1px solid #008cd3;
line-height: 15px;
}
#header-container #header ul.top-nav li.last
{
border-right: none;
}
#header-container #header ul.top-nav li a
{
font-size: 1.2em;
color: #008cd3;
margin-right: 8px;
}
#header-container #header ul.top-nav li a:hover
{
text-decoration: none;
}