Hilfe!!!-Unterschiedliche Darstellung in IE und MF

Stephanie78 · 13. September 2007

Bin dabei meine Website aufzubauen, die index-seite ist im rohbau
fertig.

Hab die mit ftp-uploader auf meinen webserver geladen und musste
feststellen, dass die Darstellung im Mozilla Firefox anders aussieht
als im Internet Explorer.

Hier eine Kopie vom Quelltext:

Code:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Willkommen auf fotofolio</title>
<meta name="description" content="Private Foto-Website" />
<meta name="author" content="Stephanie Schmitz" />
<meta name="keywords" content="Foto, Fotos" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />
<style type="text/css"><!--
body
{
 font : normal 83%/1.4em Verdana, sans-serif;
 background-color:#000;
 text-align:center;
 align:center;
}
h1 {font-size:18px;color:#eee;margin:0px;}
h2 {font-size:14px;color:#eee;}
p {text-align:justify;margin:0px;}

/* Die Hyperlinks */
a:link, a:visited, a:active, a:hover
{
  text-decoration:none;
  font-weight:bold;
  color:#aaa;
  font-size:12px;
}
a:active, a:hover
{
  color:#eee;
}

/* Die Hyperlinks im Menü */
a.menu:link, a.menu:visited
{
  color:#aaa;
  text-decoration:none;
}
a.menu:active, a.menu:hover
{
  color:#eee;
}

/* Der Kopf */
#kopf {
width:800px;
height:160px;
background-color:#000;
}

/* Das Menü */
#menu {
color:#fff;
background-color:#000;
border-top:1px solid #eee;
text-align:center;
padding:10px 0px;
height:40px;
}

/* Der Inhalt */
#content {
background-color:#000;
border-top:1px solid #eee;
padding:15px;
color:#eee;
align:center;
}
//--></style>
</head>
<body>

<!--  Gesamter Inhalt  -->
<div style="width:800px;margin-top:10px;text-align:left;border:solid 1px #eee;align:center;">

<!--  Titelzeile  -->
<div id="kopf"><img src=".jpg" alt="hf" /></div>

<!--  Menü  -->
<div id="menu">
<a class="menu" href="#"></a>  |  
<a class="menu" href="#"></a>  |  
<a class="menu" href="#"></a>  |  
<a class="menu" href="#"></a>  |  
<a class="menu" href="#"></a>
</div>

<!-- Inhalt -->
<div id="content">
djhkz,lczu
</div>
</div>
</body>
</html>

Was habe ich falsch gemacht???

Schon mal Danke für eure Mühe

!

CALYPTRA · 13. September 2007

Hallo Stephanie,
es wäre sehr hilfreich, wenn du mal die Adresse deiner Seite hier posten könntest, damit man sich mal ein Bild davon machen kann, was in der Darstellung unterschiedlich ist.

Stephanie78 · 13. September 2007

Oh sorry

Hier

comabird · 13. September 2007

Also, auf Safari kommt eine schwarze Seite mit weissen Rahmen und dem kryptischen Text, "djhkz,lczu".

Stephanie78 · 13. September 2007

Das ist nur Test-Gekritzel, wie gesagt, ist erst mal
nur der Rohbau.

Im Mozilla ist die Darstellung nicht mittig und unter den Links
(die Spalte oben mit den vertikalen Strichen) ist der Abstand
zum unteren Kasten größer als im IE.

steinbruch · 13. September 2007

comabird schrieb:
Also, auf Safari kommt eine schwarze Seite mit weissen Rahmen und dem kryptischen Text, "djhkz,lczu".

und bei Opera(9.2) ist der Rahmen links, im IE(6.0

) ist er zentriert...

tetti · 13. September 2007

Meinst Du die fehlende Zentrierung?

In der Tag-Style-Angabe mit dem Kommentar "Gesamter Inhalt" fehlt die Angabe, dass ein W3C-konformer Browser sich die linke und rechte Margin selber ausrechnen soll. Statt margin-top: 10px; besser margin: 10px auto 0 auto; Und loesche das align: center;.

Stephanie78 · 13. September 2007

@tetti: DANKE!!!

Und wie bekomme ich das mit dem Abstand unter den Links
noch so hin, dass es im IE genauso aussieht, wie im MF?

steinbruch · 13. September 2007

Stephanie78 schrieb:
Und wie bekomme ich das mit dem Abstand unter den Links
noch so hin, dass es im IE genauso aussieht, wie im MF?

