Safari stellt gescriptete Website nicht richtig da

A

Aladin033

Aktives Mitglied
Thread Starter
Dabei seit
22.08.2015
Beiträge
1.706
Reaktionspunkte
184
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 :)
 
Metatag fürs Encoding fehlt.
 
Auch richtig.
 
Gefunden ;)
 
  • Gefällt mir
Reaktionen: warnochfrei
Und nicht vergessen die Datei auch mit dem gleichen Encoding zu speichern.
 
  • Gefällt mir
Reaktionen: warnochfrei
Aber das mit den Umlauten in Safari funktioniert immer noch nicht..
 
oneOeight schrieb:
Halt die wo die Umlaute drin stehen mit dem passenden Content-Endoding Tag.
Zum Vergrößern anklicken....
Da ich den passenden Content Ending Tag nicht kenne, habe ich es jetzt einfach auf englisch geschrieben, brachte aber auch keine Besserung.
 
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
giesbert schrieb:
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.
Zum Vergrößern anklicken....
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
 
(Doppelt)
 
Aladin033 schrieb:
Hatte da ein Video gefunden, da wurde es ohne gemacht.
Zum Vergrößern anklicken....
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 …
Aladin033 schrieb:
Allerdings scheint es auch nur den Safari zu stören, chrome und firefox scheint das nicht zu interessieren :D
Zum Vergrößern anklicken....
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/
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten