Probleme in Netscape 7: Mouseover-Buttons

[Mark]

Hallo,

ich habe gemäß des Tipps "Mouseover-Buttons und -Effekte mit CSS" Mouseover-Buttons mit Hintergrundbildern erstellt.

Mein CSS sieht so aus:

a.buttonleft{
 height: 30px;
 width: 130px;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12;
 color: #FFFFFF;
 text-decoration: none;
 padding: 7px 5px 5px 15px;
 text-align: left;
 background-image: url(./pics/bgleft.gif);
 background-repeat: no-repeat;
 background-position: 0px 0px;

}

a.buttonleft:hover{
 text-decoration: none;
 background-image: url(./pics/bglefton.gif);
 background-repeat: no-repeat;
 background-position: 0px 0px;

}

Im IE 6 und im Opera 5 klappt das alles problemlos,
der Netscape 7 zeigt aber den Hintergrund der Buttons nur soweit an, wie die Schrift im Link geht:

<table border="1" cellpadding="0" cellspacing="0" align="left" width="130">
 <tr><td height="30" width="130"><a href="test.php" class="buttonleft">Button 1</a></td></tr>
 <tr><td height="30" width="130"><a href="index.php" class="buttonleft">Button 2</a></td></tr>
</table>

An was kann das liegen?

[Cheatah]

Hi,

Im IE 6 und im Opera 5 klappt das alles problemlos,

ja, diese Browser sind bekanntermaßen grob fehlerhaft. Opera allerdings nur, weil er sich stark am IE orientiert.

der Netscape 7 zeigt aber den Hintergrund der Buttons nur soweit an, wie die Schrift im Link geht:

Natürlich, das Element ist schließlich nur so groß. Da es gemäß Deiner Angaben ein Inline-Element ist, müssen die width- und height-Angaben ignoriert werden. Wäre der IE nicht im Quirks-Mode, würde selbst er diese einfache Regel beachten. Beende den Quirks-Mode, verändere den display-Typus der betroffenen Elemente.

<table border="1" cellpadding="0" cellspacing="0" align="left" width="130">

Zuallererst korrigiere die völlig widersinnige Struktur Deines HTML-Dokuments. Du hast augenscheinlich keine tabellarischen Daten vorliegen, also existiert keine Rechtfertigung für den Einsatz einer Tabelle. Zudem wette ich mit Dir, dass Du keine einzige Klasse brauchst, bzw. allerhöchstens eine. Beschäftige Dich mit semantischem Markup - *bevor* Du CSS einsetzt.

Cheatah

[Mark]

Natürlich, das Element ist schließlich nur so groß. Da es gemäß Deiner Angaben ein Inline-Element ist, müssen die width- und height-Angaben ignoriert werden. Wäre der IE nicht im Quirks-Mode, würde selbst er diese einfache Regel beachten. Beende den Quirks-Mode, verändere den display-Typus der betroffenen Elemente.

Ich habe nun die Tabelle rausgemacht (war nur ein Versuch wegen des Netscape Problems) und habe display:block; hinzugefügt.
Nun werden die Buttons in der korrekten Breite und Höhe angezeigt, jedoch ist der Vertikale Abstand zwischen den Buttons im Netscape leider nicht 0. Wie bekomm ich das denn hin?

»»Beende den Quirks-Mode
Was ist das, bzw wie mach ich das denn?

[Jens Holzkämper]

Tach,

Nun werden die Buttons in der korrekten Breite und Höhe angezeigt, jedoch ist der Vertikale Abstand zwischen den Buttons im Netscape leider nicht 0. Wie bekomm ich das denn hin?

das werden wohl margin und/oder padding sein.

»»Beende den Quirks-Mode
Was ist das, bzw wie mach ich das denn?

Das ist hier erklärt: http://de.selfhtml.org/css/formate/box_modell.htm.

mfg
Woodfighter

[Mark]

das werden wohl margin und/oder padding sein.

Der Abstand im Netscape will einfach nicht weg, egal ob Quirks oder Standard-Modus.
Im Standard-Modus zeigt der IE allerdings auch die Abstände, der Netscape in beiden.
Ich hab gelesen dass im Standardmode die Bilder Inlineelemente sind.
Als Lösung war in der css auch ein Display:block für img angegeben, hat aber nicht geholfen.

Kann mir jemand nen CSS-Code geben, mit dem es auch in Netscape geht?
Danke!

[Jens Holzkämper]

Tach,

Der Abstand im Netscape will einfach nicht weg, egal ob Quirks oder Standard-Modus.

dann hast du es noch nicht ganz richtig gemacht, zeige doch einmal ein Beispiel her, dann können wir dir sicher weiterhelfen (Der einzige mit einer funktionierenden Kristallkugel scheint im Moment Gernot zu sein, und der kann nicht überall helfen.). Falls du den Fehler selber finden willst, hilft meist eine Border um die betroffenen Elemente, dann sieht man meist schon etwas mehr.

Ich hab gelesen dass im Standardmode die Bilder Inlineelemente sind.

Bilder sin standardmäßig erstmal replaced inline Elemente, das ist richtig.

Als Lösung war in der css auch ein Display:block für img angegeben, hat aber nicht geholfen.

Das ist häufig eine gute Idee, sollte für dein Anliegen aber unnötig sein.

mfg
Woodfighter

[MudGuard]

Hi,

a.buttonleft{
height: 30px;
width: 130px;

beim default-Wert der display-Eigenschaft müssen diese Werte ignoriert werden.

font-family: Arial, Helvetica, sans-serif;
font-size: 12;

Unsinniger Wert.

text-align: left;

Ebenfalls wirkungslos für inline.

Im IE 6 und im Opera 5 klappt das alles problemlos,

Das täuscht. Die beiden bauen Mist, weil sie width/height interpretieren, obwohl sie es nicht dürften.

der Netscape 7 zeigt aber den Hintergrund der Buttons nur soweit an, wie die Schrift im Link geht:

also vollkommen korrekte Umsetzung des gegebenen HTML/CSS.

cu,
Andreas