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!
  1. div#container {  
  2.     margin: 0 auto;  
  3.     width: 1024px;  
  4.     height: auto;  
  5.     overflow: hidden;  
  6.     background-image: url(images/container-bg.jpg);  
  7.     background-repeat: no-repeat;  
  8. }  
  9.   
  10. div#content {  
  11. overflow: hidden;  
  12.     background-image: url(images/content-bg.jpg);  
  13. }  
  14.   
  15. div#left {  
  16.     overflow: hidden;  
  17.     background-image: url(images/left-bg.jpg);  
  18.     background-repeat: no-repeat;  
  19.     width: 262px;  
  20.     float: left;  
  21. }  
  22.   
  23. div#center{  
  24.     overflow: hidden;  
  25.     width: 500px;  
  26.     float: left;  
  27. }  
  28.   
  29. div#right{  
  30.     overflow: hidden;  
  31.     background-image: url(images/right-bg.jpg);  
  32.     background-repeat: no-repeat;  
  33.     width: 262px;  
  34. }  
‹ 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
  1. div#left {margin-right: -3px;}  
  2. 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:
  1. div#left { *margin-right: -3px;}    
  2. 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:
  1. <!--[if lt IE 7.]>  
  2. <style type="text/css">  
  3. div#left { margin-right: -3px;}    
  4. div#right { margin-left: -3px;}  
  5. </style>  
  6. <![endif]-->  
A feltételek közé zárt HTML kód csak az IE 7. előtti IE verziókban lesz értelmezve.