nicht angemeldet
Merkwürdiger Abstand nach Navigation
Hallo alle miteinander,
ich habe folgendes Problem: Ich versuche mich nach und nach in CSS-Design reinzuarbeiten. Teilweise klappt es auch, aber hin und wieder gibts halt ein Problem, welches ich nicht direkt / garnicht lösen kann. Letzteres trifft jetzt zu ^^:
Bei folgendem Quelltext (erst kommt der HTML-Code danach der dazugehörige CSS) gibts zwischen der Zeile mit Navigation und dem Bild auf der linken Seite, einen Abstand von ein paar Pixeln, den ich mir nicht erklären kann (Sowohl IE als auch FF). Es liegt scheinbar an der ungeordneten Liste, da der Abstand nicht mehr da ist, wenn ich diese rauslösche.
Achso: Die endgültige IE-Anpassung mache ich immer am Ende ;) Ist halt meine Arbeitsweise.
http://www.cp-clan.net/test/template.php
Für alle die sich den Quellcode nicht von Hand ansehen wollen (sowas solls ja geben ^^):
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Titel der Seite</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/format2.css" type="text/css">
</head>
<body>
<div id="container">
<a class="skip" href="#main">Navigation �berspringen</a>
<div id="logo"><img src="img/1pix.gif" style="width:180px;height:85px;border:0;" alt="Alternativtext" title="Beschreibung" /></div>
<ul id="menu">
<li><a href="#">Unternehmen</a></li>
<li><a href="#">Leistungen</a></li>
<li><a href="#">Produkte</a></li>
<li><a href="#">Referenzen</a></li>
<li><a href="#">Kontakt</a></li>
<li class="suche"><form class="menusuche" action="search.php" name="suchform" method="post"><input type="text" class="menusuche" name="keywords" value=""><input type="image" name="submit" src="img/suchpfeil.gif" width="14" height="15" border="0" style="margin:3px 0 0 3px;"></form></li>
</ul>
<div id="leftCol">
<img src="img/wechselbild/1.jpg" style="width:180px;height:170px;border:0;" alt="Serverschrank - Nahaufnahme" title="Serverschrank - Nahaufnahme" />
</div>
</div>
</body>
</html>
CSS:
/* -- Allgemeines -- */
body
{
background-color: #FFFFFF;
color: #000000;
margin: 0;
padding: 0;
background-image:url(../img/bglinie.gif);
background-repeat:repeat-x;
width: 780px;
font-size: 10pt;
font-family: Verdana, Arial, sans-serif;
}
form
{
margin: 0;
padding: 0;
}
.skip
{
position: absolute;
margin-left: -10000px;
}
/* -- Layout -- */
#container
{
background-color:transparent;
max-width: 780px;
margin: auto;
color: #000000;
}
/* - Kopf - */
#logo
{
background-color:transparent;
color: #000000;
width: 180px;
height: 85px;
padding: 0;
margin: 0;
font-size: 14pt;
letter-spacing: -1px;
text-align: left;
overflow: hidden;
float:left;
}
/* - Menü - */
#menu
{
background-color:transparent;
padding: 50px 0 0 0;
margin: 0;
font-size: 8pt;
color: #000000;
}
#menu li
{
width: 94px;
height: 28px;
padding: 11px 0 0 0;
margin: 0;
text-align: center;
font-weight: bold;
letter-spacing: -1px;
background: url(../img/topmenubg.gif) no-repeat;
list-style: none;
float: left;
}
#menu li.suche
{
width: 130px;
height: 28px;
padding: 8px 0 0 0;
margin: 0;
text-align: center;
font-weight: bold;
letter-spacing: -1px;
background: url(../img/topsearchbg.gif) no-repeat;
list-style: none;
float: left;
}
input.menusuche
{
width: 90px;
height: 13px;
font-size: 7pt;
margin: 0 0 3px 0;
}
#menu li a
{
color: #000000;
text-decoration: none;
}
#menu li a:hover
{
color: #FF0000;
text-decoration: none;
}
#menu li a.active
{
color: #435FA3;
text-decoration: none;
}
#menu li a.active:hover
{
color: #FF0000;
text-decoration: none;
}
/* - Linke Spalte, Sub-Navigation - */
#leftCol
{
clear: both;
border: 1px solid #000000;
width: 180px;
}