ugrás a tartalomhoz

Div keret szétcsúszás IE alatt

monghuz · 2006. Ápr. 16. (V), 13.13
Hali!

A gondom a következő a weblapoa híreket egy keretben jelenítem meg. Ezek a "dobozok" egy tartalmi részben jelennek meg ami melett baloldalt van egy menü div is.

A dobozok css kódja:
  1.  html .boxhead h2 {height1%;} /* For IE 5 PC */  
  2.   
  3. #maincontent .sidebox {  
  4.     margin0 auto/* center for now */  
  5.     width670px/* ems so it will grow */  
  6.     backgroundurl(images/keret/sbbody-r.gif) no-repeat bottom right;  
  7.     font-size100%;  
  8.     overflow:none;  
  9. }  
  10. #maincontent .sidebox .boxhead {  
  11.     backgroundurl(images/keret/sbhead-r.gif) no-repeat top right;  
  12.     margin0;  
  13.     padding0;  
  14.     text-aligncenter;  
  15. }  
  16. #maincontent .sidebox .boxhead h2 {  
  17.     backgroundurl(images/keret/sbhead-l.gif) no-repeat top left;  
  18.     margin0;  
  19.     padding22px 30px 5px;  
  20.     colorwhite;  
  21.     font-weightbold;  
  22.     font-size1.2em;  
  23.     line-height1em;  
  24. }  
  25. #maincontent .sidebox .boxbody {  
  26.     backgroundurl(images/keret/sbbody-l.gif) no-repeat bottom left;  
  27.     margin0;  
  28.     text-align:left;  
  29.     overflow:hidden;  
  30.     padding5px 30px 31px;  
  31. }  
Eddig nem volt vele semmi gond, hosszú szöveges tartalmakat teljessen jól kezelte (persze bizonyos méreteken belül), aztán egy hirnél két képet belinkeltem, egy másik oldalról aminek a hatására a tartalmi rész a bal menüsáv alá kerül mintha nem férne el, persze FF alatt hibátlanul megy.
A két kép igaz hog nagyobb, de img tag-ben átméreteztem öket hogy elférjenek..

Pár napja volt egy blogmark pont ilyen témával ott azt irták hogy

overflow:auto; -t és
<!--[if IE]>
<style type="text/css">
body {word-wrap: break-word;}
</style>
<![endif]-->

használjak, de ezzel se oldódott meg a dolog, amúgy azt nem értem hogy maga a doboz a szülöelemére (ami a tartalmi rész) miért van hatással..
az oldalt itt nézhetitek meg, hogy miröl is beszéltem eddig :P
 
1

Work around

janoszen · 2006. Ápr. 16. (V), 21.52
Igazából ez az, amikor a hajadat tépheted. Javaslom, hogy IE alatt 1-2 pixel ráhagyással dolgozz és akkor menni fog.

Most vettem észre: IE alatt a jobb oldali dobozkának FF alatt 1 px bal bordere van, IE alatt 2px. Szerintem ez adja a hibát...

Így adtad meg: border-left-width: thin;
Ezt nyilván másképp értelmezik a böngészők...
2

IE

Bártházi András · 2006. Ápr. 16. (V), 22.57
A hiba pontosan az, hogy ha megadsz egy fix szélességet egy elemnek, akkor az Internet Explorer azt nem fix szélességnek veszi, hanem a minimum szélességnek. A szabvány szerint ilyenkor bár a tartalomnak túl kell folynia, de a befoglaló doboznak attól még nem szabad, hogy megváltozzon a szélessége. Mivel IE alatt ilyenkor megnő a befoglaló doboz szélessége, ezért már nem fér ki mellé az odarakandó másik elem, ezért csúszik szét minden.

A megoldás viszonylag egyszerű, ezeknek a befoglalóknak egy overflow: hidden-t kell beállítani, és nem lesz gond vele.

Ha jól értettem, hogy miről van szó.
3

most más merre csúszik :p

monghuz · 2006. Ápr. 16. (V), 23.58
A tipp bejött köszi, most már nem kerül a menü alá a tartalom, bár furcsálottam hogy nem a kis dobozoknak kellett beállítani, hanem magának az egész tartalmi résznek amiben a dobozok is vannak, de lényeg hogy megy..

Viszont most a tartalom kicsit kevesebb mint a kép.. és valamiért elrondítja a doboz alját, viszont ha a tartalmat még megtoldom pár <br>-rel hosz a szöveg hosszabb legyen mint maga a kép, akkor meg semmi gáz.. szóval most jobb híján <br>-eket irogatok :D
4

Nem tudom...

janoszen · 2006. Ápr. 17. (H), 08.38
Igazából nem tudom, mi okozhatja, de ajánlom a webdeveloper toolbar kiegészítőt a Firefoxhoz, azzal lehet style information-öket nézegetni. :D

Hasznos lehet, hogy ha bevezetsz tesztelésre egy olyan szabályt, hogy:
  1. div  
  2. {  
  3.  border:1px solid red;  
  4. }  
Egyébként meg van egy script hiba az oldalon, nekem állandóan üvöltözik az IE miatta...