Falsche anzeige in browsern

Kerze88 · 08.02.2012

Hallo Community.

Ich bin noch kein super html programierer oder sonstiges, aber ich lern es derzeit und hab jetzt ein Problem auf das ich nicht komme, im Safari wird mir die webseite super angezeigt, auf IE und Firefox jedoch total verschossen ...
Und zwar ist der text im IE nach oben verschoeben und die Auflösung ist total schlecht wenn ich es im IE öffne. Im Safari ist das nicht so.

mein Quellcode ist:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
 
  <head>
  <title>SM</title>
   </head>

 <style type="text/css">
body{background-image:url(Websiteschmiddi.jpg);background-repeat:no-repeat;background-position:center ;background-attachment:fixed; }
#navi{
 position: fixed;
 width: 500px;
 height: 100px;
 left: 38.5%;
 top: 245px;
}
#navi2{
 position: fixed;
 width: 500px;
 height: 100px;
 left: 61.5%;
 top: 700px;
}
#picture{
 position: absolute;
 width: 500px;
 height: 100px;
 left: 44%;
 top: 400px;
}
 
@charset "utf-8";
@font-face {
 font-family: 'Sansumi-UltraLight';
 src: url('Sansumi-UltraLight.ttf') format('truetype');
} 
a{font-family:Sansumi-UltraLight;font-size:9pt;color:#6f7072;text-decoration:none;
word-spacing:12px;}
</style> 
 

 
<BODY BGCOLOR="#ffffff">
<div id="navi">
<a href="index.htm">Home </a>
<a href="bewerbung.htm">Bewerbung </a>
<a href="lebenslauf.htm">Lebenslauf </a>
<a href="anlagen.htm">Anlagen </a>
<a href="kunstwerke.htm">Kunstwerke </a>
 

</div>
<div id="picture">

</div>
 

<div id="navi2">
<a href="kontakt.htm">Kontakt </a>
<a href="impressum.htm">Impressum </a>

</div>
 
 
<h1></h1>
</body>
</html>

vielen dank für die Hilfe!

cebito · 08.02.2012

AW: Falsche anzeige in browsern

Validiere bitte deine Seite, die styles gehören in den head. Transitional ist auch nicht unbedingt der geignete Doctype um zu lernen, da so die meisten Fehler kompensiert werden, ohne das du überhaupt merkst, das es Fehler sind. Dementsprechend setzt sich falsches Denken in dir fest, was später schwer wieder rauszubekommen ist. Am besten, du wählst eine Strict-Variante...

simonpicos · 08.02.2012

AW: Falsche anzeige in browsern

Mit so einem Schnipsel Code kann man nicht viel anfangen. Das ist sicher nicht der ganze quellcode (edit: doch könnte sein, aber alle bilder fehlen. daher: Siehe letzter Satz), wenn es so aussehen soll wie auf dem screenshot (oder nicht so aussehen.) Lad es am besten richtig hoch, sodass man die Seite auch mal mit allen browsern testen kann.

patrick_l · 08.02.2012

AW: Falsche anzeige in browsern

HTML validieren: The W3C Markup Validator Service
CSS validieren: Der W3C CSS Validierungsservice

Hier auch nochmal was zum lernen:

- HTML5/CSS3 Handbuch - Webkompetenz
- Einführung in XHTML, CSS und Webdesign - Michael Jendryschik
- Little Boxes | Webseiten gestalten - HTML & CSS (Peter Müller)

Edit:
Du solltest auch das CSS in eine eigene Datei auslagern bzw. getrennt bearbeiten.
So bleibt alles übersichtlicher und es ist geht schneller bei validieren von HTML und CSS.

Grüße Patrick

Misco · 08.02.2012

AW: Falsche anzeige in browsern

Um Browser übergreifend ein gleiches Bild zuhaben sollte zu Anfang auch folgende Regel stehen:

Code:

* { padding:0; margin:0; }

Deine Schrift muss in mehreren Formaten vorliegen ein Baukasten mit Code gibt es hier:

Das sollte schon mal ein paar Probleme beseitigen.

Kerze88 · 08.02.2012

AW: Falsche anzeige in browsern

Vielen Dank, validierungs seiten sind super und bieten somit ne gute grundlage für einen sauberen script, ich werde nun mal versuchen das alles zu richten. Eine Frage hätte ich allerding nocht, ich habe eine seite gefunden bei der man sich kostenlos einen Picture viewer runter laden kann und zwar hier:

http://www.simpleviewer.net/simpleviewer/

ist es nun möglich diesen auf die webseite einzubauen, oder muss ich das online machen?

Schonmal danke!