Website inkompatibel trotz validem CSS & HTML - Code?!?

Tease · 16.01.2010

Hallo zusammen,

ich habe erst vor ein paar Monaten angefangen mich mit dem Thema Webdesign zu beschäftigen und stoße nun in meinem Lernprozess auf ein Problem, bei dem ich Hilfe von erfahrenen Webdesigner benötige.
Ich habe eine (Test-)Site nun soweit fertig, dass das Design im Firefox, IE & Opera richtig dargestellt wird, aber wie so oft gibt es nun Probleme mit der Darstellung in anderen Browsern. Überaschenderweiße ist diesmal nicht der IE der Übeltäter, sondern Apples Safari.
Ich habe beim Bau meiner Seite darauf geachtet validen Code zu benutzen, da ich dachte, dass damit sicher gestellt sei, dass die Site in allen Browsern gleich dargestlellt wird, aber scheinbar ist dem nicht so. :muede:

Hier der Link zur betroffenen Seite:

Das Ergebnis der W3C's HTML-Validierung: [Valid] Markup Validation of http://media-powerplant.de/Beispiele/Business-Site/index.html - W3C Markup Validator

Das Ergebnis der W3C's CSS-Validierung:

Habe nun aber mal die Seite mit "Browsershots.org" überprüfen lassen, und musste feststellen, dass Safari und Chrome die Seite nahc unten "versetzen", was katastrophale Auswirkungen auf das Design hat, siehe Screenshot. :eek:

Hier noch der HTML-Code der Seite (die css sieht man im css-Vali-Link):

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Business-Site</title>
<link rel="SHORTCUT ICON" href="favicon.ico"/>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div id="wrapper">
  <div id="main">
        <div id="header">
            <h1>Firmenname</h1>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Über uns</a></li>
                <li><a href="#">Leistungen</a></li>
                <li><a href="#">Support</a></li>
                <li><a href="#">Kontakt</a></li>
            </ul>
        </div><!-- end of header -->
<div id="content">
            <div id="oben">
            <h2>Aliquam erat volutpatphaselus</h2>
            <p class="text">non imperdiet magna facilisis atlimodo erati<br /><br />
Sed diam ipsum, rutrum placerat vehiculaliopi iaculisametlibi vestibulum nec magnaliquamjp eu vehicula lectustiampimk.</p>
            <p class="btnmehr"><a href="#">mehr</a></p>  
            </div><!-- end of oben -->
      <div id="mitte">
            <h3>Willkommen auf unserer Firmen-Website!</h3>
        <p class="text">Cras consequat aliquam sem sollicitudinultricies <br /><br />
Proin nec arcu quis elit interdum commodo sed hendrerit nulla. Vivamus a nisi libero, a tempor enim. Morbi ac turpis magna, nec accumsan ametlib antelioNam eu nunc non quam placerat rhoncus eleifend volutpat dui. Pellentesque habitant morbi tristique senectus et netus et malesuada famems ac turpis egestas.</p>
            <p class="btnmehr"><a href="#">mehr</a></p> 
                <div id="triad">
                <div class="links">
                <h4>Unsere Leistungen</h4>
                <h5>aliquam sem Lorem</h5>
<p class="triadtext">Nullam vel feugiat nulla. Aliquam eratliber volutpat. Phasellus sagittis urna sit ameti magna tincidunt dapibus.</p>
                <p class="triadbtn"><a href="#">mehr</a></p>
                </div><!-- end of links -->
                <div class="mitte">
                <div class="container">
                <h4> Projekte</h4>
                <h5>aliquam sem Lorem</h5></div>
<p class="triadtext">Nullam vel feugiat nulla. Aliquam eratliber volutpat. Phasellus sagittis urna sit ameti magna tincidunt dapibus.</p>
                <p class="triadbtn"><a href="#">mehr</a></p>
                </div><!-- end of mitte -->
                <div class="rechts">
                <div class="container">
                <h4>Anschrift &amp; Anfahrt</h4>
                <h5>aliquam sem Lorem</h5></div>
