✔ Button läßt sich nicht < 19px stylen...

[stefancp]

Hi Leute,

hab mal wieder ein etwas merkwürdiges Problem...
ich habe per CSS-Datei einen Button erzeugt, der ein gif (40x13px) als background hat.
Mit borders rundherum sollte er dann 42x15px groß sein.
Soweit kein problem, aber die height-Angabe wird vom IE ignoriert und der Button 19px hoch angezeigt. Wenn ich im Style den height-Wert auf weniger als 19px setze, passiert nichts, aber sobald ich 20px oder mehr einstelle, wird der Button auch höher.

Hier ist mal der HTML-Tag:

<a class="prj_but_shw3" id="shw_zur_abs" href="#" onClick="show_zurück_abs()"></a>

und der Teil aus der CSS-Datei:

.prj_but_shw3:link, .prj_but_shw3:visited, .prj_but_shw3:active {
position: absolute;
left: 0px;
width: 40px;
margin-left: 407px;
top: 0px;
height: 13px;
margin-top: 491px;
display: block;
background: url('bilder/projekte/but02_rechts_0.gif') no-repeat;
border-left: 1px solid #E6E6E6;
border-top: 1px solid #E6E6E6;
border-right: 1px solid #323232;
border-bottom: 1px solid #323232;
z-index: 5;
}
 
.prj_but_shw3:hover {
background: url('bilder/projekte/but02_rechts_1.gif') no-repeat;
border-left: 1px solid #B6B6B6;
border-top: 1px solid #B6B6B6;
border-right: 1px solid #020202;
border-bottom: 1px solid #020202; 
}

Die Bilder sind definitiv nur 13px hoch, hab ich in diversen Grfx-Programmen getestet!

Weiß jemand, woran es liegen kann?

Gruß, Stefan

 

[Maik]

Ergänze das Stylesheet mit der CSS-Eigenschaft font-size:0, dann lässt sich der Link auch in der Höhe < 19px stylen.

.prj_but_shw3:link, .prj_but_shw3:visited, .prj_but_shw3:active {
position: absolute;
left: 0px;
width: 40px;
margin-left: 407px;
top: 0px;
height: 13px;
margin-top: 491px;
display: block;
background: url('bilder/projekte/but02_rechts_0.gif') no-repeat;
border-left: 1px solid #E6E6E6;
border-top: 1px solid #E6E6E6;
border-right: 1px solid #323232;
border-bottom: 1px solid #323232;
z-index: 5;
font-size: 0;
}

[editpost]

Wenn die Buttons einen Text enthalten sollen, dann muß die Schriftgröße natürlich entsprechend skaliert werden, z.B. font-size:10px.

 

[stefancp]

Hi Michaelsinterface,
danke erstmal für die schnelle Hilfe! Und vor allem: Es klappt, so, wie Du es empfohlen hattest, auch wenn ich nicht weiß, warum, denn in dem Teil hatte ich ja gar keine Schriften definiert bzw. verwendet!
Schon merkwürdig!! Aber umso besser, dass Du auf die Idee gekommen bist!

Danke nochmals. Gruß Stefan

 

[Maik]

Du verwendest zwar keinen Text für deine Buttons (Grafik-Links), aber der Browser erwartet (eigentlich) einen Text für das a -Element, und hält dementsprechend einen Raum (in der Höhe) frei. Da auch keine explizite Schriftgröße im Stylesheet notiert war, kam es zu dem Konflikt mit der von dir gewünschten Höhe.

 

[stefancp]

Das klingt logisch! Muß ich mir merken, zudem ich häufiger Buttons mit bg-Bild als mit Text verwende. Klappt super jetzt!

Gruß, Stefan