Thema: CSS Breite Hover Background

Ich habe mein mainmenu mit CSS formatiert und möchte einen Mouseover Background, welcher nur so breit wie das jeweilige Wort ist.

Um die Abstände schön einzustellen habe ich display:block; verwendet. Was aber dazu führt, dass die Hintergrundfarbe die Breite des übergeordneten DIV annimmt. Mit float: left würde es gehen, doch denn werden kurze Wörter auf einer Zeile angezeigt.

So sieht das ganze aus:
http://server37.hostpoint.ch/~webgar...nt/view/17/30/

Und das CSS:

Code:

a.mainlevel {
	color: 				#666;
	font-weight:		bold;
	background-color: 	inherit;
	text-decoration: 	none;
	display:			block;	
	margin-top: 		8px;
}

a.sublevel {
	color: 				#666;
	font-size:			8pt;
	margin-left: 		6px;
	text-decoration: 	none;
	display:			block;
	margin-top: 		4px;
	background-color:	#fff;
	padding: 	        0 1px 0 1px;
}
	
a.mainlevel:hover {
	color: 				#fff;
	text-decoration: 	none;
	background-color:	#999933;
}

a.sublevel:hover {
	color: 				#fff;
	margin-left: 		6px;
	text-decoration: 	none;
	background-color:	#999933;
}

wie wäre es, wenn du bei a.mainlevel das display: block; und margin-top: 8px; weg lässt und dafür die Abstände mit line-height: 28px; erzeugst?
Ist blos eine Idee, da ich nicht weiss wie der IE darauf reagiert. Möglicherweise möchte dieser zur line-height Angabe noch eine height: mit gleichem Wert.

Danke upstream.li, diese Möglichkeit versuche ich zu vermeiden.

Ich glaube das line-height wird nicht auf allen Browsern gleich hoch. Zudem kann ich dann den Abstand vom Sublevel zum Mainlevel nicht mehr so pixelgenau kontrollieren.

Es wäre mir nicht bekannt, dass line-height unterschiedlich interpretiert würde. Es sei denn in Kombination mit padding oder margin. (siehe IE Box Modell)
Und der Abstand zu den Sublevels kann dann wiederum bei a.sublevel definiert werden.

Aber line-height macht doch den Abstand oben und unten, nicht nur oben. So wird der erste Punkt des Sublevels zu viel Abstand zum Mainlevel haben.

du kannst den Abstand auch nur auf einer Seite haben. Musst dann noch vertical-align: top; middle; oder bottom; anfügen und schon platziert er den Text oben (=Abstand ist unten), mittig (Standardeinstellung) oder unten (=Abstand ist oben)

Cool danke, so werde ich es machen! Das wusste ich nicht.