• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Firefox und Internetexplorer geben verschiedene Ansichten...

robin_02

Neues Mitglied
Hallo, hab n Problem, ich mach zum ersten mal ne Homepage (Ausbildung als Mediengestalter) und ja, es klappt so einigermaßen,aber ohne euch wär ich schon das ein oder andere mal verloren gewesen... Nun aber, ich glaub ich hab ganz viele Fehler in meinen Codes, die das Problem verursachen, nämlich die unterschiedliche Darstellung in den Browsern (und in der Vorschau von Dreamweaver wirds auch nochmal anderst dargestellt)...

Hier habt ihr 2 Bilder der verschiedenen Darstellungen:

Firefox:
http://img683.imageshack.us/img683/6856/firefoxjpg.jpg

Inet Explorer:
http://img265.imageshack.us/img265/2688/inetexplorer.jpg

Und hier ist mein Quellcode und die externe CSS datei:

<!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">

<html>
<head> <title> Homepage</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>

<img src="Pictures/Header.jpg" alt="header" name="header" width="700" height="135" id="header" border="0">
</a>
</header>

<button1>
<img src="Pictures/Buttons/Unternehmen.jpg" alt="Unternehmen" name="button1" width="135" height="50" id="button1">
</button1>

<button2>
<img src="Pictures/Buttons/Sortiment.jpg" alt="Sortiment" name="button2" width="135" height="50" id="button2">
</button2>

<button3>
<img src="Pictures/Buttons/Aktuell.jpg" alt="Aktuell" name="button3" width="135" height="50" id="button3">
</button3>

<button4>
<img src="Pictures/Buttons/Kundenservice.jpg" alt="Kundenservice" name="button4" width="135" height="50" id="button4">
</button4>

<button5>
<img src="Pictures/Buttons/Kontakt.jpg" alt="Aktuell" name="button5" width="135" height="50" id="button5">
</button5>
<stimmungsbild>
<img name="stimmungsbild" src="Pictures/stimmungsbild.jpg" width="700" height="466" alt="stimmungsbild" id="stimmungsbild" ></stimmungsbild>
<span id="content">
<content>
<br>
<headline id="headline">Wir schreiben Geschichte.</headline>
<br>
Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte
</content>
</span>
<span id="mikronavi">
<mikronavi>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Impressum
</mikronavi>
</span>
</body>
</html>

CSS-Datei:

body{
background-image:url(Pictures/background.jpg);
background-repeat:repeat-x;
}

#header{
position:absolute;
top:10px;
left:170px;
width:700px;
height:135px;
}
#button1{
position:absolute;
top:155px;
left:170px;
width:136px;
height:50px;
}
#button2{
position:absolute;
top:155px;
left:311px;
width:136px;
height:50px;
}
#button3{
position:absolute;
top:155px;
left:452px;
width:136px;
height:50px;
}
#button4{
position:absolute;
top:155px;
left:593px;
width:136px;
height:50px;
}
#button5{
position:absolute;
top:155px;
left:734px;
width:136px;
height:50px;
}
#stimmungsbild{
position:absolute;
top:210px;
left:170px;
width:700px;
height:400px;
}
#content{
position:absolute;
top:610px;
left:170px;
width:695px;
height:150px;
padding:0px 0px 0px 5px;
background-color:#FFF;
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
}
#headline{
font-family:Verdana, Geneva, sans-serif;
font-size:21px;
color:#e2011b;
}
#mikronavi{
position:absolute;
color:#FFF;
top:760px;
left:170px;
width:700px;
height:25px;
padding: 5px 0px 0px 0px;
background-image:url(Pictures/mikronavi.jpg);
background-repeat:no-repeat;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
}


Ich hoffe das ihr mir helfen könnt was ich falsch gemacht habe bzw. wo ich arbeiten muss!

P.S. die vielen "&nbsp;" habe ich deshalb gemacht weil ich nicht weis wie ich das "Impressum" sonst rechts hinkriege. Per padding wird nur der Rote Balken länger... Und seltsamerweise sind die Content, Headline und Mikronavi nur per span id möglich...

Danke schonmal im Vorraus, Gruß Robin.
 
Werbung:
Werbung:
@robin_02

Du weisst schon das du HTML5 Tags benutzt?
Dazu hast du allerdings den falschen Doctype, ausserden werden diese Tags noch nicht von allen Browsern unterstützt.

Gruss
Elroy
 
Werbung:
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Wahhhhhhh

Was ist passiert?????\(@_@)//
 
- HTML5-Tags im IE mit JavaScript: The WHATWG Blog » Blog Archive » Supporting New Elements in IE (Nachteile liegen auf der Hand: JavaScript muss aktiv sein.)

Ich glaube, die HTML5-Tags waren hier aber nur Zufall. ;)

Das hier stimmt jedenfalls auch unter Berücksichtigung von HTML5 nicht:

Code:
<span id="mikronavi">
<mikronavi>

Einen Tag "mikronavi" gibt es nicht. Gleiches gilt für <button1> bis <button5> und definitiv für <stimmungsbild>.

Also, zusammenfassend: Du kannst nicht einfach eigene Tags erfinden. <stimmungsbild> wäre zum Beispiel etwa <div id="stimmungsbild">.

Eine Übersicht gibt es unter anderem hier: SELFHTML 8.1.2 (HTML-Dateien selbst erstellen)

Validieren von HTML-Seiten: The W3C Markup Validation Service

Verlasse dich außerdem im Zweifel nicht auf die Live-Ansicht im Dreamweaver. Das kann irreführend sein. Es ist auf lange Sicht einfacher, direkt mit dem Code zu arbeiten und einen relativ standardkonformen Browser (Firefox, Chrome, Opera) zur Vorschau zu verwenden.
 
Zurück
Oben