zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden absolute Positionierung in Buttons - FF Bug?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.04.2010, 12:15
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
  #2 (permalink)  
Alt 13.04.2010, 18:07
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.220
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.04.2010, 22:11
Benutzerbild von plastiko
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.12.2007
Ort: Hannover
Beiträge: 945
plastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblick
Standard

padding auf .testbutton scheint nicht zu helfen.

Du könntest position: relative; in ein zusätzliches Element um .testbutton verlegen.
__________________
MfG
Jens
Mit Zitat antworten
  #4 (permalink)  
Alt 14.04.2010, 09:37
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.04.2010
Beiträge: 2
TobiasPl befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


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