Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 13.04.2010, 12:15
TobiasPl TobiasPl ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.04.2010
Beiträge: 2
TobiasPl befindet sich auf einem aufstrebenden Ast
Standard 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>
ffbug.gif
Mit Zitat antworten
Sponsored Links