Safari stellt gescriptete Website nicht richtig da

Aladin033

Aktives Mitglied
Thread Starter
Mitglied seit
22.08.2015
Beiträge
1.429
Moin,

ich habe meine erste Website erstellt unter Google Chrome funktioniert diese auch wunderbar.
Allerdings stellt Safari die Umlaute nicht richtig da..
Geschrieben habe ich die Seite mit HTML5 und fürs Design natürlich CSS verwendet.
So sieht das ganze aus: (Die Seite ist natürlich fiktiv)

CSS:
CSS:
body{
    font-family: Arial, Helvetica, sans-serif;
    margin: 0px;
  }

  #top {
    text-align: center;
  }

  #logo {
      color: white;
      background-color: red;
      display:inline-block;
      font-size: 32px;
      font-weight: bold;
      padding: 8px;
      margin-top: 16px;
  } 

  #logo-namen {

    font-size: 32px;
    font-weight: bold;
    margin: 16px;
  }

  #navigation a {
    color: gray;
    padding: 6px;
  }


  #navigation a:hover{
    color: red;
  }

  #image img{
      width: 100%;
      margin-top: 16px;
      margin-bottom: 16px;
  }

  #main {
    max-width: 800px;
    margin: auto;
    padding: 16px;
  }

  #footer {
      text-align: center;
      color: gray;
      padding: 16px;
  }
Index
<!DOCTYPE html>


<html>
<head>
</head>
<title> Malerreibetrieb Mayer</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-with, initial-scale=1">
<body>
<div id="top">
<div id="logo">MM</div>
<div id="logo-name">Malerreibetrieb Mayer</div>
<div id="navigation">
<a href="#Über Uns">Über Uns</a>
<a href="#Service">Service</a>
<a href="#Kontakt">Kontakt</a>
</div>
<div id="image">
<img src="image.jpg" alt="Malerreibetrieb Bild">
</div>
</div>
<div id="main">
<section id="Über Uns"></section>
<h2>Über Uns</h2>
<p>Dies ist eine Testwebsite, damit ich das endlich mal raffe wie das funktioniert. Aber Dank Microsoft Visual Studio, ist das alles recht einfach Umsetzbar.
Ja doch, mit Microsoft Visual Studio macht das schon Spaß.
</p>
<section id="Service"></section>
<h2>Service</h2>
<p>Dies ist eine Testwebsite, damit ich das endlich mal raffe wie das funktioniert. Aber Dank Microsoft Visual Studio, ist das alles recht einfach Umsetzbar.
Ja doch, mit Microsoft Visual Studio macht das schon Spaß.</p>
<section id="Kontakt"></section>
<h2>Kontakt</h2>
<p>Dies ist eine Testwebsite, damit ich das endlich mal raffe wie das funktioniert. Aber Dank Microsoft Visual Studio, ist das alles recht einfach Umsetzbar.
Ja doch, mit Microsoft Visual Studio macht das schon Spaß.</p>
</div>
<div id="footer">
Copyright 2020 | Malerreibetrieb Mayer
</div>
</body>
</html>
Jetzt ist die Frage wo da mein Fehler liegt.
Kann mir den jemand verraten?

Danke :)
 

oneOeight

Aktives Mitglied
Mitglied seit
23.11.2004
Beiträge
55.191
Und nicht vergessen die Datei auch mit dem gleichen Encoding zu speichern.
 
  • Gefällt mir
Reaktionen: warnochfrei

Aladin033

Aktives Mitglied
Thread Starter
Mitglied seit
22.08.2015
Beiträge
1.429
Aber das mit den Umlauten in Safari funktioniert immer noch nicht..
 

giesbert

Aktives Mitglied
Mitglied seit
15.12.2004
Beiträge
1.330
Das HTML-Grundgerüst muss ungefähr so aussehen (da ist übrigens noch ein Tippfehler: device-width)

Code:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"> <!-- DAS IST DER ZEICHENSATZ / DAS ENCODING -->
    <title>Malereibetrieb Mayer</title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <!-- INHALT DER SEITE -->
  </body>
</html>
Damit das funktioniert, muss das Encoding im Editor natürlich auch auf UTF-8 stehen (das ist aber normalerweise standardmäßig so)

Generell solltest du dich vielleicht mal mit den Grundlagen von HTML5 / CSS vertraut machen.
 
  • Gefällt mir
Reaktionen: Aladin033 und warnochfrei

Aladin033

Aktives Mitglied
Thread Starter
Mitglied seit
22.08.2015
Beiträge
1.429
Das HTML-Grundgerüst muss ungefähr so aussehen (da ist übrigens noch ein Tippfehler: device-width)

Code:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"> <!-- DAS IST DER ZEICHENSATZ / DAS ENCODING -->
    <title>Malereibetrieb Mayer</title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <!-- INHALT DER SEITE -->
  </body>
</html>
Damit das funktioniert, muss das Encoding im Editor natürlich auch auf UTF-8 stehen (das ist aber normalerweise standardmäßig so)

Generell solltest du dich vielleicht mal mit den Grundlagen von HTML5 / CSS vertraut machen.
Ah verstanden.
Hatte da ein Video gefunden, da wurde es ohne gemacht.
Allerdings scheint es auch nur den Safari zu stören, chrome und firefox scheint das nicht zu interessieren :D

Ich bin grade dabei mir diese anzueignen.

Vielen Dank für die Unterstützung.

Gruß
Kester
 

giesbert

Aktives Mitglied
Mitglied seit
15.12.2004
Beiträge
1.330
Hatte da ein Video gefunden, da wurde es ohne gemacht.
Sollte man nicht machen, siehst ja, was dabei rauskommt ;-).

Die Zeichensatz-Angabe ist zwar lt. W3C wohl nicht Pflicht, sollte es aber IMHO sein, würde uns viele kaputte Webseiten ersparen …
Allerdings scheint es auch nur den Safari zu stören, chrome und firefox scheint das nicht zu interessieren :D
Das ist kein Argument. HTML-Code soll nicht mit einem oder zwei Browsern in einer bestimmten Systemumgebung, sondern plattformunabhängig mit möglichst allen Browsern in möglichst allen Umgebungen funktionieren. Dafür ist HTML schließlich gedacht.

Ein Webbrowser ist in der Regel ein außerordentlich gutmütiges Stück Software, das noch versucht, selbst den gröbsten Mist einigermaßen sinnvoll zu interpretieren. Einerseits nett, andererseits führt das zu schlampigen Code und halbverstandenem HTML (das ist nämlich gar nicht so simpel wie man meinen möchte …). Safari ist da mitunter etwas rigider und nicht so verständnisvoll wie Firefox oder Chrome ;-)

Man verlasse sich nie darauf, dass das schon alles stimmen wird, nur weil es der eigene Browser (zufällig) scheinbar korrekt anzeigt.

Du solltest deinen Code zumindest in der Anfangszeit regelmäßig dem Validator vom W3C anvertrauen. Der ist zwar auch nicht unproblematisch, aber meiner Erfahrung nach gerade am Anfang recht hilfreich: https://validator.w3.org/
 
Oben