wenn du die height-Angabe(height:40px; ) löschst siehts bei Opera und IE gleich aus :nixweiss:

BeST · 13. September 2007

Stephanie78 schrieb:
musste
feststellen, dass die Darstellung im Mozilla Firefox anders aussieht
als im Internet Explorer.

Willkommen in der Welt der Webdesigner.

Mein HTML-Tidy meldet übrigens bei Deiner Seite ein grünes Hakerl mit 0 errors und 0 warnings, diese Seite ist somit fehler- und barrierefrei.

Die Seite sieht bei mir mit MF und IE übrigens gleich aus, die Grafik http://www.fotofolio.kilu.de/.jpg fehlt halt, aber das wundert bei dem Dateinamen auch nicht.

FrankF · 13. September 2007

Stephanie78 schrieb:
Bin dabei meine Website aufzubauen, die index-seite ist im rohbau fertig.

Um eine XHTML/Strict-Seite in IE einigermaßen ähnlich hinzubekommen, solltest Du im zentralen Stylesheet:

a) einen #Wrap drumherum machen
b) margin und padding erstmal global auf Null setzen

z.B. so:

* {
margin: 0;
padding: 0;
}

Ein paar Tricks in dieser Richtung abschauen kannst Du Dir vielleicht bei meiner neuesten kommerziellen Seite hier: http://www.wh-schmitt.de/

Alle Seiten bis auf eine Tabellenseite und eine PHP-Seite sind validiertes XHTML/Strict und funktionieren in fast allen Browsern auf fast allen Betriebssystemen einwandfrei. Ein Bodensatz von unter 1% der Browser/Betriebssystemkombinationen kann nicht vollständig bedient werden. Schicksal.

Herzliche Grüße

Frank

tetti · 13. September 2007

Stephanie78 schrieb:
Und wie bekomme ich das mit dem Abstand unter den Links
noch so hin, dass es im IE genauso aussieht, wie im MF?

Dein Problem liegt vermutlich daran, dass der IE von der angegebenen Hoehe (40px) die Padding-Angabe abzieht, W3C-konforme Browser addieren die Angabe. Versuche statt padding margin im menu. Ich habe im Moment keinen IE fuer einen Vergleich.

tetti · 13. September 2007

BeST schrieb:
Willkommen in der Welt der Webdesigner.
Mein HTML-Tidy meldet übrigens bei Deiner Seite ein grünes Hakerl mit 0 errors und 0 warnings, diese Seite ist somit fehler- und barrierefrei.

Da sieht man mal wieder, dass auch der tidy nicht alles bemerkt:

1.) align:center ist keine gueltige CSS Anweisung
2.) // hat in einem Stylesheet nichts zu suchen. Kommentar ist hier /* */

comabird · 13. September 2007

Gerade nochmal kurz geklickt: unter Safari und Firefox ist jetzt alles einwandfrei zentriert. :up:

Stephanie78 · 14. September 2007

Hab das nochmal alles neu geschrieben und geprüft;
xhtml und css sind jetzt fehlerfrei

!

Stephanie78 · 15. September 2007

So, Menüleiste ist fertig, Design farblich geändert und
der Rest dauert noch .........

Guck mal

steinbruch · 15. September 2007

Stephanie78 schrieb:
So, Menüleiste ist fertig, Design farblich geändert und
der Rest dauert noch .........

Guck mal

mit Opera siehts einwandfrei aus, genauso wie bei meinem Uralt-IE...

lg christian

Stephanie78 · 16. September 2007

Hat sich erledigt

Hilfe!!!-Unterschiedliche Darstellung in IE und MF

Stephanie78

Sehr aktives NF Mitglied

CALYPTRA

Sehr aktives NF Mitglied

Stephanie78

Sehr aktives NF Mitglied

comabird

Auszeit

Stephanie78

Sehr aktives NF Mitglied

steinbruch

Sehr aktives NF Mitglied

tetti

NF Mitglied

Stephanie78

Sehr aktives NF Mitglied

steinbruch

Sehr aktives NF Mitglied

BeST

Sehr aktives NF Mitglied

FrankF

Auszeit

tetti

NF Mitglied

tetti

NF Mitglied

comabird

Auszeit

Stephanie78

Sehr aktives NF Mitglied

Stephanie78

Sehr aktives NF Mitglied

steinbruch

Sehr aktives NF Mitglied

Stephanie78

Sehr aktives NF Mitglied