Netscape, <button> + Grafik = Grafik verschoben

[der Udo]

<Hallo>

Ich habe eine Button mit der Grösse 468x60 erstellt, in dem ein Banner angezeigt werden soll.
Klappt auch prima, zumindest mit IE.
Netscape (thüpisch) macht dabei leider Probleme, der Banner im Button ist nach unten verschoben, was ziemlich besch.... aussieht.

Hier mal der Code, vllt. hilft das mehr als alle Worte von mir (nicht wundern, ist in PHP eingebettet)

<form>
    <button name="klick" type="button"
    style="width: 468; height:60; background-color: #FFCC00; border-style:none; border-color: #CC9900; color: #0000FF; cursor : hand " onClick="window.open('$exdat$link[0]','_blank','toolbar=yes,location=no,status=yes,menubar=yes,scrollbars=yes,resizable=yes')">
    <div align="top"><img src="tkclogo.gif" width="468" height="60" border="0" alt="$name"></div>
    </button>
    </form><br>

Hab also alles, was ich weiss, mit <div align=...> ausprobiert. Auf SelfHTML find ich leider nix, was die Ausrichtung von Grafiken in Buttons betrifft.

<hoffnung> Vielleicht wird ja jemand aus meinen Kauderwelsch schlau und kann mir ´nen Tip geben :) </hoffnung>

Danke im Voraus für die Antworten :)

</hallo>

<tschüss>

Gruss

Udo
</tschüss>

[MudGuard]

Hi,

<Hallo>

Ich habe eine Button mit der Grösse 468x60 erstellt, in dem ein Banner angezeigt werden soll.
Klappt auch prima, zumindest mit IE.

Das war noch nie ein Anzeichen dafür, daß etwas korrekt ist.

Netscape (thüpisch) macht dabei leider Probleme, der Banner im Button ist nach unten verschoben, was ziemlich besch.... aussieht.

<form>
    <button name="klick" type="button\     style="width: 468; height:60; background-color: #FFCC00; border-style:none; border-color: #CC9900; color: #0000FF; cursor : hand "

Du gibst keine gültigen Werte für Breite und Höhe an. Längenangaben in CSS, die einen Wert ungleich 0 haben, MÜSSEN eine Längeneinheit haben.

»»onClick="window.open('$exdat$link[0]','_blank','toolbar=yes,location=no,status=yes,menubar=yes,scrollbars=yes,resizable=yes')">

<div align="top"><img src="tkclogo.gif" width="468" height="60" border="0" alt="$name"></div>
    </button>
    </form><br>

Das div ist überflüssig.
Abgesehen davon, align im div kennt den Wert top garnicht.
Setze für den Button (und für das img) margin und padding (da könnten die Browser verschiedene Voreinstellungen haben. Außerdem noch das vertical-align fürs img ...
cu,
Andreas

[Axel Richter]

Hallo,

Ich habe eine Button mit der Grösse 468x60 erstellt, in dem ein Banner angezeigt werden soll.
Klappt auch prima, zumindest mit IE.
Netscape (thüpisch) macht dabei leider Probleme, der Banner im Button ist nach unten verschoben, was ziemlich besch.... aussieht.

Die hauptsächliche Ursache für die Verschiebung im NN7.0 ist, meiner Meinung nach, wirklich ein Fehler von Netscape. Das Bild wird nach unten verschoben, wenn zwischen dem eröffnenden Tag <button> und dem Tag <img> eine Zeilenschaltung erfolgt. Vergleiche:

<form action="" method="post">
<button value="klick" name="klick" type="button" style="width:468px; height:60px; border:3px solid black; padding:0;">
<img src="bilder/HAWAII.JPG" alt="bild" style="width:468px; height:60px; border:0; margin:0;"></button>
</form>

Wenn Diese Zeilenschaltung nicht erfolgt, wird das Bild nicht ganz soweit nach unten verschoben. Vergleiche:

<form action="" method="post">
<button value="klick" name="klick" type="button" style="width:468px; height:60px; border:3px solid black; padding:0;"><img src="bilder/HAWAII.JPG" alt="bild" style="width:468px; height:60px; border:0; margin:0;"></button>
</form>

Trotzdem ist da, nur bei NN7.0, im Button noch ein oberer und linker Randbereich, der weder Padding im Button noch Margin vom Image ist.

Tipp:
Wenn der Button _nur_ das Fenster öffnen sollte, mach aus dem Image einen normalen Link, der das tut (href="URLdesFensters" onclick="window.open()").

Wenn der Button wirklich das Formular abschicken sollte, nimm ein <input type="image" ...>

Gruß

Axel

PS: style="cursor:hand;" geht _nur_ im IE. Für IE _und_ Mozilla-Browser muss das so aussehen: style="cursor:pointer; cursor:hand;". Opera6.x macht es gar nicht. Das ist noch etwas, was für die Lösun mit dem normalen Link spricht.