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

Navigation Button verschieben sich bei Chrome

KingLu

Neues Mitglied
Folgendes Bild sehe ich immer wenn meine Seite über Chrome aufrufe, bei Mozilla passiert das nicht!


So sieht das aus wenn ich die Seite über Chrome aufrufe:
4vvMzMOFProblem.jpg





Wenn ich auf einen Button drück sieht es so aus wie bei Mozilla, also so wie es sollte, aber sobald ich wieder aktualsiere geht das Spiel von vorne los.
Problem_normal.jpg



das 2te Bild is Tag Älter da war das Hintergrundbild noch nicht oben. Problem war vorher aber auch schon =)
Hier die Html und css Daten der Navigation Buttons


Code:
HTML:


<body>
<header>
    <h1>John Doe</h1>
    <h2>Home</h2>


</header>


<nav>
    <ul>
       <a href="Home.html"><li>Home</li></a>
        <a href="http://www.youtube.com/user/JohnDoe" target="_blank"><li>YouTube</li></a>
        <a href="Downloads.html"><li>Downloads</li></a>
        <a href="Kontakt.html"><li>Kontakt</li></a>
        <a href="Sonstiges.html"><li>Sonstiges</li></a>




    </ul>
</nav>
</body>




Code:
CSS:


nav ul {


    list-style-type: none;


    }




nav li {
    display: inline;
    margin-right: 35px;
    background-color: #640000;
    padding-right: 20px;
    padding-left: 20px;
    padding-top: 3px;
    padding-bottom: 3px;
    border: #B20000 3px outset;
    border-radius: 5px;
    font-weight: bold;
    cursor: default;




}
nav {
    margin-top: 20px;
    text-align: center;
    margin-bottom: 30px;
}


nav a {
    text-decoration: none;
    color: white;
    text-shadow: gray 0px 0px 4px;
}


nav li:hover {
    border: #B20000 3px inset;


}


nav a:hover {
    color: #808080;
    text-shadow: none;
}
 
Deinem HTML-Code fehlt noch der Doctype. Vlt. hast Du ihn ja nur nicht kopiert. Der komplette Code wäre jedoch wichtig.

Und selbst der gezeigte Code ist noch mehr fehlerhaft. In einer <ul>-Liste müssten die <li>'s die Inhalte umgeben - nicht andersum.

Falsch:
HTML:
<a href="#"><li>Text</li></a>

Richtig:
HTML:
<li><a href="#">Text</a></li>

Dann kann ein Browser die CSS-Angaben dafür auch korrekt interpretieren.

Bilder sehe ich in deinem Beitrag übrigens keine, solltest Du doch irgendwelche eingefügt haben.
 
Zurück
Oben