Hey,

Please have a look at my site: http://www.timokleemann.com

Check out the main menu at the top right corner. When you select a menu page
,
there should appear a blue bar just beneath it and it works just fine in
Mozilla and Safari. In IE6, however, the bar is not there and I can't figure
out why.

This is the HTML:

<div id="nav">
<ul>
<li><a href="index.php?page=home">Home</a></li>|
<li><a href="index.php?page=about">About</a></li>|
<li><a href="index.php?page=photos">Photos</a></li>|
<li><a href="index.php?page=links">Links</a></li>|
<li><a href="index.php?page=contact">Contact</a></li>
</ul>
</div>



And this is the CSS:

#nav {
width: 700px;
margin-right: auto;
margin-left: auto;
text-align: right;
}

#nav #current {
border-bottom: 5px solid #308bd9;
}

#nav ul{
margin: 0;
padding: 0;
padding-top: 13px;
list-style-type: none;
color: #808080;
}

#nav li {
display: inline;
}

#nav a:link,
#nav a:visited {
color: #000000;
font-weight: bold;
margin: 0 1em;
text-decoration: none;
padding-bottom: 6px;
}

#nav a:hover,
#nav a:focus {
border-bottom: 5px solid #8bcbff;
}


How can I make this work in IE?

I haven't come across that before. I have an answer, more by trial and
error, rather than knowing why.

If you insert a <br style="clear: both;" /> after the nav </ul> (see
below) the blue lines should appear on hover in PCIE6.

I think there must be a difinitive reason and a solution. Maybe someone
can answer that.



<div id="nav">

<ul>
<li><a href="index.php?page=home">Home</a></li>|
<li><a href="index.php?page=about">About</a></li>|
<li><a href="index.php?page=photos">Photos</a></li>|
<li><a href="index.php?page=links">Links</a></li>|
<li><a href="index.php?page=contact">Contact</a></li>
</ul>
<br style="clear: both;" />
</div>







Tintin81 wrote:

> Hey,
>
>  Please have a look at my site: http://www.timokleemann.com
>
>  Check out the main menu at the top right corner. When you select a menu p
age,
> there should appear a blue bar just beneath it and it works just fine in
> Mozilla and Safari. In IE6, however, the bar is not there and I can't figu
re
> out why.
>
>  This is the HTML:
>
>  		<div id="nav">
>  			<ul>
>  				<li><a href="index.php?page=home">Home</a></li>|
>  				<li><a href="index.php?page=about">About</a></li>|
>  				<li><a href="index.php?page=photos">Photos</a></li>|
>  				<li><a href="index.php?page=links">Links</a></li>|
>  				<li><a href="index.php?page=contact">Contact</a></li>
>  			</ul>
>  		</div>
>
>
>
>  And this is the CSS:
>
>  #nav {
>  	width: 700px;
>  	margin-right: auto;
>  	margin-left: auto;
>  	text-align: right;
>  }
>
>  #nav #current {
>  	border-bottom: 5px solid #308bd9;
>  }
>
>  #nav ul{
>  	margin: 0;
>  	padding: 0;
>  	padding-top: 13px;
>  	list-style-type: none;
>  	color: #808080;
>  }
>
>  #nav li {
>  	display: inline;
>  }
>
>  #nav a:link,
>  #nav a:visited {
>  	color: #000000;
>  	font-weight: bold;
>  	margin: 0 1em;
>  	text-decoration: none;
>  	padding-bottom: 6px;
>  }
>
>  #nav a:hover,
>  #nav a:focus {
>  	border-bottom: 5px solid #8bcbff;
>  }
>
>
>  How can I make this work in IE?
>
>
>

Works great! Thanks a lot!!!