Supportnet / Forum / Webseiten/HTML
CSS - Darstellungsproblem beim FF
Frage
hallo,
ich habe ein mouseover-menü gebastelt mittels javascript (anderer zellenhintergrund bei mouseover) und css (linktext wird beim mouseover rechtsbündig ausgerichtet).
mein problem ist die unterschiedliche darstellung durch die browser:
mit dem IE funktioniert der gewünschte effekt -> linktext wird rechtsbündig ausgerichtet, "buttons" sind so wie sie sein sollen
mit dem FF funktioniert das zwar auch, nur wird beim mouseover die tabellenzelle um einige pixel breiter und höher, was shice aussieht :/
[u]der css-code:[/u]
[code]a.menue:hover {color:#000000; font-family:verdana; font-size: 13px; font-weight:bold; text-align:right; float:right; padding-left:8px; padding-right:8px; padding-top:3px; height:24px; width:136px; text-decoration:none;}[/code]
mit [b]text-align:right;[/b] funktioniert es im IE, nicht aber im FF, weshalb ich für den FF noch [b]float:right;[/b] ergänzt habe. dadurch wird der linktext dann zwar rechtsbündig, die zellengröße verändert sich aber unschön.
[u]der mouseover-code in der tabelle bzw. zelle:[/u]
[code]<td background=images/button1.gif width="136px" height="26px" onmouseover="this.style.backgroundImage=´url(images/button1a.gif)´" onmouseout="this.style.backgroundImage=´url(images/button1.gif)´"><a class="menue" href="#" onfocus="this.blur()" target="home">Home</a></td>[/code]
hat vielleicht jemand von euch ne idee, wie ich diesen unschönen effekt vermeiden könnte?
ich hab mal ne demo hochgeladen http://home.arcor.de/zischdings/demo/menue.htm
vielen dank für eure tipps
zischi
Antwort 1 von zischi
konnte das problem gerade selbst lösen durch verringern von breite und höhe des linkbereiches in der css-datei.
danke fürs zulesen ;-)
danke fürs zulesen ;-)
Antwort 2 von rfb
ohne den vollständigen Code zu kennen wäre Hilfe auch kaum möglich gewesen. Ich vermute aber etwas in Richtung Box-Model-Bug des IE (die Microsoft-Spezialisten haben einen Fehler beim Ausrechnen der Gesamtbreite/höhe aus
Übrigens: du kannst den Hintergrundwechsel sehr gut mittels CSS machen, JavaScript ist dafür nicht mehr nötig. Zumal dein JavaScript sogar explizit die CSS-Eigenschaften ändert.
Einfach beim a:hover die Angaben zu
Und den Normalzustand bei <a> und nicht bei <td> denn die Tabelle hat mit dem Link nix zu tun. Sowas solltest du strengstens trennen, um nicht über unerwartetes Browserverhalten zu stolpern.
margin+border+padding
eingebaut)Übrigens: du kannst den Hintergrundwechsel sehr gut mittels CSS machen, JavaScript ist dafür nicht mehr nötig. Zumal dein JavaScript sogar explizit die CSS-Eigenschaften ändert.
Einfach beim a:hover die Angaben zu
background-image
einfügen.Und den Normalzustand bei <a> und nicht bei <td> denn die Tabelle hat mit dem Link nix zu tun. Sowas solltest du strengstens trennen, um nicht über unerwartetes Browserverhalten zu stolpern.