✔ div tables und der IE

PHlL · 27. Oktober 2007

Hallo,

bin dabei eine Webseite mit div tables zu bauen.

Im Firefox wird auch alles so dargestellt wie ich es mir vorstelle, im IE dagegen paßt sogut wie garnichts.

Zum Aussehen
- oben soll über die gesamte Breite eine div table gehen
- links soll an die obere table ein Menü anschließen, welches 150 px breit ist und sich nach unten der Fenstergröße anpaßt
- recht unter der oberen table und neben dem Menü soll dann der Inhalt stehen, welcher sich der Fensterbreite/höhe anpaßt

Im Firefox klappt das auch, allerdings streckt er im IE nicht ein table auf die Fensterbreite und die class .uerberschrift wird auch nicht korrekt angezeigt :/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>
titel
</title>
<link rel="stylesheet" type="text/css" href="layout/layout.css" />
</head>
<body>

<div id="oben">
<img src="grafiken/logo-klein.jpg" alt="logo" align="left" />
<p class="ueberschrift">überschrift</p>
</div>

<div id="menue">
<a href="navi.html">Unternehmen</a>
<br />
<br />
<a href="test.html">Produkte</a>
<br />
<br />
<a href="kontakt.php">Kontakt</a>
</div>

<div id="inhalt">
<h1>inhalt</h1>
</div>

</body>

body
{
background-color:white;
}
#oben
{
position:absolute;
top:0px;
left:0px;
right:0px;
height:177px;
background-image:url(../grafiken/hintergrund_oben.jpg);
}
#menue
{
position:absolute;
top:177px;
left:0px;
bottom:0px;
padding:20px;
width:150px;
background-image:url(../grafiken/hintergrund_menue.jpg);
}
#inhalt
{
position:absolute;
top:177px;
left:150px;
bottom:0px;
right:0px;
padding:20px;
background-color:white;
}
.ueberschrift
{
color:grey;
font-weight:bold;
text-align:center;
vertical-align:middle;
font-size:40pt;
}

Das ich das letzte Mal etwas mit div tables gebaut habe ist leider schon etwas länger her, deswegen hoffe ich, daß ihr mir helfen könnt.

Maik · 27. Oktober 2007

Hi,

die älteren IE-Versionen unterstützen nicht die Kombination der Positionsangaben left und right, sowie top und bottom, weshalb sich die Boxen nicht auf die gesamte Breite und Höhe erstrecken.

Abhilfe schafft da der folgende Workaround:

Code:

<!-- put IE into Quirksmode -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>
titel
</title>
<link rel="stylesheet" type="text/css" href="layout/layout.css" />
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="layout/layout_ie.css" />
<![endif]-->
</head>
<body>

<div id="oben">
<img src="grafiken/logo-klein.jpg" alt="logo" align="left" />
<p class="ueberschrift">überschrift</p>
</div>

<div id="menue">
<a href="navi.html">Unternehmen</a>
<br />
<br />
<a href="test.html">Produkte</a>
<br />
<br />
<a href="kontakt.php">Kontakt</a>
</div>

<div id="inhalt">
<h1>inhalt</h1>
</div>

</body>

layout_ie.css:

Code:

#oben {
position:absolute;
top:0px;
left:0px;
height:177px;
width:100%;
z-index:3;
}
#menue {
position:absolute;
top:0px;
left:0px;
height:100%;
width:150px;
z-index:2;
border-top:177px solid #fff;
}
#inhalt {
position:absolute;
top:0px;
left:0px;
height:100%;
width:100%;
z-index:1;
border-left:150px solid #fff;
border-top:177px solid #fff;
}

PHlL · 27. Oktober 2007

weiß nicht was ich sagen soll, bist der erste der mir wirklich geholfen hat

dank dir

das einzige was noch nicht 100% klappt, im ie habich immer noch nen rechten rand von ~20px

Maik · 27. Oktober 2007

Setz noch folgende Regel im Stylesheet ein, die die Polsterungseigenschaften des Dokumentkörpers auf null setzt:

Code:

html,body {
margin:0;
padding:0;
}

Übrigens lautet der Farbname "gray" und nicht "grey"

PHlL · 28. Oktober 2007

Danke, nun streckt er es im ie richtig

Kann es sein, daß Firefox was anderes unter 100% versteht als der IE ?

