Safari lädt CSS nicht

taks

PCGH-Community-Veteran(in)
Safari lädt CSS nicht

Safari lädt CSS nicht -> http://extreme.pcgameshardware.de/p...20083-safari-laedt-css-nicht.html#post9563541

Abend zusammen

Ich steh grad mit HTML an und kapier ned was ich falsch mache.
Ich hab einfach ein Container welcher von ganz Links bis ganz Rechts gehen soll und somit den Hintergrund einfärben soll.
Dann hab ich den Icon-Bereich welcher den Hintergrund vom Container übernehmen soll.
Und ein Bild, welches 1024px breit sein soll und links und rechts davon soll es auch die Farbe des Container haben.
Also will ich eigentlich nur eine Tabelle die über die Ganze breite geht und der Inhalt in der Mitte zentriert ist.

Wie mache ich das?
Mir färbt es nur den Bereich des Icons ein, und nur so breit wie das Bild ist.

HTML:
Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="de">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/main.css" rel="stylesheet" type="text/css">
<link rel="SHORTCUT ICON" href="img/favicon.ico">
<title>Test</title>
</head>

<body>
	<!--Top Area: Icon, Slider, Navbar-->
	<div class="container-light">	
		<div style= 'text-align:center' width= "100%" height= "80" ><a href=index.html><img src="img/Logo.png" alt="Home" height="60" /></a></div>						
		<div><img src="img/topmost2.png" ></div>
	</div>
</body>
</html>


CSS:
Code:
html, body {
    height: 100%;
}

html {
    display: table;
    margin: auto;
}

body {
    font-family: Century Gothic, Helvetica, "Helvetica Neue", Arial, Geneva, sans-serif;
    font-size: 17px;
    color: #1E1E1E;
    margin: 0px;
    padding:0px;  
    vertical-align: middle;		
}

.container-light{
    margin: auto;    
    vertical-align: top;
    width: auto;
    background: #f7f8f9;
}

.container{
    margin: auto;    
    vertical-align: top;
    width: 1024px;    
}
 
Zuletzt bearbeitet:
AW: Brauche kleine HTML Hilfe

Quick and dirty. Wenn ich das richtig verstanden habe was du machen willst.

Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="de">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/main.css" rel="stylesheet" type="text/css">
<link rel="SHORTCUT ICON" href="img/favicon.ico">
<title>Test</title>
</head>


<body>
    <!--Top Area: Icon, Slider, Navbar-->
    <div class="container-light">    
        <div style= 'text-align:center' width= "100%" height= "80" ><a href=index.html><img src="http://placekitten.com/200/100"></a></div>                        
        <div><img class="image-wide" src="http://placekitten.com/200/100"></div>
    </div>
</body>
</html>
Code:
html, body {
    height: 100%;
}


html {
    display: block;
    margin: auto;
}


body {
    font-family: Century Gothic, Helvetica, "Helvetica Neue", Arial, Geneva, sans-serif;
    font-size: 17px;
    color: #1E1E1E;
    margin: 0px;
    padding:0px;  
    vertical-align: middle;        
}


.container-light{
    margin: auto;    
    vertical-align: top;
    text-align: center;
    width: auto;
    background: red;
}


.container{
    margin: auto;    
    vertical-align: top;
    width: 1024px;    
}
.image-wide{
  width: 1024px;
}
 
AW: Brauche kleine HTML Hilfe

Nur horizontal zentriert oder auch vertikal zentriert? Und warum färbst du dann nicht den Body einfach ein?

Hier mal die Variante für beide Richtungen.

HTML:
Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="de">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/main.css" rel="stylesheet" type="text/css">
<link rel="SHORTCUT ICON" href="img/favicon.ico">
<title>Test</title>
</head>

<body>
    <!--Top Area: Icon, Slider, Navbar-->
    <div class="container-light">    
        <a href=index.html><img src="img/Logo.png" alt="Home" height="60"></a><br>        
        <img src="img/topmost2.png">
    </div>
</body>
</html>

CSS:
Code:
body  {
    font-family: Century Gothic, Helvetica, "Helvetica Neue", Arial, Geneva, sans-serif;
    font-size: 17px;
    height: 100%;
    color: #1E1E1E;
    background: #f7f8f9;
    margin: 0px;
    display: flex;
    align-items: center;
    justify-content: center;    
}

.container-light {
    display: block;
}
 
Zuletzt bearbeitet:
AW: Brauche kleine HTML Hilfe

Danke euch Zwei =)

Der Teufel liegt bekanntlich im Detail -.-
Ich hatte <display: table> verwendet, mit block funktionierts wie es soll :-)


Code:
html {
    display: [B]block[/B];
    margin: auto;
}

PS: Ich will pro Abschnitt unterschiedliche Hintergrundfarben, darum färb ich es nicht über den body ein ;-)
 
AW: Brauche kleine HTML Hilfe

Ich steh mal wieder auf dem Schlauch -.-

Meine Webseite funktioniert einwandfrei ausser mit Safari.
Auf dem PC zeigt es mit IE, Chrome, FF & Opera korrekt an.
Auf dem Smartphone zeigt es mit Chrome & Opera korrekt an.
Die Druckvorschau ist auch korrekt.

Auf dem MacBook zeigt Safari alles unformatiert an... Es sieht dannn aus wie wenn ich die CSS nicht hochlade :motz:

Ich hab schon die CSS validiert, den CSS Pfad in den html-Files voll ausgeschrieben und sonst noch alles möglich versucht was google ausgespuckt hat.
Aber der scheiss Safari will es einfach nicht korrekt anzeigen.

Hat einer ne Idee was das sein könnte?
 
Zuletzt bearbeitet:
Zurück