|
|||
absolute Positionierung in Buttons - FF Bug?
Hallo!
Ich versuche, Elemente innerhalb eines Buttons absolute zu positionieren. Tragischer Weise klappt das im IE (6- wunderbar, der Firefox macht totalen murks! Er weiß einfach nicht, wie groß der Button ist, wenn ich das Element darin positioniere. Egal ob der Button relative oder absolute positioniert ist, statt durch "top: 0; left: 0;" in der oberen linken Ecke zu sitzen, sitzt das innerhalb positionierte Element "fast" links und "fast" in der Mitte! Wieso? Ich weiß nicht mehr weiter! Vermutlich hat es etwas mit dem bekannten Bug zu tun, dass der Firefox "line-height" für Buttons nicht akzeptiert - aber auch das glaube ich eig. nicht, denn wieso ist es dann nichtmal ganz links, bzw. bei "right: 0" zu weit rechts? Bin dankbar für jegliche Tipps! HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test</title> <style type="text/css"> .testbutton { margin: 0; padding: 0; width: 200px; height: 100px; border: 0; position: relative; background-color: grey; color: white; vertical-align: middle; text-align: center; line-height: 100px; } .leftspan { width: 20px; height: 20px; background-color: maroon; position: absolute; left: 0; top: 0; } .rightspan { width: 20px; height: 20px; background-color: green; position: absolute; right: 0; bottom: 0; } </style> </head> <body> <button class="testbutton"><span class="leftspan"><!-- --></span><span class="rightspan"><!-- --></span>testtext</button> <hr /> <div class="testbutton"><span class="leftspan"><!-- --></span><span class="rightspan"><!-- --></span>testtext</div> </body> </html> |
Sponsored Links |
|
|||
Wenn es sich denn tatsächlich um den Firefox button-line-height-Bug handeln sollte, wäre es kein Bug, sondern von Firefox so gewollt, wie ein Blick in die Firefox Browser-CSS zeigt:
Code:
button, input[type="reset"], input[type="button"], input[type="submit"] { line-height:normal !important; } |
Sponsored Links |
|
|||
Danke für eure Antworten.
Den horizontalen Versatz im FF konnte ich mit HTML-Code:
button::-moz-focus-inner{padding:0;border:none;} Der vertikale Versatz hat relativ sicher was mit line-height zu tun, das Element schwebt immer auf Texthöhe :/ Was da "hilft" ist, den padding-bottom wert auf den gleichen Wert wie die Höhe zu setzen. Verrückt aber wahr, hat im IE keinerlei auswirkung, da ist immernoch alles gut, der FF rendert den Button dann plötzlich (fast) korrekt!?! Leider klebt der Text dann am oberen Rand, anstatt vertikal zentriert zu sein Das umschließende relative Element fällt leider aus, da der HTML-Code nachher nicht von mir kommen wird. Ich glaube ich muss mir was neues überlegen... Danke |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Mehrere Divs übereinander ohne absolute positionierung? | Cu Chullain | CSS | 2 | 05.11.2008 02:06 |
ich habe totale Schwerigkeiten mit Absolute und Relative Positionierung?!? | damonster | CSS | 12 | 27.08.2008 16:56 |
prblemme mit mein inhalt div | carlos587261 | CSS | 3 | 23.04.2008 15:07 |
IE: absolute positionierung mit width und height auf auto | TheSilentOne | CSS | 4 | 06.11.2007 17:17 |
Problem mit dem Menü [erledigt] | Julian | CSS | 2 | 16.01.2006 00:27 |