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>
ffbug.gif