Guten Morgen

Ich helfe einem Freund bei einer Website wo eine horizontale Navigation gebraucht wird testseite (http://hornets.pytalhost.org/test/testseite.php)
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;
}



#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;}








#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;

}



-->

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

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.:dontknow:
gibts eine schönere Lösung so eine Navigation zu machen?

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.

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:eek:
danke für den Hinweis. Manchmal sieht man den Wald vor lauter Bäumen nicht
schau ich mir gleich mal an