Problem mit horizontaler Navigation

[RazorCko]

Guten Morgen

Ich helfe einem Freund bei einer Website wo eine horizontale Navigation gebraucht wird testseite
es funktioniert nur mal diese eine seite.

Das Problem: Es entsteht immer eine Lücke oberhalb der Navigation beim Firefox was mich zusätzlich stutzig macht.
Wenn ich den ganzen <ul> Teil rausnehme funktionierts.
ich bekomme es nicht gebacken das Ding.

Vielen Dank schon mal

navi.html mittels include eingefügt

<ul>
<li ><a href="index.php">NEWS</a></li>
<li ><a href="hornets.php">ÜBER UNS</a></li>
<li ><a href="fotos.php">FOTOS</a></li>
<li ><a href="videos.php">VIDEOS</a></li>
<li ><a href="impressum.php">IMPRESSUM</a></li>
<li ><a href="kontakt.php">KONTAKT</a></li>
</ul>

css code in bold der teil für die navigation

<!--





html {
height:100%;
} 

body {
height:100%;
background-image:url('img/bgbody.gif');
overflow:auto;
font-size: 0.90em;
font-family: verdana, sans-serif;
color: #ffffff;
padding:0px;
margin:0px;
}


 a:link{color:#ECE70E; text-decoration:underline;}
 a:visited{color:#ECE70E; text-decoration:underline;}
 a:hover{color:#ECE70E; text-decoration:none;}
 a:active{color:#ECE70E; text-decoration:underline;}


 a.subnav:link{color:#ffffff; text-decoration:none;}
 a.subnav:visited{color:#ffffff; text-decoration:none;}
 a.subnav:hover{color:#ffffff; text-decoration:underline;}
 a.subnav:active{color:#ffffff; text-decoration:none;}




	


#bg_wrapper{
background-color:#2B0538;
overflow:hidden;
border-style:dashed;
width:847px;
height:auto;
text-align: left;
border-width: 0pt;
padding:0px;
margin:0px;

 }

.titel{
color:#ffffff;
font-weight:bold;
font-size:1.2em;
}


#bildo {
background-image: url(img/start_b_1.jpg);
background-repeat: no-repeat;
width: 847px;
height:176px;
min-height:176px;
text-align: left;
border-style:dashed;
border-width:0pt;
padding:0px;
margin:0px;
 }



[B]#navigation { 
height:28px; 
min-height:28px;  
background-image: url(img/start_b_2.jpg); 
background-repeat: no-repeat; 
 
}

#navigation ul {list-style-type: none;}
#navigation li { font-size: 12px; display: inline; line-height: 28px; }
#navigation a { color: #8a8888; text-decoration: none; padding:0 10px; float: left;}
#navigation a:hover { text-decoration: none;}

	
[/B]





#bildu {
background-image: url(img/start_b_3.jpg);
background-repeat: no-repeat;
width:847px;
height:161px;
min-height:161px;
text-align: left;
border-style:dashed;
border-width:0pt;
padding:0px;
margin:0px;
 }




#content {
float:left;

background-position:bottom;
overflow:hidden;
padding-top:50px;
padding-left:30px;
padding-right:10px;
padding-bottom:100px; 
margin:0px;
border-style:dashed;
border-width: 0pt;
width: 500px;
text-align: justify;

 }






#boxenwrapper {
overflow:hidden;
width: 270px;
text-align: left;
border-style:dashed;
border-width: 0pt;
padding-top:50px;
padding-left:10px;
padding-right:10px;
padding-bottom:0px; 
margin-top:0px;
margin-left:0px;
margin-right:0px;
 }







#submenue
{
overflow:hidden;
float:left;
padding-top:10px;
padding-left:0px;
padding-right:10px;
padding-bottom:10px; 
margin-top: 0px;
margin-left:0px;
margin-right:0px;
margin-bottom:30px;
width: 250px;

border-top-width:1pt; 
border-top-style:dotted;
border-top-color:#ECE70E;

border-bottom-width:1pt; 
border-bottom-style:dotted;
border-bottom-color: #ECE70E;



font-size: 0.95em;

color: #ECE70E;

text-align: left;
 }




p.boxen
{
overflow:hidden;

padding-top:10px;
padding-left:0px;
padding-right:10px;
padding-bottom:10px; 
margin-top: 5px;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
width: 250px;
border-style:dotted;
border-top-width:0pt;
border-top-color:#FFFF00;
border-bottom-width:0pt;
border-left-width:0pt;
border-right-width:0pt;
font-size: 0.9em;
color: #FFFFFF;
text-align: left;
 }



img.banner
{
overflow:hidden;
float:left;
padding-top:0px;
padding-left:0px;
padding-right:0px;
padding-bottom:0px; 
margin-top: 10px;
margin-left:0px;
margin-right:0px;
margin-bottom:10px;
width: 250px;
text-align: left;
 }

#footer
 {
background-image: url(img/footer.jpg);
background-repeat: no-repeat;
overflow:hidden;
width: 847px;
height:200px;
text-align: left;
border-style:dashed;
border-width: 0pt;
padding:0px;
margin:0px;

 }



-->

[AmicaNoctis]

Hallo,

vermutlich entsteht die Lücke, weil du kein Reset-Stylesheet hast, was erstmal padding und margin für alle Elemente löscht.

Gruß,

Amica

[RazorCko]

Hallo,

vermutlich entsteht die Lücke, weil du kein Reset-Stylesheet hast, was erstmal padding und margin für alle Elemente löscht.

Gruß,

Amica

muss doch auch ohne irgendwelche Tricks gehen.
gibts eine schönere Lösung so eine Navigation zu machen?

[AmicaNoctis]

muss doch auch ohne irgendwelche Tricks gehen.

Was hat das mit Tricks zu tun? Reset-Stylesheets sind eine äußerst sinnvolle Grundlage für ein Layout.

Wenn du aber nicht willst, dann leg padding und margin wenigstens für deine ul- und li-Elemente in der Navigation explizit fest, sonst nimmt der Browser seine jeweiligen default-Werte. Genau darin sehe ich aber die Ursache deines Problems.

[RazorCko]

Was hat das mit Tricks zu tun? Reset-Stylesheets sind eine äußerst sinnvolle Grundlage für ein Layout.

Wenn du aber nicht willst, dann leg padding und margin wenigstens für deine ul- und li-Elemente in der Navigation explizit fest, sonst nimmt der Browser seine jeweiligen default-Werte. Genau darin sehe ich aber die Ursache deines Problems.

hoppala, stimmt da hab ich gar nichts angegeben
danke für den Hinweis. Manchmal sieht man den Wald vor lauter Bäumen nicht
schau ich mir gleich mal an