Hover-Buttons funktionieren nicht?

[haiyyu]

Hi,
ich habe ein kleines Problem.
Und zwar habe ich folgenden CSS Code:

body { 
    background-color: #eeeeee; 
    font-size: 90%; 
    font-family: Arial; 
    margin: 0px; 
    cursor: default; 
} 
 
#headerMain { 
    border-left: 1px solid black; 
    border-right: 1px solid black; 
    border-top: 1px solid black; 
    width: 70%; 
    background-color: #ffffff; 
    height: 128px; 
} 
 
#naviMain { 
    width: 70%; 
    height: 28px; 
    border: 1px solid black; 
    background-image: url("http://www.html.de/images/naviButton.png"); 
} 
 
.naviButton { 
    display: block; 
    float: left; 
    width: auto; 
    padding: 7px; 
    border-right: 1px solid black; 
    text-decoration: none; 
    height: 14px; 
    background-image: url("http://www.html.de/images/naviButton.png"); 
    color: black; 
} 
 
.naviButton:hover { 
    display: block; 
    float: left; 
    width: auto; 
    padding: 7px; 
    border-right: 1px solid black; 
    text-decoration: none; 
    height: 14px; 
    background-image: url("http://www.html.de/images/naviButtonHover.png"); 
    color: white; 
    cursor: pointer; 
} 
 
#contentMain { 
    width: 70%; 
    border-bottom: 1px solid black; 
    border-left: 1px solid black; 
    border-right: 1px solid black; 
    background-color: #ffffff; 
} 
 
#contentText { 
    text-align: left; 
    width: 100%; 
    padding: 3px; 
}

Die CSS-Datei importiere ich so:

<style type="text/css">
 @import url("style.css")
</style>

Dann habe ich noch folgenden Code für die Hover Buttons:

                <a href="?page="><div class="naviButton">Home</div></a>
                <a href="?page=settings"><div class="naviButton">Optionen</div></a>
                <a href="?action=logout"><div class="naviButton">Ausloggen</div></a>

Jedoch verändert sich das Hintergrundbild nicht, wenn ich mit der Maus drüberfahre. Die beiden Bilddateien existieren... Wisst ihr, woran das liegt? (Bitte sagt jetzt nicht, dass man für eine Navigation besser das und das benutzen sollte oder so)

Das komische daran ist, dass ich auf einer anderen Seite die komplett selbe Methode verwende und es funktioniert: ComVBS

 

[prm]

definiere mal so:

a.naviButton:link {Styleangaben}

a.naviButton:hover  {Styleangaben}

Dann verwende als width-Wert den der Grafiken anstelle von "auto".

Ferner:

<a href="?page=" class="naviButton">Home>/a>

 

[neuroleptika]

Zeige besser das Beispiel in dem es nicht funktioniert.
Dein Codeschnipsel funktioniert soweit.

Im IE6 kann das nicht klappen. Er kennt :hover nur für a.
Schreibe:

a:hover .naviButton {
...
}

Blockelemente dürfen nicht in inline-elementen stehen.
verwende span anstelle div.

Edit:
Oh prm,
Ich habe deine Antwort überlesen.

Dann verwende als width-Wert den der Grafiken anstelle von "auto".

Für dies Art von Grafiken nicht.
Die Grafiken aus dem online-Beispiel sind nur 1px breit.

Ansonsten hast du natürlich recht. Er braucht kein weiteres Element in a.