<p class="triadtextrechts">Nullam vel feugiat nulla. Aliquam eratliber volutpat. Phasellus sagittis urna sit ameti magna tincidunt dapibus.</p>
                <p class="triadbtn"><a href="#">mehr</a></p>
                </div><!-- end of rechts -->
            </div><!-- end of triad -->
        </div><!-- end of mitte -->
        <div id="unten">    
            <div class="untenlinks">
            <p>Kontakt</p>
            <p class="strich">---------------------------------------------------------</p>
<input name="betreff" type="text" class="kontaktfeld" tabindex="10" value="Schreiben Sie hier den Betreff rein" size="36" /><br /><br />
<textarea name="kontakttext" cols="34" rows="5" tabindex="20" class="kontaktmessage" >Hier können Sie Ihre Meinung mitteilen.</textarea><br /><br />
<input name="kontaktemail" type="text" class="kontaktfeld" tabindex="30" value="Geben Sie hier bitte Ihre E-Mail-Adresse an" size="36"/><br /><br />
            <p><a href="#" class="sendenbtn">senden</a></p>
            </div>
          <div class="untenrechts">
            <p class="daumen"></p>
            <p class="anderesagen">Was andere über uns sagen...</p>
            <p class="unterueberschrift">blanditiis praesentium voluptatum deleniti atque corrupti quos</p>
<p class="text">Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe evenietlpu utliberi etliberolotu voluptates repudiandae sint et molestiae non recusandae. Itaque earumai rerum hicjiklf tenetur a sapiente kilop delectus.</p>
            <div class="mann"></div>
            <p class="zitate"><a href="#">Aliquam eu mi nec odio mattis egestas...</a></p>
            <p class="zitate"><a href="#">Nam vitae sem et tellus auctor...</a></p>
            <p class="zitate"><a href="#">Morbi convallis pulvinar leo, sed feugia...</a></p>
            <p class="zitate"><a href="#">Vestibulum lobortis risus eu augue...</a></p>
            <p class="zitate"><a href="#">Lorem ipsum dolor sit amet...</a></p>
            </div>
        </div><!-- end of unten -->
      </div><!-- end of content -->
     </div><!-- end of main -->  
     <div id="footer">
         <ul>
            <li><a href="#">Home</a> | </li>
            <li><a href="#">Support</a> | </li>
            <li><a href="#">Kontakt</a> | </li>
            <li><a href="#">Jobs</a> | </li>
            <li><a href="#">Impressum</a> | </li>
            <li><a href="#">Login</a></li>
         </ul>
        <p class="copyright">Copyright  © 2010 media powerplant. Alle Rechte vorbehalten</p>
     </div><!-- end of footer --> 
    </div><!-- end of wrapper -->
</body>
</html>

Kann mir jemand vielleicht nen Tip geben, wie man solche Problem beheben kann. Vielleicht gibts ja sowas wie nen Validierungsservice für die einzelnen Browser? Wie gesagt ist das gerade der nächste Schritt in meiner Lernphase und wundere mich nun, ob es da nicht irgendwelche nützlichen Bücher oder Links gibt, die einem sagen, was z.B. Safari anders macht als Opera, warum der IE immer spinnt und wie man das behebt usw.

Vielen Dank für eure Hilfe!

Samuelll · 16.01.2010

AW: Website inkompatibel trotz validem CSS & HTML - Code?!?

Dein Problem kann ich im Safari leider nicht nachvollziehen.

Allerdings hab ich noch ein zwei andere Tips für dich :

margin-left:auto;
margin-right:auto;

Hat keinen Sinn, da auto zentrierend wirken soll.

Alternative : margin : 0 auto;

Auch kannst du dir, meiner Meinung nach, den doppelten Hintergrund für deine Header-Überschrift sparen. Den Hintergrund hast du ja bereits im Header.

Steve1405 · 17.01.2010

AW: Website inkompatibel trotz validem CSS & HTML - Code?!?

Wenn eine Webseite nach W3C valid ist, heißt das noch lange nicht, dass sie auch in allen Browsern gleich angezeigt wird, leider. Erhöht nur die Chancen, dass sie in möglichst vielen Browsern möglichst gleich aussieht.

Artisian · 17.01.2010

AW: Website inkompatibel trotz validem CSS & HTML - Code?!?

Steve1405 schrieb:
Wenn eine Webseite nach W3C valid ist, heißt das noch lange nicht, dass sie auch in allen Browsern gleich angezeigt wird, leider. Erhöht nur die Chancen, dass sie in möglichst vielen Browsern möglichst gleich aussieht.

