• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

navigation darstellung im firefox um 20px verstezt

robert:absolute

Neues Mitglied
Hi,

ich habe eine Frage. Und hoffe mir kann jemand weiter helfen. Also bei meiner Internetseite fkt. etwas nicht so recht. Im IE ist alles i.O., allerdings im FF wird meine Navi um ca. 20px versetzt ( nach unten ) dargestellt. Habe mich schon auf Fehlersuche begeben und alles ausprobiert. Konnte aber die Ursache nicht finden.

Grüße,

Robert
 
Hier der Code:

<html>
<head>
<title></title>
<meta name="author" content="Nancy">
<meta name="editor" content="html-editor phase 5">

<style type="text/css">

<!-

* {

margin: 0;

}

body {

text-align: center;
background-color: #ffffff;
font-size: 110%;
font-family: verdana;

}


#main {

margin: auto;
position: relative;
background-color: transparent;

}

#kopf {

margin: auto;
position: relative;
width: 900px;
height: 40px;
background-image: url(kopkarbsp.jpg);

}

#oben {

margin: auto;
position: relative;
width: 900px;
height: 100px;
background-image: url(schber.jpg);
border: 1px solid white;

}

#mitte {

margin: auto;
position: relative;
width: 898px;
height: 450px;
background-color: #ffffff;
border: 1px solid #00137f;

}

#navi {

margin: auto;
position: relative;
top: 0px;
width: 898px;
height: 25px;
background-color: #6666ff;

}

#navi ul {

list-style-type: none;

}

#navi li {

display: inline;
font-size: 14px;
line-height: 25px;

}

#navi a {

color: #ffffff;
text-decoration: none;
padding: 0 15px;
float: left;

}

#navi a:hover {

color: #6666ff;
background-color: #ffffff;
text-decoration: none;
font-size: 17px;

}

#unten {

margin: auto;
position: relative;
width: 900px;
height: 40px;
background-image: url(unt.jpg);
background-repeat: none;

}

</style>

</head>

<body>
<div id="main">

<div id="kopf">

</div>

<div id="oben">

</div>

<div id="mitte">
<div id="navi">

<ul>

<li><a href="#">Startseite</a></li>
<li><a href="#">&uuml;ber uns</a></li>
<li><a href="#">die Umgebung</a></li>
<li><a href="#">Angebot</a></li>
<li><a href="#">Speisekarte</a></li>
<li><a href="#">Obersaxen</a></li>
<li><a href="#">Galerie</a></li>
<li><a href="#">Kontakt</a></li>

</ul>

</div>
</div>

<div id="unten">

</div>

</div>

</body>

</html>
 
Hallo,
du musst bei der ul in der id "navi" margin auf null setzten also so:
Code:
#navi ul {

 margin:0;
          list-style-type: none;

          }
Ich denke das ist Browserspezifisch, dass manche Elemente wie z.B. ul ein Margin automatisch bekommen. Zur vermeidung dieser "CSS-Standardwerte" im Browser wendet man z.B. reset-Dateien(CSS-Datei) an
Welche z.B. margin, padding usw erstmal auf 0 setzen.Diese CSS-Datei bindet man dann einfach in jede Seite im head ein.

Gruß, Marv
 
Das Problem kann auch daran liegen, dass deine Seite im Quirksmodus dargestellt wird, je nachdem von welchem IE du sprichst.
 
Zurück
Oben