XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   absolute Positionierung in Buttons - FF Bug? (http://xhtmlforum.de/showthread.php?t=60824)

TobiasPl 13.04.2010 12:15

absolute Positionierung in Buttons - FF Bug?
 
Liste der Anhänge anzeigen (Anzahl: 1)
Hallo!
Ich versuche, Elemente innerhalb eines Buttons absolute zu positionieren.
Tragischer Weise klappt das im IE (6-8) 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>

Anhang 3594

EvT 13.04.2010 18:07

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

line-height: normal !important; kann nicht in einem Autoren-CSS überschrieben werden. Line-height scheidet somit aus. Als ziemlich holprigen Workaround könnte man vertikales Padding versuchen.

plastiko 13.04.2010 22:11

padding auf .testbutton scheint nicht zu helfen.

Du könntest position: relative; in ein zusätzliches Element um .testbutton verlegen.

TobiasPl 14.04.2010 09:37

Danke für eure Antworten.

Den horizontalen Versatz im FF konnte ich mit
HTML-Code:

button::-moz-focus-inner{padding:0;border:none;}
entfernen, das ist ja schonmal was.

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


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:14 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023