Problem mit dreispaltigem Layout im IE

**Benny-one** · 12.08.2006, 21:25

Wenn man deinen gesamten Quellcode hätte, könnte mal dran rumspielen.
Ich würde den Teil mit "Die letzten 5 Beiträge" noch in die Tabelle mit reinnehmen.

**stf]Daywalker** · 12.08.2006, 23:11

ja, ich werde was zusammen stellen, aber erst morgen

das geht nicht, weil es dann nicht mehr so aussieht, wie ich es mir vorgestellt habe

In der Tabelle hätte es noch nen grauen rand etc.

**stf]Daywalker** · 13.08.2006, 12:40

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>

**Kropff** · 13.08.2006, 17:14

bei div#middle nicht mit padding, sondern mit margin arbeiten.

gruß
peter

**stf]Daywalker** · 13.08.2006, 17:28

weiß ich das es korrekter ist -> ändert nichts an der sachlage

**Kropff** · 14.08.2006, 08:59

Original geschrieben von stf]Daywalker
weiß ich das es korrekter ist -> ändert nichts an der sachlage

setzt mal bei

PHP-Code:


<table style="width:100%;">

den wert auf z.b. 95%

gruß
peter

**RanzigeMilch** · 15.08.2006, 09:13

also bei mir im dw setzt er den width wert der Tabelle im verhältnis zum main-div.
das problem liegt daran, dass du alle divs überlagerst und die positionierung nur durch float und padding gestaltest.
was auch irgendwie schwachsinn ist. setz die divs auf block und positionier die richtig dann wirst du auch nicht das tabellen problem haben!!

**Kropff** · 15.08.2006, 10:26

also bei mir im dw

den interessiert hier keinen

und die positionierung nur durch float und padding gestaltest.

das sollte man auch so machen

was auch irgendwie schwachsinn ist.

nee, ist es nicht.

setz die divs auf block

sind die eh schon

dann wirst du auch nicht das tabellen problem haben

ist nur ein kleines ie-problem, siehe zwei threads weiter oben

gruß
peter

**RanzigeMilch** · 15.08.2006, 10:49

doch dw interessiert weil er ie validierung benutzt.

man setzt divs nicht übereinander und arbeitet dann mit abständen zum rand sondern man setzt sie neben bzw untereinander auf eine ebene wenn sie auf einer ebene stehen sollen.

so wie er es macht sieht das 3dimensonal so aus (---- = 1 div)
............----
......----
----
richtig wärs aber so:

---- ---- ----

der ff interpretiert anders bzw nimmt einem oft die richtige positionierung ab. der Ie ist oft "dumm" und macht das so wie mans schreibt.
was aber noch lange nicht bedeutet das das ganze ein problem ist da man es ja auch einfach richtig positionieren kann.

die tabelle auf 95% zu setzen ist der größte schwachsinn den ich je gehört habe...
der ie setzt die tabellenbreite anhand der mainbox-divs. dann versucht er durch padding=160 die tabelle rechts vom linken div zu positionieren. da er dann aber durch width=100% (also 800px) mit dem linken div nicht mehr klar kommt setzt er des drunter. das ist ein ganz normaler vorgang den der ff anders mach weil er css-spezifisch oft "schlauer" arbeitet.

und bitte glaube mit divs mit float zu positionieren ist einfach nur humbug - macht man nur um innerhalb des contentdivs einen div am rand zu halten..
man kanns natürlich wie der kropff das will einfach hinschludern.
man kanns aber auch einfach richtig machn!

hilfe zu 3 divs positionieren (dynamisch oder fest) findest du hier (CSS-Hilfe):

intensivstation

**wahsaga** · 15.08.2006, 11:14

Original geschrieben von RanzigeMilch
doch dw interessiert weil er ie validierung benutzt.

Was'n für 'ne Validierung ...?
Im Zusammenhang mit dem IE ist das Wort Validierung doch wohl ein Scherz?

man setzt divs nicht übereinander und arbeitet dann mit abständen zum rand sondern man setzt sie neben bzw untereinander auf eine ebene wenn sie auf einer ebene stehen sollen.

So'n Quark.

und bitte glaube mit divs mit float zu positionieren ist einfach nur humbug

Das ist Humbug.

- macht man nur um innerhalb des contentdivs einen div am rand zu halten..

Du vielleicht - weil du es nicht vernünftig einzusetzen weißt?

man kanns aber auch einfach richtig machn!

Dann zeig doch mal bitte an einem konkreten Beispiel, wie's deiner Meinung nach "richtig" wäre.

**Kropff** · 15.08.2006, 11:32

@RanzigeMilch
sorry für das, was ich jetzt sage, aber ... dw-benutzer können das garnicht richtig beurteilen, weil dieses programm einen vernüftigen aufbau mit margin, padding und float garnicht zuläßt. zumal der im layout-modus für die divs immer mehr platz beansprucht, als laut css vorgesehen ist. damit wird dann in der layout-ansicht alles zerhauen. kenne das selber von meiner kollegin.

doch dw interessiert weil er ie validierung benutzt.

der kam doch in der version 6 noch nicht mal mit verschachtelten divs klar. mosert immer herum, da stimmt was nicht, obwohl der code absolut valide war.

gruß
peter

Problem mit dreispaltigem Layout im IE