UL-Liste: Ungewollter Abstand über Text

Carsten H. · #1 (**permalink**) 25.07.2005, 19:15

Hallo!

Ich versuche gerade ein horizontales Menü zu basteln, aber habe trotz globalem Padding und Margin von 0px über dem Text einen Abstand, der dort nicht hin soll. Die angehängte Grafik (vergrößerte Ansicht) verdeutlicht das etwas besser.

Das rot umrandete ist der Link, während das grün umrandete das LI-Element ist. Das Menü sollte auch nur so hoch sein, wie die Link-Texte, aber irgendwie will der Abstand darüber nicht verschwinden.

Mein Quellcode:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>Test</title>
	<link rel="stylesheet" href="test.css" />
</head>

<body>
	<div id="topmenu">
		<ul>
			[*]Menü #1
			[*]Menü #2
			[*]Menü #3
			[*]Menü #4
		[/list]	</div>
</body>
</html>

Code:

* {
	font-family:Arial, Helvetica, Verdana, sans-serif;
	margin:0;
	padding:0;
}

/* ... */

#topmenu {
	background-color:#000137;
	text-align:center;
}
#topmenu ul {
	border-left:solid 1px #FFFFFF;
	display:inline;
	list-style:none;
}
#topmenu li {
	border-right:solid 1px #FFFFFF;
	display:inline;
	text-align:center;
}
#topmenu li a {
	color:#FFFFFF;
	font-size:0.7em;
	padding:0em 1.5em;
	text-decoration:none;
}

Wäre nett, wenn mir da jemand helfen könnte.

fricca · #2 (**permalink**) 25.07.2005, 19:26

Zitat:

Zitat von Carsten H.

Ich versuche gerade ein horizontales Menü zu basteln, aber habe trotz globalem Padding und Margin von 0px über dem Text einen Abstand, der dort nicht hin soll.

Das ul-Element und das li-Element haben eine Schriftgröße von 1em. Da du nur mit inline-Darstellung arbeitest und die inline-Elemente alle auf einer Grundlinie sitzen, haben die a-Elemente bei font-size 0.7em einen Abstand nach oben.
Abhilfe:
die Schriftgröße bereits für ul festlegen, nicht erst in a.

edit: der IE zeigt in diesem Beispiel mit font-size:0.7em etwas anderes an als bei 70% - setz mal font-size:100.01%; für body dazu...

Grüße
fricca

Carsten H. · #3 (**permalink**) 25.07.2005, 21:00

Zitat:

Zitat von fricca

Abhilfe:
die Schriftgröße bereits für ul festlegen, nicht erst in a.

Danke, das wars. Da habe ich gar nicht dran gedacht, weil keine font-size bei UL und LI angegeben war.

Zitat:

Zitat von fricca

der IE zeigt in diesem Beispiel mit font-size:0.7em etwas anderes an als bei 70% - setz mal font-size:100.01%; für body dazu...

Hab ich bereits, ich habe das nur aus den Beispielen entfernt weil es dafür nicht wichtig war.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Hilfe!!! mein Homepagelayout funktioniert nicht!	maxx	CSS	5	14.10.2012 07:21
gibt es eine andere Lösung ohne Tabelle?	online	CSS	16	24.04.2009 08:41
Auf-/Zuklappen mit JS	crimi	Javascript & Ajax	7	23.09.2008 16:27
Problem mit div und Höhe	deep4	CSS	2	13.11.2007 20:03
3 dynam. Spalten mit Inhaltsüberlauf	spacegaier	CSS	6	12.10.2007 00:24