Unterschiede zwischen Safari - Moz/IE

[Tristan Schmidt]

Hallo Forum!
Nachdem ich meine erste Homepage () programmiert habe und zum Testen stets Safari nutzte, wurde nun bei Aufruf der Seite mit Hilfe von Firefox oder dem Internet Explorer diese ein wenig durcheinander gebracht.
Ich erzielte den Unerwünschten Effekt, dass:

• der Text im Content nicht zentriert wurde
• die Abstände (padding etc.) und einige Schriftgrößen nicht eingehalten wurden
• der Rand (border-top) über dem Fußbereich entfernt wurde
• und Hover in der Navigation und bei anderen Links nicht mehr "funktioniert"

Was müsste ich ändern bzw. anpassen, um es auch bei anderen Browsern zu erreichen.

Hier ein Screenshot aus Safari:


Hier meine CSS-Datei:

body
{background-image: url(images/metal-k.jpg);
padding: 0;
margin: 20px auto;
width: 950px;
font-family: 'Oxygen', sans-serif;
box-shadow: 0 0 13px 6px black;
}


#wrapper {
    width: 950px;
    background-color: #C3CFE6;
}


#kopf {
    width: 950px;
    height: 175px;
    background-image: url(images/header.png);
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -khtml-border-top-left-radius: 5px;
    -khtml-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}


#steuerung {
width: 950px;
}


.menu{margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url(images/topMenuImages.png) repeat-x;}
.menu li{padding:0; margin:0; list-style:none; display:inline;}
.menu li a{float:left; padding-left:15px; display:block; color:rgb(255,255,255); text-decoration:none; cursor:pointer; background:url(images/topMenuImages.png') no-repeat 0px -30px; outline:none; font-style:normal; font-variant:normal; font-weight:normal; font-size:20px; font-family:Oxygen, sans-serif}
.menu li a span{line-height:30px; float:left; display:block; padding-right:15px; background:url(images/topMenuImages.png) no-repeat 100% -30px;}
.menu li a:hover{background-position:0px -60px; color:rgb(255,255,255);}
.menu li a:hover span{background-position:100% -60px;}
.menu li a.active, .menu li a.active:hover{line-height:30px; background:url(images/topMenuImages.png) no-repeat 0px -90px; color:rgb(255,255,255); font-style:normal; font-variant:normal; font-weight:normal; font-size:20px; font-family: Oxygen, sans-serif}
.menu li a.active span, .menu li a.active:hover span{background:url(images/topMenuImages.png) no-repeat 100% -90px;}
.menu li {text-align: center;}


#content {
    background-color: #C3CFE6;
    width: 950px;
    margin-top: 0;
    padding-bottom: 5px;
    text-align: center;
}


h1 {
    text-align: center;
    text-transform: uppercase;
}




#footer {
    width: 950px;
    text-align: center;
    padding-top: 10px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -khtml-border-bottom-left-radius: 5px;
    -khtml-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top:1px solid #3C3C3C;
}


#footer a{
    text-decoration: none;
    color:black;
}


#footer a:hover {
    color:white;
}

Grüße,
Tristan

 

[Tristan Schmidt]

Vorweg möchte ich mich noch entschuldigen, mit dem Themenbereich "HTML" die falsche Entscheidung getroffen zu haben. Müsste in CSS verschoben werden.

Zum Thema:
Konnte mir nun selbt helfen. Es fehlte lediglich ein Komma in der CSS-Datei im Navi-Bereich.
Allerdings passt nur noch nicht der Abstand vom Footer zum unteren Rand des Wrappers?!

 

[threadi]

Auf dem Screenshot erkennt man leider nur wenig. Es wäre prima, wenn Du auch noch einen Link zu Seite liefern könntest.

Moderation: Verschoben von HTML zu CSS.

 

[Tristan Schmidt]

Oh, das ist mir leider nicht aufgefallen.
Hier die Seite: IDG - ENGINEERING

 

[threadi]

Dann fang erstmal an die HTML-Fehler zu beseitigen:
[Invalid] Markup Validation of http://tristan-schmidt.bplaced.net/Fertig/ - W3C Markup Validator

 

[Tristan Schmidt]

Ich habe es bereits durch den Validator geschickt. Allerdings bin ich mir nicht sicher, wie ich die Verweise im Head auf die Google-Webfonts schließen muss.
Etwa so: <link.../>
Ich hab das beim Generieren dieser Schrift lediglich kopiert.

 

[threadi]

<link href="http://fonts.googleapis.com/css?family=Oxygen" rel="stylesheet" type="text/css">

Außerdem falsch, weil Blockelemente in Inline-Elementen nichts zu suchen haben:

<a href="index.html"><div id="kopf"></div></a>

Richtig wäre:

<a href="index.html" id="kopf">&nbsp;</a>

mit gleichzeitiger Ergänzung von

#kopf { display: block; }