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:
 html .boxhead h2 {height: 1%;} /* For IE 5 PC */

#maincontent .sidebox {
	margin: 0 auto; /* center for now */
	width: 670px; /* ems so it will grow */
	background: url(images/keret/sbbody-r.gif) no-repeat bottom right;
	font-size: 100%;
	overflow:none;
}
#maincontent .sidebox .boxhead {
	background: url(images/keret/sbhead-r.gif) no-repeat top right;
	margin: 0;
	padding: 0;
	text-align: center;
}
#maincontent .sidebox .boxhead h2 {
	background: url(images/keret/sbhead-l.gif) no-repeat top left;
	margin: 0;
	padding: 22px 30px 5px;
	color: white;
	font-weight: bold;
	font-size: 1.2em;
	line-height: 1em;
}
#maincontent .sidebox .boxbody {
	background: url(images/keret/sbbody-l.gif) no-repeat bottom left;
	margin: 0;
	text-align:left;
	overflow:hidden;
	padding: 5px 30px 31px;
}
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
‹ táblazatban pozició lekérdezés IE hiba a javából ›
 ■
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:

div
{
 border:1px solid red;
}
Egyébként meg van egy script hiba az oldalon, nekem állandóan üvöltözik az IE miatta...