Supportnet Computer
Planet of Tech

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 ;-)

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
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.

Ich möchte kostenlos eine Frage an die Mitglieder stellen:


Ähnliche Themen:


Suche in allen vorhandenen Beiträgen: