Forum Moderators: open
And below, the code in question: I hope I have posted this properly and thanks in advance.
Wayne
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<div id="leftcolumn">
<div id="navcontainer">
<ul>
<li id="active"><a href="#"></a><a href="index.html">Home</a></li>
<li><a href="#"></a><a href="mailto:wayne@example.com">Contact</a></li>
<li><a href="#"></a><a href="linktestpage.html">About Us</a></li>
<li><a href="#"></a><a href="linktestpage.html">Service</a></li>
<li><a href="#"></a><a href="linktestpage.html">Processors</a></li>
<li><a href="#"></a><a href="linktestpage.html">Microphones</a></li>
<li><a href="#"></a><a href="linktestpage.html">Consoles</a></li>
<li><a href="#"></a><a href="linktestpage.html">Monitors</a></li>
<li><a href="#"></a><a href="linktestpage.html">Speakers</a></li>
<li><a href="#"></a><a href="linktestpage.html">Pro-Tools</a></li>
<li><a href="#"></a><a href="linktestpage.html">Mixers</a></li>
<li><a href="#"></a><a href="linktestpage.html">Software</a></li>
<li><a href="#"></a><a href="linktestpage.html">Outboard</a></li>
<li><a href="#"></a><a href="linktestpage.html">Effects</a></li>
<li><a href="#"></a><a href="linktestpage.html">dummy link</a></li>
<li><a href="#"></a><a href="linktestpage.html">dummy link</a></li>
<li><a href="#"></a><a href="linktestpage.html">dummy link</a></li>
<li><a href="#"></a><a href="linktestpage.html">dummy link</a></li>
<li><a href="#"></a><a href="linktestpage.html">dummy link</a></li>
<li><a href="#"></a><a href="linktestpage.html">dummy link</a></li>
</ul> </div>
-------------------------------
CSS:
div#leftcolumn {
padding: 2%;
float: left;
text-align: center;
background-color: #336699;
color: #232e3c;
border-right: solid #003366 medium;
width: 15.5%;
}
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: smaller;
}
#navcontainer li
{
margin: 0em 0em .4em 0em;
}
#navcontainer a
{
display: block;
color: #232e3c;
background-color: #517ec1;
width: 10em;
padding: .0em .8em;
border: .08em #003366 solid;
text-decoration: none;
font-style: italic; }
#active a
{
display: block;
color: #ffffff;
background-color: #517ec1;
width: 10em;
padding: .0em .8em;
border: .08em #003366 solid;
text-decoration: none;
font-style: italic; }
#navcontainer a:hover
{
background-color: #0033ff;
color: #FFF;
}
[edited by: encyclo at 11:57 pm (utc) on Dec. 22, 2007]
[edit reason] obscured email address [/edit]
What is the purpose of the first empty anchor tag within each <li>? This bit I mean -
<li><a href="#"></a><a href="linktestpage.html">About Us</a></li>
The relevant style is this as far as I can see -
#navcontainer a
{
display: block;
color: #232e3c;
background-color: #517ec1;
width: 10em;
padding: .0em .8em;
border: .08em #003366 solid;
text-decoration: none;
font-style: italic; }
Which puts a border around the anchor tag and sets it to display: block. I think what is happening is that IE decides to make this empty tag a character high - looking at it in Firefox (Windows) it does seem to be rendered too, but the box there is only as high as the padding applied by the style.
Thank you for you help. Does that mean that I should remove (<a href="#"></a>)? There used to be a "span" in there and I removed it which made no difference but I guess I didn't remove the whole thing.
I'll go and study what you posted. Thank you and as I said, I'm new at this so please bear with me.
Wayne
Wayne
That fixed it. It takes me a while because I had to find someone to view it for me as I'm on a Mac. and for now don't have the tools to view IE:6/7 so thanks again.
Wayne
Wayne
