ugrás a tartalomhoz

IE6 ablak méretezésekor szétcsúszik a CSS tartalom

joed · 2008. Júl. 20. (V), 02.29
Hello!

Promléma a következő. Az alábbi projektem során tapasztalatam (kizárólag IE6-ban), hogy ha átméretezem a böngésző ablakát, vagy AJAX-al módosítom egy DIV tartalmát, akkor a tartalmat burkoló DIV balra kiugrik a képernyőről.

http://clipboard.hu/iebug/

Mind a CSS (CSS 2.1) és mind a HTML (XHTML 1.0 Strict) valid.

Erre tud valaki orvosságot?

Előre is köszi!
‹ JS eval bug FF-ban Automatikus dátum ›
 ■
1

megoldás

Fraki · 2008. Júl. 20. (V), 06.08

#base {
	xfloat:left;
}
(AJAX-szal)
3

ez mi?

joed · 2008. Júl. 20. (V), 13.00
Szia!

A megoldás nem ez volt, viszont nem találtam referenciát 'xfloat' tulajdonságra. Leírnád, vagy tudnál referálni, hogy pontosan mi is ez?

Köszi!
5

megoldás

Fraki · 2008. Júl. 20. (V), 18.40
Nincs olyan, hogy xfloat, a #body float tulajdonságát ki kell ütni (ezt akarta jelenti az, hogy egy x-et tettem elé), és akkor jó lesz.
2

tobb sebbol verzik

toro · 2008. Júl. 20. (V), 10.18
ez a css tobb sebbol verzik:

valoszinuleg azert lovi ki balra az IE a base divet, mert a definicioban benne van a 
float:left;
margin-left:-437px
ezzel egyutt viszont a 
left:50%;
position:relative
parost mar nem tudja feloldalni az atmeretezes utan

ugyanakkor nezetem szerint elvileg ertelmezhetetlen a 
body (height:100%)
es ugyanigy elegge idegenul nez ki a 
#menubarIE {....
display:block;
float:left;
height:47px;
position:absolute;
top:150px;
width:100%;
z-index:1;
}
floatolt, vagy abszolut pozociomnalt az elem? a <div> definicio szerint block szintu elem, miert kell ezt deklaralni?

az alkalmazott kozepre pozicionalas megoldas ugyanakkor azt a gondot is felveti, hogy 800x600 alatt az oldal bal szele el fog tunni, es scrollbarral nem lesz elohozhato.

probalj meg szerintem elolrol indulni, es w3c definiciok alapjan a leheto legegyszerubben epitsd fel.
4

re:

joed · 2008. Júl. 20. (V), 13.12
Szia!

Igen, tudom, hogy szemantikailag sok a szemét még a CSS-ben. Sok módosításon ment keresztül és még messze áll a véglegestől, ráfér egy kiadós takarítás. A "display:block;" tulajdonságokat pedig néhol megadom, mert pl mikor tervezek vagy debug-olok, a FireBug-ba nem kell beírni a tulajdonság nevét, csak átállítom pl. 'none'-ra :]

A MEGOLDÁSRÓL:
Igen, a probléma a negatív margós középre pozicionálással volt. Ezt nem szeretni az IE, ezért a középre igazítást egy 'margin: auto 0;'-val kell helyettesíteni. A minta oldalt meg fogom szüntetni, ezért mások okulásául bemásolom ide a hibás és a helyes definíciót:

HIBÁS:

#base {
	position:relative;
	width: 874px;
	margin-left: -437px;
	padding:0px;	
	left: 50%;
	float:left;
	clear:both;
	background-image: url(../images/baseBorderLR.gif);
	background-repeat: repeat-y;
	background-position: 0px 0px;
	z-index: 0;
}
HELYES:

#base {
	position:relative;
	width: 874px;
	margin: 0 auto;
	padding:0px;	
	clear:both;
	background-image: url(../images/baseBorderLR.gif);
	background-repeat: repeat-y;
	background-position: 0px 0px;
	z-index: 0;
}
Bár konkrét megoldást nem kaptam, azért köszönöm szépen a segítséget. A helyes megoldást itt és itt találtam meg.


Üdv.
6

téma

Fraki · 2008. Júl. 20. (V), 18.43
A minimálfixet adtam meg, amivel működik. A floatot ki kellett ütni. (Nem is volt értelme, ahogyan a clearnek sincs.) Lehet negatív eltolással is középre igazítani, ez ízlés meg helyzet kérdése.