Hi guys,
I’m having a problem with my Hyperlinks/Navigation buttons in my header area of my Site. I just can’t figure out what the problem is here. The problem shows up in IE, although the navi buttons seem to have moved by about 1px (when hovering) in Opera.
Much gratefulness in advance!
a partial doctype!
How on earth did I get a partial doctype in my html? Strange. Thank you Paul O’B for pointing that out.
I just tried the different doctypes. Mixed results. In IE I get the hovering effect now, which is great! Thanks Paul O’B. Unfortunately the positioning of the main links is sitting too deep.
And I’ve still got the same problem in Opera.
Can anyone throw me some light?
This problem is really bugging me.
When I choose a serif or IE uses the default font instead of the Georgia or Times-New-Roman then there is no problem with the hover effect.
Surely the problem isn’t the font Georgia?
The problem is that you are using a partial doctype that triggers quirks mode in all versions of IE and makes it behave much like IE5.
Use this doctype instead:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
or preferably:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
That should fix the issue.
Hi sorry we missed your post.
Can you clarify what is happening to you on hover?
I looked in IE8 and IE7 and they seem to hover ok.
Ok I was looking at the little links but you mean the large text don’t you? Hold on I’ll get back to you.
Or should I be writing specific code just for IE?
Any help would be awesome.
That’s a great help there Paul O’B! - I’m obviously a beginner at programming 
That definetly makes sense, what you said about the sizes in my header. em will change depending on browser. Thanks for the tip there. I’ll have another go at that and give all my settings an exact measurement in px.
I was of the understanding though, that I couldn’t put a <h1> inside a <ul> or <ol>. Therefore I changed it round. What should I do with the header tag then?
I’m also not sure what the bare anchors are?
I must say, that’s a great help you have given me. I’ll have a tidy up of the code - defo!
Hi,
You are trying to make your navigation fit by approximating the heights which will never work. You are assuming that 2.5em fontsize plus line-height plus border, padding and margin will equal 131px to match the header. That’s a lot of assumptions 
Ems are rounded up and down and the size of fonts and the line height will always vary between browsers so you can’t use that approach.
Juts make the navigation the exact height you want to fit into that 131px header. As you want it 65px from the top then make it 66px high.
Also you can’t put a ul inside an h1 as that is not valid and there is no need for the two other divs around the links.
Lastly don’t place bare anchors next to each other or screen readers read it without pausing because thy think its a sentence.
Revised html.
<div id="headerbild">
<div id="header-container">
[B]<ul id="navigationleft">
<li><a href="index.html">Design</a></li>
<li><a href="downloads.html">Downloads</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>[/B]
<div id="header_rechts">
Revised css:
#navigationleft {
width: 410px;
float: left;
text-align: left;
margin:0 0 0 30px;
display: inline;
font-size: 2.5em;
word-spacing: 0.2em;
padding:65px 0 0;
font-family: 'Georgia', Times-New-Roman, Times, serif;
height:66px;
overflow:hidden
}
#navigationleft li {
float:left;
height:66px;
line-height:40px;
}
#navigationleft a:link, #navigationleft a:visited{
color: #ffffff;
text-decoration: none;
position:relative;
float:left;
padding:0 5px 0;
height:66px
}
#navigationleft a:hover {
background: #660000;
text-decoration: none;
}
Also interfering with this code is the fact that you have redefines the a;visited links about half a dozen times in error.
You have this:
#footer-navigation a:hover,[B] a:focus[/B], [B]a:active[/B] {
display: inline;
color: #ffffff;
text-decoration: underline;
line-height: 1.5em;
}
#footer-navigation a:hover,[B]#footer-navigation a:focus,#footer-navigation a:active[/B] {
display: inline;
color: #ffffff;
text-decoration: underline;
line-height: 1.5em;
}
You’ve done that in a number of places so tidy it up and the nav code will now work (tested in ie6 - 8, opera safari and Firefox.)
[edit]
Looking at the deign I think maybe you wanted the nav links in line with the logo on the right so these would be the dimensions instead.
#navigationleft {
width: 410px;
float: left;
text-align: left;
margin:0 0 0 30px;
display: inline;
font-size: 2.5em;
word-spacing: 0.2em;
[B] padding:56px 0 0;[/B]
font-family: 'Georgia', Times-New-Roman, Times, serif;
[B] height:75px;[/B]
overflow:hidden
}
#navigationleft li {
float:left;
[B] height:75px;[/B]
line-height:40px;
}
#navigationleft a:link, #navigationleft a:visited{
color: #ffffff;
text-decoration: none;
position:relative;
float:left;
padding:0 5px 0;
[B] height:75px[/B]
}
#navigationleft a:hover {
background: #660000;
text-decoration: none;
}
[edit]
You can put anything you like in side a “li” element as it is a container for anything (even nested uls). However your navigation isn’t a header so you don’t need an H1 for it.
Use the h1 for your main page title.
I’m also not sure what the bare anchors are?
I mean when one closing anchor runs straight into another opening one like this:
<a href=“#”>This</a> <a href=“#”>and</a> <a href=“#”>this</a>
The accessibility guidelines state that anchors should be separated by more than white space.