Weil im IE schließt er genau mit dem fenster ab, im Firefox kann ich aber immer noch etwas scroolen.

Wenn ich ein bild align="left" im Firefox setze klappt das, im IE hab ich allerdings nen leichten linken Rand (2-3 Pixel).

Maik · 28. Oktober 2007

Hi,

kannst du mal den aktuellen Quellcode zeigen, oder einen Link zur Seite nennen, denn ich kann jetzt nicht nachvollziehen, von welchen "100%" du sprichst, also in welcher Richtung im Firefox gescrollt werden kann.

PHlL · 29. Oktober 2007

Konnte alle Probleme beheben, bis auf das Scrollproblem im Firefox :/

Hab leider im Moment keine webspace zur Hand.

layout.css

body
{
background-color:white;
}
html,body
{
margin:0;
padding:0;
}
#oben
{
position:absolute;
top:0px;
left:0px;
height:177px;
width:100%;
z-index:3;
background-image:url(../grafiken/hintergrund_oben.jpg);
}
#menue
{
position:absolute;
top:0px;
left:0px;
height:100%;
width:150px;
z-index:2;
border-top:177px solid #fff;
background-image:url(../grafiken/hintergrund_menue.jpg);
}
#inhalt
{
position:absolute;
top:0px;
left:0px;
z-index:1;
padding: 20px;
border-left:150px solid #fff;
border-top:177px solid #fff;
}
.ueberschrift
{
color:gray;
font-weight:bold;
font-size:40pt;

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>
titel
</title>
<link rel="stylesheet" type="text/css" href="layout/layout.css" />

</head>
<body>

<div id="oben">
<img src="grafiken/logo-klein.jpg" alt="logo" align="left" hspace="0" />
<br />
<br />
<div align="center"><span class="ueberschrift">titel</span></div>
</div>

<div id="menue">
<br />
<br />
&nbsp&nbsp&nbsp&nbsp<a href="test.html">test</a>
<br />
<br />
&nbsp&nbsp&nbsp&nbsp<a href="produkte.html">Produkte</a>
<br />
<br />
&nbsp&nbsp&nbsp&nbsp<a href="kontakt.php">Kontakt</a>
</div>

<div id="inhalt">
inhalt
</div>

</body>

Im IE läuft nun alles wunderbar. Im Firefox habe ich ein Problem sobald ich im #inhalt oder #menue height:100%; eintrage.

Er berechnet scheinbar die Höhe falsch, weil er die 100% auf das ganze Fenster bezieht (quasi wird die div table dann 100% des gesamten Fensterinhaltes und da ich oben einen "Rand" von 177px habe kann ich 177px nach unten scrollen, obwohl dort nichts mehr steht. So ist zumindest meine Theorie

).

Hoffe man kann in etwa verstehen was ich meine.

Maik · 29. Oktober 2007

Hi,

ich glaub du hast mich da falsch verstanden, denn du wendest nun den IE-Hack auch auf den Firefox an.

In deiner ursprünglichen CSS-Datei layout.css ändert sich nichts, und dort musst du auch keine height:100% deklarieren, da du ja die Boxen von oben und unten positionierst, was der IE6 nicht unterstützt.

Aus diesem Grund haben wir eine zweite CSS-Datei namens layout_ie.css angelegt, die ausschliesslich für den IE bestimmt ist.

PHlL · 29. Oktober 2007

oh, danke

dann bau ich das mal schnell um

PHlL · 1. November 2007

Nun habich nur noch eine letzte Frage und dann wars das

Es sieht nun alles so aus wie es soll, allerdings gibt es da noch ein Problem.

Wenn der Inhalt so groß ist, daß man nach unten scrollen kann habe ich das Problem, daß er das Menü nur komplett anzeigt wenn ich noch nicht gescrollt habe. Sobald ich scrolle streckt er das Menü nicht wieder auf 100% Höhe. Hoffe man versteht was ich meine, sonst mache ich mal einen Screenshot.

✔ div tables und der IE

PHlL

Grünschnabel

Maik

PHlL

Grünschnabel

Maik

PHlL

Grünschnabel

Maik

PHlL

Grünschnabel

Maik

PHlL

Grünschnabel

PHlL

Grünschnabel

Neue Beiträge