✔ Problem mit IE 6

[Do_0mi]

Hi Leute,

habe gerade ein Problem mit dem IE6.

Und zwar habe ich ein 2-Spalten Layout bei dem der Contents von einem Rand umgeben ist. Dieser Rand besteht aus mehreren divs, in denen die gif-Bilder als background angelegt sind.

<div id="content-top">
</div>
<div id="content-middle">
	<div id="content-middle-right">
		content text ......
	</div>
</div>
<div id="content-bottom">
</div>

CSS:

#content-top {
    background-image: url('images/content-top.gif');
    background-repeat: no-repeat;
    margin: 10px 0px 0px 185px;
    padding: 0px;
	height: 9px;
}

#content-middle {
    background-image: url('images/content-middle-left.gif');
    background-repeat: repeat-y;
	background-position: top left;
    margin: 0px 0px 0px 185px;
}

#content-middle-right {
    background-image: url('images/content-middle-right.gif');
    background-repeat: repeat-y;
	background-position: top right;
    margin: 0px;
    padding: 0px 10px 0px 10px;
}

#content-bottom {
    background-image: url('images/content-bottom.gif');
    background-repeat: no-repeat;
    margin: 0px 0px 0px 185px;
    padding: 0px;
	height: 9px;
}

Nun zerhaut jedoch der IE 6 die id #content-top und #content-bottom zur Seite. In Firefox funktioniert alles normal.


Hoffe ihr könnt mir helfen.
Danke schonmal im Vorraus

Gruß, Domi

 

[Maik]

Hi,

gib den besagten Elementen overflow:hidden mit auf den Weg, damit der IE6 sie in der gewünschten Höhe anzeigt, und nicht einen Platzhalter darin setzt, der sich an der globalen Schriftgröße orientiert, die höher als neun Pixel ausfällt.

mfg Maik

 

[Do_0mi]

hey,

danke erstmal.

habe jetzt in die #content-top und #content-bottom den besagten overflow: hidden; integriert.

funktioniert aber trotzdem noch nicht komplett.
was hab ich da falsch gemacht?

#content-top {
    background-image: url('images/content-top.gif');
    background-repeat: no-repeat;
    margin: 10px 0px 0px 185px;
    padding: 0px;
	height: 9px;
	overflow: hidden;
}

#content-bottom {
    background-image: url('images/content-bottom.gif');
    background-repeat: no-repeat;
    margin: 0px 0px 0px 185px;
    padding: 0px;
	height: 9px;
	overflow: hidden;
}

Gruß

 

[Maik]

Gut möglich, dass desweiteren The IE6 Three Pixel Text-Jog in Erscheinung tritt.

mfg Maik

 

[Maik]

Gut möglich, dass desweiteren The IE6 Three Pixel Text-Jog in Erscheinung tritt.

Bingo

Lösung:

#left {
        background-color: #fff;
    float: left;
    width: 185px;
        height: 100%;
    padding: 0px;
        margin: 0 0 0 0 !important;
        margin: 0 -3px 0 0;
        position: fixed;
}

#content-top {
    background-image: url('images/content-top.gif');
    background-repeat: no-repeat;
    margin: 10px 0 0 185px !important;
    margin: 10px 0 0 182px;
    padding: 0px;
        height: 9px;
        overflow: hidden;
}

#content-bottom {
    background-image: url('images/content-bottom.gif');
    background-repeat: no-repeat;
    background-position: top right;
    margin: 0 0 0 185px !important;
    margin: 0 0 0 182px;
    padding: 0px;
        height: 9px;
        overflow: hidden;
}

mfg Maik

 

[Do_0mi]

wow. was es alles für bugs gibt

danke Maik
klappt nun alles