Zur Navigation

Höhe der Tabelle beim Mouseover beibehalten

1 Tilman

Hallo!

Ich habe ein Problem mit dem Menü meiner Webseite.
Hier der Teil des Codes der Webseite:

<tr><td valign="middle" width="900" colspan="2" class="mainmenuetr" height="25">
<table border="0" cellspacing="0" cellpadding="0" id="mainmenue" height="25"><tr>

<!-- Hauptmenue -->
				<td id="mainpoint"><a href="index.html">Home</a></td>
                                 <td id="mainpoint"><a href="buecher/index.html">B&uuml;cher</a></td>
                                 <td id="mainpoint"><a href="filme/index.html">Filme</a></td>
                                 <td id="mainpoint"><a href="musik/index.html">Musik</a></td>
                                 <td id="mainpoint"><a href="musik/radio/sender.html">Radiosender</a></td></tr></table>
<!-- Hauptmenue ende -->
</td></tr>

Hier ein Teil des Codes aus dem CSS-Dokument:
#mainpoint {height: 25px; border-left:solid 0px lightgrey; border-right:solid 1px lightgrey;
	    padding-left: 0px;padding-right: 0px; padding-bottom: 0px; padding-top:0px;
margin-left: 0px;margin-right: 0px; }

#mainmenue {padding-left: 0px;padding-right: 0px; padding-bottom: 0px; padding-top:0px;
margin-left: 0px;margin-right: 0px; height: 25px;
}

#mainmenue a, #mainmenue a:visited , #mainmenue a:active {
color:#000000;
text-decoration:none ;font-family:arial; font-size: 15px;
padding-left: 10px;padding-right: 10px; padding-bottom: 5px; padding-top:5px;
margin-left: 0px;margin-right: 0px;
}



#mainmenue a:hover {background-image:url(../images/testtt.gif); color:#000000; text-decoration:none ;
padding-left: 10px;padding-right: 10px; padding-bottom: 5px; padding-top:5px;
border-left:solid 0px #fff;
border-bottom:solid 0px #fff;
border-top:solid 0px #fff; height: 100%;
}

.mainmenuetr
		{	background-image:url(../images/mainmenue_bg.gif);
			}

Mein Problem ist, dass wenn man auf einen Link klickt, dass (bei Internet Explorer) die Tabelle immer etwas höher wird, und so der untere Inhalt nach unten rutscht. (Geht man vom Link wieder runter, so rutscht der Inhalt wieder ein Stück nach oben.)


Tilman

01.12.2007 15:48

2 Jörg Kruse

Hallo Tilman,

es handelt sich hierbei wohl um einen Bug des Internet Explorer 6, in der Version 7 tritt dieses Problem nicht mehr auf. Die Fehlanzeige scheint durch die Höhenagabe 100% verursacht zu werden - wenn diese auskommentiert ist, zappelt der IE 6 nicht mehr beim Hover:

#mainmenue a:hover {background-image:url(../images/testtt.gif); color:#000000; text-decoration:none ;
padding-left: 10px;padding-right: 10px; padding-bottom: 5px; padding-top:5px;
border-left:solid 0px #fff;
border-bottom:solid 0px #fff;
border-top:solid 0px #fff;height: /*100%; */
}

01.12.2007 16:09 | geändert: 01.12.2007 16:09

3 Tilman

Vielen Dank, dass du so schnell auf meine Frage geantwortet hast!

Aber jetzt habe ich ein anderes Problem:

Als Hintergrund ist ja die Grafik mainmenue_bg.gif eingestellt.
Wenn man auf einen Link fährt, überdeckt die Grafik testtt.gif den Hintergrund in der jeweiligen Zelle des Links.

Jeddoch überdeckt die Grafik (wieder nur im Internet Explorer) den Hintergrund nicht ganz. Oben sieht man immer noch ein Teil des Hintergrundes.

Kannst du (jemand anders) mir da helfen?

01.12.2007 16:20

4 Jörg Kruse

Eigentlich behandelst du die Links hier ja als Blockelemente, wenn du z.B. ein padding zuweist. Der IE benötigt hierzu wohl noch eine spezielle Ansage. Füge diese Eigenschaft mal noch bei den Links hinzu (mit und ohne Hover)

#mainmenue a, #mainmenue a:visited , #mainmenue a:active {
display:block;
/* sonstige Eigenschaften */
}

#mainmenue a:hover {
display:block;
/* sonstige Eigenschaften */
}

Gegebenenfalls musst du dann noch die Höhe anpassen. Aber der IE und die anderen Browser sollten sich dann gleich verhalten

PS: in deinem Code steht mehrmals die id="mainpoint" - eine ID darf aber nur einmal verwendet werden - besser wäre hier die Einführung einer Klasse class="mainpoint" o.ä.

01.12.2007 17:28

5 Tilman

Danke!

Nun funktioniert alles einwandfrei!

01.12.2007 18:04

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]