Problem mit dreispaltigem Layout im IE

Breezah · #1 (**permalink**) 12.08.2006, 16:16

Hallo!
Zur Zeit schreibe ich ein überschaubares CMS und habe mir meine Seiten immer wieder mit FireFox, Opera und Netscape angeschaut.

Auf den IE hatte ich bis jetzt verzichtet, der verstaubt immer mehr auf meiner Festplatte aber heute war es dann soweit. Und wie es der Zufall will gabs natürlich direkt ein Problem.

Eigentlich sieht, bzw. soll es so aussehen: http://wp1022120.wp037.webpack.hoste...er/richtig.png

Das Problem sieht folgendesmaßen aus: http://wp1022120.wp037.webpack.hoste...ns/problem.png

Das Problem habe ich bereits rausgefiltert, es liegt an Tabellen mit width:100%; bei width:99%; funktioniert es auch im IE... sieht dann natürlich nicht mehr gut aus.

Welche CSS-Anweisung brauchen meine Tabellen damit sie sich nicht unter die beiden DIV Container drücken?

Folgend noch CSS des Layouts:

Code:

#left {
float: left;
width: 150px;
}

#middle {
padding: 0px 153px 5px 153px;
margin: 0px;
}

#right {
float: right;
width: 150px;
}

Header und Footer haben beide clear:both;

Ich hoffe mir kann geholfen werden.

MfG, Chris

heiko_rs · #2 (**permalink**) 12.08.2006, 16:31

Zitat:

Zitat von Breezah

Code:

#middle {
padding: 0px 153px 5px 153px;
margin: 0px;
}

Für die seitlichen Werte wäre margin sauberer.

Zitat:

Zitat von Breezah

Header und Footer haben beide clear:both;

Header braucht das nicht.

Zur Lösung des Problems: Arbeitest Du mit fester Breite?

Breezah · #3 (**permalink**) 12.08.2006, 17:16

also ob ich margin oder padding benutze -> gleiches ergebnis

Nur links und rechts sind feste größen angegeben, der mittelteil muss variabel bleiben

heiko_rs · #4 (**permalink**) 12.08.2006, 18:35

Zitat:

Zitat von Breezah

also ob ich margin oder padding benutze -> gleiches ergebnis

Natürlich, ich sprach auch nur von "sauberer".

Zitat:

Zitat von Breezah

Nur links und rechts sind feste größen angegeben, der mittelteil muss variabel bleiben

Dann gib am Besten mal komplettes Markup & CSS einer betreffenden Seite. Es gibt im Prinzip nur 2 mögliche Ursachen für das Problem, es dürfte sich also leicht lösen lassen.

Breezah · #5 (**permalink**) 13.08.2006, 13:39

Hier ist das ganze mal rausgefiltert ohne den restlichen schnick schnack.

Beispiel

Schauts euch im FF und dann im IE an.

hier direkt nochmal der Quelltext:

Code:

<!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>
<title>Drei Spalten</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
* {
    font-size:12px;
    font-family:Verdana;
    padding:3px;
}
body {
	margin: 0px;
	padding: 0px;
}
div#mainbox {
	margin:0 auto;
	width:800px;
}
div#header {
	clear: both;
	height: 50px;
	background-color: aqua;
	padding: 1px;
}
div#left {
	float: left;
	width: 150px;
	background-color: red;
}
div#right {
	background-color: lime;
	float: right;
	width: 150px;
}
div#middle {
	padding: 0px 160px 5px 160px;
	margin: 0px;
	background-color: silver;
}
div#footer {
	background-color: yellow;
	clear: both;
}
-->
</style>
</head>

<body>

<div id="mainbox">

<div id="header">
    <h1>Titel</h1>
</div>

<div id="left">

  <i>Linke Spalte</i>
  <p>Eu fugiat nulla pariatur. Velit esse cillum dolore duis aute irure dolor ut aliquip ex ea commodo consequat. </p>      
</div>

<div id="right">
	<i>Rechte Spalte</i>
  	<p>In reprehenderit in voluptate eu fugiat nulla pariatur. Cupidatat non proident, consectetur adipisicing elit, duis aute irure dolor. . </p>      
</div>

<div id="middle">
    <i>Mitte</i>
    <table style="width:100%;">
    <tr>
        <td>
            <b>Dieser Bereich wird im IE wegen width:100%; dieser Tabelle unter die beiden Seitenspalten gedrückt.<br />
            Opera und FireFox stellen es korrekt dar.</b>
        </td>
    </tr>
    </table>
</div>

<div id="footer">
   <i>Fußzeile</i>
  <p>Velit esse cillum dolore ut aliquip ex ea commodo consequat. Consectetur adipisicing elit, sed do eiusmod tempor incididunt cupidatat non proident. Ut enim ad minim veniam, mollit anim id est laborum. </p>
</div>

</div>

</body>
</html>

heiko_rs · #6 (**permalink**) 13.08.2006, 14:04

#middle bekommt "Layout" in Form von height: 1px; (nur für IE 5 und 6). Dann mußt Du nur noch das seitliche padding gegen margin austauschen (ist wie gesagt eh sauberer) und alles paßt.

Breezah · #7 (**permalink**) 13.08.2006, 18:44

vielen lieben dank...

habs jetzt so gemacht:

Code:

#middle {
  margin:0px 153px 5px 153px;
  padding:0px;
}

* html  #middle { height:1px; }
* html  #middle { margin:0px 150px 5px 150px; }

man muss im IE andere werte für margin nehmen...

heiko_rs · #8 (**permalink**) 13.08.2006, 21:27

Zitat:

Zitat von Breezah

man muss im IE andere werte für margin nehmen...

Genau, wegen des 3px-Abstandes, den der IE zwischen Floats und Non-Floats erzeugt, und der das Problem mit der verrutschenden Tabelle verursacht hat. Du kannst die beiden Starhack-Regeln übrigens zu einer zusammenfassen.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
problem mit layout --> testcase	andip	CSS	5	29.02.2008 14:10
Problem mit 3-Zeiligem Layout	guenterfrosch	CSS	6	10.08.2006 12:41
Layout Problem	smooth-graphics	CSS	3	08.08.2006 17:59
Flexibles 3-Spalten Head-Foot Layout Problem	crucho	CSS	4	26.08.2004 21:27
Layout Problem ohne Tabellen	Alex	CSS	6	03.10.2003 15:26