Erhöht die Chancen und ist vor allem ein Zeichen für eine halbwegs barrierefreie Website. Auch wenn die Zahl der Nutzer eines Screenreaders sehr gering ist, sollte man diese Menschen nicht durch unvaliden Quelltext verscheuchen.

Allerdings hab ich mit Safari auch meine Probleme, die ich nicht in den Griff bekomme. Bei dir scheint's aber was mit einem margin Wert zu tun zu haben.

So schwer es fällt, aber man kann's nicht jedem recht machen. Ich programmiere so, dass es in IE und FF "identisch" aussieht. Opera schluckt das in 95% der Fälle dann auch und der Safari interpretiert da und dort halt leider wieder anders.

sokie · 18.01.2010

AW: Website inkompatibel trotz validem CSS & HTML - Code?!?

Hallo Tease,
mir ist aufgefallen, dass dein Versatz oben im Safari ziemlich genau 20px ausmacht, was dem padding des ersten h1 elements entspricht. Möglicherweise! (ich habe keine Möglichkeit das zu testen) könnte das ein bug in den webkits sein. Eine Lösung könnte darin liegen, das h1 Element mit margin (statt padding) auszurichten, oder das per absoluter positionierung hinzubekommen (wobei in dem Fall das nachfolgende <ul> Element eine entsprechende korrektur bräuchte.
wie gesagt, das ist nur eine Annahme.)

Tease · 19.01.2010

AW: Website inkompatibel trotz validem CSS & HTML - Code?!?

Okay, Danke schonmal für eure Tips!
Habe den Fehler mit Margin-left & margin-right behoben und werde nachher mal die anderen Tips umsetzen.

Aber noch kurz 'ne Frage, was meinst du denn damit?

Samuelll schrieb:
...
Auch kannst du dir, meiner Meinung nach, den doppelten Hintergrund für deine Header-Überschrift sparen. Den Hintergrund hast du ja bereits im Header.

Soory, steh gerade auf'm Schlauch.

Mal 'ne grundsätzliche Frage: Gibt's ein empfehlenswertes Buch oder online was zu dem Thema zu lesen, was ganz konkret die verschiedenen Probleme mit den einzelnen Browsern behandelt?
Es kann ja nicht sein, dass man erst mal 'ne Seite entwirft und dann Stück für Stück die Fehler ausbessern muss (und erstmal mühsam finden).
Ich denke da an so Regeln wie z.B. dass der IE (zumindest die älteren Versionen) das Boxmodell anders darstellt, da er die Margin-Werte nicht mehr zur Box zählt.
Mich interessiert das Thema momentan sehr, kann aber nicht wirklich was nützliches dazu finden. Vielleicht such ich ja auch nur falsch?

sokie · 19.01.2010

AW: Website inkompatibel trotz validem CSS & HTML - Code?!?

zu Problemen mit verschiedenen Browsern gibts hier /* Position Is Everything */ — Modern browser bugs explained in detail! eine Menge zu lesen.

Tease · 19.01.2010

AW: Website inkompatibel trotz validem CSS & HTML - Code?!?

sokie schrieb:
zu Problemen mit verschiedenen Browsern gibts hier /* Position Is Everything */ — Modern browser bugs explained in detail! eine Menge zu lesen.

Vielen Dank für den Link!
Bin über jede Quelle froh, auch wenn ich sagen muss, dass mir diese Seite außerordentlich unübersichtlich erscheint und ich gar nicht weiß, wo ich anfangen soll, also wo ich sozusagen die Basics finde. Denn es geht ja gleich sehr speziell los..... Irgendwelche ansurf-Tips?
T'schuldigung wenn ich recht unselbstständig erscheine, aber wenn man die ganzen Fachausdrücke der Bugs (noch) nicht kennt, weiß man halt nicht, was man auf der Seite zuerst lese soll.

Steve1405 · 19.01.2010

AW: Website inkompatibel trotz validem CSS & HTML - Code?!?

Hier ist eine gute Auflistung, welcher Browser mit welchen Eigenschaften Probleme hat bzw. welche er unterstützt:
Web Browser Standards Support