IE verschiebt das Layout von Powl, 27.07.2006 22:29

IE verschiebt das Layout

soja 27.07.2006 21:08

browser

Moin,
die Seite wird von FF und Mozilla korrekt dargestellt aber der IE6.0 schiebt den Mittelteil also meine Navigationsleiste und den Inhalt unter den linken bzw. rechten Teil der Seite. Denkbar schlechter Ort.
Muss ich mit festen Positionsangaben (px nicht em) arbeiten? Geht es auch so und wenn, wie?

Danke für eure Mühen.

Hier mal mein Quelltext:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Start</title>
<style type="text/css">

body, p a { color: black;
  background-color: white;
      font-size: 100.01%;
      font-family: Helvetica,Arial,sans-serif;
      margin: 0; padding: 1em;
      min-width: 78em; /* Mindestbreite  */  }

h1 { font-size: 1.5em;
     margin: 0 0 0.7em; padding: 0.3em;
     text-align: center;
     background-color: #fed;
     border: 2px ridge silver;  }

html>body h1 { border-color: gray; /* Farbangleichung an IE */ }

/*--------------- Hier beginnt die linke Seite ---------------*/

ul#Navigation { font-size: 0.83em;
      float: left;
                 width: 7em;
      margin: 10em 0 1.2em;
                 padding: 0;
      border: 1px dashed silver;  }

ul#Navigation li { list-style: none;
margin: 0;
padding: 0.5em; }

ul#Navigation a { display: block;
padding: 0.2em;
font-weight: bold; }

ul#Navigation a:link { color: blue;
background-color: #eee; }

ul#Navigation a:visited { color: #666;
background-color: #eee; }

ul#Navigation a:hover { color: black;
background-color: white; }

ul#Navigation a:active { color: white;
background-color: gray; }

/*--------------- Hier beginnt Info-rechts ---------------*/

div#Info-rechts { font-size: 0.9em;
                  float: right;
                  width: 18em;
                         height: 50em;
                         margin: 0em 9em 0em 0em;
                  padding: 0;
       background-color: #eee;
                  border: 1px dashed silver;  }

div#Info-rechts h2 { font-size: 1.33em;
margin: 0.2em 0.5em; }

div#Info-rechts p { font-size: 1em;
margin: 0.5em; }

/*--------------- Hier beginnt die Hauptnavigation ---------------*/

div#Hauptnavigation { margin: 0em 26em 1em 7em;
       padding: 0em 1em;
       border: 1px dashed silver;
                         min-width:24em;  }

* html div#Hauptnavigation { height: 1em;
/* Workaround 3-Pixel-Bug IE */ }

div#Hauptnavigation h2 { font-size: 1.2em;
margin: 0.2em 0; }

div#Hauptnavigation p { font-size: 1em;
margin: 1em 0; }

.homebutton  {  width:80px;
  height:80px;
                 margin: 0.2em 0em 0em 0em;}

a.home:link {display:block; background-image:url(../navi-gifs/button1.gif); width:80px; height:80px;}
a.home:hover {background-image:url(../navi-gifs/button1h.gif);}
a.home:visited {display:block; background-image:url(../navi-gifs/button1.gif); width:80px; height:80px;}
a.home:hover {background-image:url(../navi-gifs/button1h.gif);}

a.gaestebuch:link {display:block; background-image:url(navi-gifs/button2.gif); width:80px; height:80px;}
a.gaestebuch:hover {background-image:url(navi-gifs/button2h.gif);}
a.gaestebuch:visited {display:block; background-image:url(navi-gifs/button2.gif); width:80px; height:80px;}
a.gaestebuch:hover {background-image:url(navi-gifs/button2h.gif);}

a.fotos:link {display:block; background-image:url(navi-gifs/button3.gif); width:80px; height:80px;}
a.fotos:hover {background-image:url(navi-gifs/button3h.gif);}
a.fotos:visited {display:block; background-image:url(navi-gifs/button3.gif); width:80px; height:80px;}
a.fotos:hover {background-image:url(navi-gifs/button3h.gif);}

a.real-life:link {display:block; background-image:url(navi-gifs/button4.gif); width:80px; height:80px;}
a.real-life:hover {background-image:url(navi-gifs/button4h.gif);}
a.real-life:visited {display:block; background-image:url(navi-gifs/button4.gif); width:80px; height:80px;}
a.real-life:hover {background-image:url(navi-gifs/button4h.gif);}

a.studium:link {display:block; background-image:url(navi-gifs/button5.gif); width:80px; height:80px;}
a.studium:hover {background-image:url(navi-gifs/button5h.gif);}
a.studium:visited {display:block; background-image:url(navi-gifs/button5.gif); width:80px; height:80px;}
a.studium:hover {background-image:url(navi-gifs/button5h.gif);}

a.wg:link {display:block; background-image:url(navi-gifs/button6.gif); width:80px; height:80px;}
a.wg:hover {background-image:url(navi-gifs/button6h.gif);}
a.wg:visited {display:block; background-image:url(navi-gifs/button6.gif); width:80px; height:80px;}
a.wg:hover {background-image:url(navi-gifs/button6h.gif);}

