Vertikaler Abstand zwischen Links
Ingo Siemon
Vertikaler Abstand zwischen Links
Ingo Siemon
Guten Tach
Ich habe die Navigation meiner Seite mit einer Liste (ul) realisiert.
Nun sind aber zwischen den einzelnen Links so
merkürdige horizontale Abstände.
Diese sind nur im Internet Explorer zu sehen.
Mit FireFox und Opera ist alles OK.
Hat jemand von Euch eine Idee, wo ich da den Fehler gemacht habe.
Laut den diversen Validatoren ist ales valide.
Gruß
Ingo
Hier mal der Quelltext der Seite:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta name="description" content="Versandhandel für Science Fiction + Erotik Modelle und hochwertige Film-Schwerter. Über 1500 Artikel im Programm." />
<meta name="keywords" content="SPACEart, Versandhandel, Science Fiction, Fantasy, Action, Horror, Modellbau, Modellbausatz, Modell-Bausatz, Figuren, Schwert, Alien, Predator" />
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-script-type" content="text/javascript" />
<link rel="shortcut icon" href="favicon.ico" />
<link rel="alternate" type="application/rss+xml" title="RSS-Newsfeed" href="http://SPACEart.de/SPACEart.xml" />
<link rel="stylesheet" type="text/css" href="css.css" />
<link rel="stylesheet" media="print" href="css-druck.css" />
<title>SPACEart - Science Fiction + Erotik Modelle</title>
</head>
<body>
<div id="Seite">
<ul id="Navigation">
<li><a href="xxxxx">Action + Horror Modelle</a></li>
<li><a href="xxxxx">Erotik Modelle</a></li>
<li><a href="xxxxx">SciFi + Fantasy Modelle</a></li>
<li><a href="xxxxx">Schwerter + Dolche</a></li>
<li><a href="xxxxx">Zubehör</a></li>
<li><a href="xxxxx">Bemal-Service</a></li>
<li><a href="xxxxx">Warenkorb</a></li>
<li><a href="xxxxx">AGB + Hilfe</a></li>
<li><a href="xxxxx">Bildschirmschoner</a></li>
<li><a href="xxxxx">F.A.Q.</a></li>
<li><a href="xxxxx">Impressum</a></li>
<li><a href="xxxxx">Kontakt + E-Mail</a></li>
<li><a href="xxxxx">Newsletter + RSS</a></li>
<li><a href="xxxxx">Rückruf-Service</a></li>
<li><a href="xxxxx">Spiel</a></li>
<li><a href="xxxxx">Such-Service</a></li>
<li><a href="xxxxx">Werbung</a></li>
</ul>
<div id="Inhalt">
<h1>SciFi + Fantasy Modelle</h1>
<h2>Muster-Filmtitel</h2>
<div class="box"><p>hjifghdsgphdfsup hgufip hugpf dh ghupf dhug pf hgu fhdpu hgupf hdup ghf dhpgh udipg ufdpguf phgph upfh gu fhugpfsd hguipf dhg iupf hgf hg fui ghf gp ufps hgupfpdishgpf dhsug ufd shpgh fdsp ghuf psg huifp hgup fhdpsg upif psghuf dpsghfps hgupifhughpidf hsg fp hgifpshg upfid hgpdif ghidfs ghpf dsgh fdpsghfhdspgh</p><p>hjifghdsgphdfsup hgufip hugpf dh ghupf dhug pf hgu fhdpu hgupf hdup ghf dhpgh udipg ufdpguf phgph upfh gu fhugpfsd hguipf dhg iupf hgf hg fui ghf gp ufps hgupfpdishgpf dhsug ufd shpgh fdsp ghuf psg huifp hgup fhdpsg upif psghuf dpsghfps hgupifhughpidf hsg fp hgifpshg upfid hgpdif ghidfs ghpf dsgh fdpsghfhdspgh</p></div>
<h2>Muster-Filmtitel</h2>
<div class="box"><p>hjifghdsgphdfsup hgufip hugpf dh ghupf dhug pf hgu fhdpu hgupf hdup ghf dhpgh udipg ufdpguf phgph upfh gu fhugpfsd hguipf dhg iupf hgf hg fui ghf gp ufps hgupfpdishgpf dhsug ufd shpgh fdsp ghuf psg huifp hgup fhdpsg upif psghuf dpsghfps hgupifhughpidf hsg fp hgifpshg upfid hgpdif ghidfs ghpf dsgh fdpsghfhdspgh</p><p>hjifghdsgphdfsup hgufip hugpf dh ghupf dhug pf hgu fhdpu hgupf hdup ghf dhpgh udipg ufdpguf phgph upfh gu fhugpfsd hguipf dhg iupf hgf hg fui ghf gp ufps hgupfpdishgpf dhsug ufd shpgh fdsp ghuf psg huifp hgup fhdpsg upif psghuf dpsghfps hgupifhughpidf hsg fp hgifpshg upfid hgpdif ghidfs ghpf dsgh fdpsghfhdspgh</p></div>
<h2>Muster-Filmtitel</h2>
<div class="box"><p>hjifghdsgphdfsup hgufip hugpf dh ghupf dhug pf hgu fhdpu hgupf hdup ghf dhpgh udipg ufdpguf phgph upfh gu fhugpfsd hguipf dhg iupf hgf hg fui ghf gp ufps hgupfpdishgpf dhsug ufd shpgh fdsp ghuf psg huifp hgup fhdpsg upif psghuf dpsghfps hgupifhughpidf hsg fp hgifpshg upfid hgpdif ghidfs ghpf dsgh fdpsghfhdspgh</p><p>hjifghdsgphdfsup hgufip hugpf dh ghupf dhug pf hgu fhdpu hgupf hdup ghf dhpgh udipg ufdpguf phgph upfh gu fhugpfsd hguipf dhg iupf hgf hg fui ghf gp ufps hgupfpdishgpf dhsug ufd shpgh fdsp ghuf psg huifp hgup fhdpsg upif psghuf dpsghfps hgupifhughpidf hsg fp hgifpshg upfid hgpdif ghidfs ghpf dsgh fdpsghfhdspgh</p></div>
<h2>Muster-Filmtitel</h2>
<div class="box"><p>hjifghdsgphdfsup hgufip hugpf dh ghupf dhug pf hgu fhdpu hgupf hdup ghf dhpgh udipg ufdpguf phgph upfh gu fhugpfsd hguipf dhg iupf hgf hg fui ghf gp ufps hgupfpdishgpf dhsug ufd shpgh fdsp ghuf psg huifp hgup fhdpsg upif psghuf dpsghfps hgupifhughpidf hsg fp hgifpshg upfid hgpdif ghidfs ghpf dsgh fdpsghfhdspgh</p><p>hjifghdsgphdfsup hgufip hugpf dh ghupf dhug pf hgu fhdpu hgupf hdup ghf dhpgh udipg ufdpguf phgph upfh gu fhugpfsd hguipf dhg iupf hgf hg fui ghf gp ufps hgupfpdishgpf dhsug ufd shpgh fdsp ghuf psg huifp hgup fhdpsg upif psghuf dpsghfps hgupifhughpidf hsg fp hgifpshg upfid hgpdif ghidfs ghpf dsgh fdpsghfhdspgh</p></div>
</div>
<p id="Fusszeile"> </p>
</div>
</body>
</html>
Und hier die dazugehörige CSS-Datei:
/* Dunkelgrau: #3d3d3d; */
/* Mittelgrau: #d5d5d5; */
/* Hellgrau: #eee; */
/* Blau: #0032b2; */
/* Rot: #6d2323; */
/* Dunkelblau: #0f255c; */
body {
background: #d5d5d5 url(bilder/hintergrund.gif);
color: #3d3d3d;
font: 95% Helvetica, Arial, sans-serif;
text-align: center; /* Zentrierung im Internet Explorer */
padding: 1em;
}
div#Seite {
text-align: left; /* Seiteninhalt wieder links ausrichten */
margin: 0 auto; /* standardkonforme horizontale Zentrierung */
width: 776px;
border: 1px solid #3d3d3d;
background: #eee url(bilder/hintergrund-navigation.gif) repeat-y;
}
ul#Navigation {
float: left;
width: 220px;
padding: 0 10px 0 10px;
margin: 0;
overflow: hidden;
}
ul#Navigation li {
list-style: none;
}
ul#Navigation a {
display: block;
}
ul#Navigation a:link {
color: #0f255c;
}
ul#Navigation a:visited {
color: #0f255c;
}
ul#Navigation a:hover {
color: #6d2323;
}
ul#Navigation a:active {
color: #6d2323;
}
div#Inhalt {
margin: 0 0 0 250px;
}
* html div#Inhalt {
height: 1em; /* Workaround gegen den 3-Pixel-Bug des Internet Explorers */
}
div#Inhalt h1,h2 {
font-size: 1.5em;
background: #d5d5d5;
border: 1px solid #3d3d3d;
padding: 3px;
margin: 10px 0 0 0;
width: 502px;
overflow: hidden;
}
div#Inhalt h2 {
font-size: 1.1em;
margin: 20px 0 0 0;
}
div#Inhalt .box {
background: #d5d5d5;
border: 1px solid #3d3d3d;
padding: 3px;
margin: 7px 0 0 0;
width: 502px;
overflow: hidden;
}
p#Fusszeile {
clear: both;
}
-
Hi,
Nun sind aber zwischen den einzelnen Links so
merkürdige horizontale Abstände.
Diese sind nur im Internet Explorer zu sehen.welche bekanntermaßen aus den Whitespaces zwischen den <li>-Elementen resultieren. Die Lösungsansätze sind ebenso bekannt.
Hier mal der Quelltext der Seite:
Der Link auf die betreffende Seite enthält mehr Information und verbraucht weniger Platz. Code-Schnipsel(!) bitte nur dann posten, wenn es explizit auf diese ankommt.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Tach Cheatah
welche bekanntermaßen aus den Whitespaces zwischen den <li>-Elementen resultieren. Die Lösungsansätze sind ebenso bekannt.
OK, ich verstehe.
Hab gerade mal gegoogelt und dabei unter anderem den Tipp gefunden,
vor dem </a> einfach ein Leerzeichen einzufügen.Also statt so:
<li><a href="xxxxx">Action + Horror Modelle</a></li> <li><a href="xxxxx">Erotik Modelle</a></li> <li><a href="xxxxx">SciFi + Fantasy Modelle</a></li>es so zu machen:
<li><a href="xxxxx">Action + Horror Modelle </a></li> <li><a href="xxxxx">Erotik Modelle </a></li> <li><a href="xxxxx">SciFi + Fantasy Modelle </a></li> ~~~(man beachte die "Lücke" vor dem </a>) Funktionieren tut das ja gut. Würdet Ihr mir dazu raten, oder soll ichs lieber anders lösen. > Der Link auf die betreffende Seite enthält mehr Information und verbraucht weniger Platz. Code-Schnipsel(!) bitte nur dann posten, wenn es explizit auf diese ankommt. OK. Gruß Ingo -
Lieber Cheatah
Hallo nochmal.
Das Problem hat sich gerade erledigt.
Aber denn danke für Deine schnelle Antwort.Gruß
Ingo
-