Dreamweaver - Border beneath Menu button

Author

Border beneath Menu button

Tintin81

2006-02-28, 6:21 pm

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?

Osgood

2006-02-28, 6:21 pm

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 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?
>
>
>

Tintin81

2006-02-28, 6:22 pm

Works great! Thanks a lot!!!