ugrás a tartalomhoz

IE 6 rosszul számolja a szélességet

KCsaba · 2009. Feb. 11. (Sze), 14.23
Sziasztok!

A következő lenne a problémám:
Az oldal amit készítek egy headerből, egy content részből és egy footerből állna, amiket a container fog össze. Nos nekem a content rész Internet Explorer 6 alatt teljesen szétesik mert a "right" div átkerül a következő sorba. Firefox alatt tökéletes minden, meg elméletileg a kód is jó, mert a "left", "center", "right" divek szélessége pont kiadja a container szélességét, de az IE 6 valahogy máshogy számolhatja ezeket, mert ott csak akkor nem ugrik át a szélső div, ha annak szélességéből kivonok 3px-elt. A Firefoxban viszont látszik ez a 3px-el üres rész. A kérdésém az lenne, hogy ezt hogyan lehetne egyszerűen megoldani, úgy, hogy minden böngészőben tökéletesen működjön.

Előre is köszönöm!

div#container {
	margin: 0 auto;
	width: 1024px;
	height: auto;
	overflow: hidden;
	background-image: url(images/container-bg.jpg);
	background-repeat: no-repeat;
}

div#content {
overflow: hidden;
	background-image: url(images/content-bg.jpg);
}

div#left {
	overflow: hidden;
	background-image: url(images/left-bg.jpg);
	background-repeat: no-repeat;
	width: 262px;
	float: left;
}

div#center{
	overflow: hidden;
	width: 500px;
	float: left;
}

div#right{
	overflow: hidden;
	background-image: url(images/right-bg.jpg);
	background-repeat: no-repeat;
	width: 262px;
}
‹ Javascript style.display='block'/'none' Ajax-os adat nem töltődik be a helyére (Explorer) ›
 ■
1

3 pixel gap

Poetro · 2009. Feb. 11. (Sze), 14.27
Keress rá a hibára, és meglesz a megoldás.
2

-3px

KCsaba · 2009. Feb. 11. (Sze), 14.48
div#left {margin-right: -3px;}
div#right {margin-left: -3px;}
Rákerestem és be is állítottam a fönti margókat. IE-be működik is, viszont Firefoxba látszódik a 3pixeles függőleges üres rész.
3

Csak IE

Poetro · 2009. Feb. 11. (Sze), 17.04
Csak IE6 és korábbi esetén kell ezt alkalmazni, és akkor nem veszik össze a többi böngészővel.
4

Hát nem ez a megoldás. Elég

Fraki · 2009. Feb. 12. (Cs), 00.21
Hát nem ez a megoldás. Elég kár, hogy a haslayout.net -et hozza első helyen a google, nem pedig a második találatot.
5

Egy csúnyább és egy szebb megoldás

inti · 2009. Feb. 20. (P), 11.50
Egy csúnyább megoldás:

div#left { *margin-right: -3px;}  
div#right { *margin-left: -3px;}
Az IE értelmezi a * kezdetű CSS tulajdonságokat is, míg a többi böngésző figyelmen kívül hagyja.

Egy szebb megoldás:

<!--[if lt IE 7.]>
<style type="text/css">
div#left { margin-right: -3px;}  
div#right { margin-left: -3px;}
</style>
<![endif]-->
A feltételek közé zárt HTML kód csak az IE 7. előtti IE verziókban lesz értelmezve.