a.links:link {display:block; background-image:url(navi-gifs/button7.gif); width:80px; height:80px;}
a.links:hover {background-image:url(navi-gifs/button7h.gif);}
a.links:visited {display:block; background-image:url(navi-gifs/button7.gif); width:80px; height:80px;}
a.links:hover {background-image:url(navi-gifs/button7h.gif);}

a.kontakt:link {display:block; background-image:url(navi-gifs/button8.gif); width:80px; height:80px;}
a.kontakt:hover {background-image:url(navi-gifs/button8h.gif);}
a.kontakt:visited {display:block; background-image:url(navi-gifs/button8.gif); width:80px; height:80px;}
a.kontakt:hover {background-image:url(navi-gifs/button8h.gif);}

/*--------------- Hier beginnt der Inhaltsteil ---------------*/

div#Inhalt {    margin: 0 26em 1em 7em;
      padding: 0 1em;
      border: 1px dashed silver;  }

* html div#Inhalt { height: 1em; /* Workaround 3-Pixel-Bug IE */ }

div#Inhalt h2 { font-size: 1.2em;
margin: 0.2em 0; }

div#Inhalt p { font-size: 1em;
margin: 1em 0; }

/*--------------- Hier beginnt der zweite Inhaltsteil -------------*/

div#Inhalt2 {
  margin: 0 26em 1em 7em;
      padding: 0 1em;
      border: 1px dashed silver;  }

* html div#Inhalt2 { height: 1em; /* Workaround 3-Pixel-Bug des IE */ }

div#Inhalt2 h2 { font-size: 1.2em;
margin: 0.2em 0; }

div#Inhalt2 p { font-size: 1em;
margin: 1em 0; }

/*--------------- Hier beginnt die Fusszeile ---------------*/

p#Fusszeile { clear: both;
      font-size: 0.9em;
      margin: 0em 9em 0em 0em; padding: 0.1em;
      text-align: center;
      background-color: #eee;
                 border: 1px dashed silver; }

</style>
</head>
<body>

<div id="Inhalt"><p>Dies ist der Inhalt</p></div>
<div id="Inhalt2"><p>Dies ist der zweite Inhalt</p></div>

<p id="Fusszeile">Die Fußzeile.</p>

</body>
</html>

Beitrag melden

– Informationen zu den Bewertungsregeln

IE verschiebt das Layout
Powl 27.07.2006 22:29

browser
– Informationen zu den Bewertungsregeln
Moin,

Jau nordisch ;) auch so!

Erstmal sorry, aber die komplette Seite zu lesen übersteigt im Moment meine Fähigkeiten. Das css ist ja schon ziemlich umfangreich.
Dem body min. 78em zu zuweisen, hälst Du das für eine gute Idee? Wenn ich höher skaliere wird bloß mein horizont(aler Scollbalken) weiter.
em ist gut und nützlich aber % sind auch noch da.
Kennst Du die Unterschiede des "box models" zwischen IE und Browsern?
Ok, dann ist das mit rahmen nicht so unproblematisch, weil [oh wie herum isses nun?] Der IE Gesamtbreite annimmt und Rahmen, padding nach innen schiebt, während Browser Rahmen und padding oben aufaddieren.
Ohne den Quelltext komplett gelesen zu haben, vieleicht liegt's daran.
Wobei, auch EM ist relativ. Wenn ich das richtig verstanden habe, richtet sich das auch nach eingestellter Schriftart, nicht nur nach Schriftgröße. Irgendwie ist das wohl "M" abhängig.

Ich habe einen groben Umriss, dessen was Dir vorschweben mag. Suche nach Vorlagen für ein dreispaltiges Layout mit float. Da wirst Du sicher viele Anregungen für eine passende Umsetzung finden. Die mittlere Spalte nochmal horizontal zu unterteilen ist dann kein goßes Problem mehr glaube ich.
viel Erfolg

netten Tag
^da Powl

--
===============================
powl.hat-gar-keine-homepage.de/
Beitrag melden

–
Informationen zu den Bewertungsregeln
IE verschiebt das Layout
Ingo Turski Homepage des Autors 28.07.2006 12:32

browser
– Informationen zu den Bewertungsregeln
Hi,

Hier mal mein Quelltext:

warum gibst Du nicht einen Link auf http://de.selfhtml.org/css/layouts/mehrspaltige.htm#kopf_fuss an und zusätzlich auf Deine geänderte Version?

<div id="Hauptnavigation">
<table class="Navigation">

und warum verschandelst Du das CSS-basierte Layout mit einer völlig unpassenden Tabelle?

<img src="navi-gifs/button1h.gif" alt="Home" class="homebutton">

und warum gibst Du hier für eindeutig IDentifizierbare Elemente Klassen an?
Passen die ganzen Bilder denn überhaupt nebeneinander in die Box?

freundliche Grüße
Ingo

--
[barrierefreie Webseitenerstellung » Suchmaschinenoptimierung | em?] (Hommingberger Gepardenforelle;-)
Beitrag melden

–
Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

soja: IE verschiebt das Layout