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
  1. #base {  
  2.     xfloat:left;  
  3. }  
(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
  1. float:left;  
  2. margin-left:-437px  
ezzel egyutt viszont a
  1. left:50%;  
  2. position:relative  
parost mar nem tudja feloldalni az atmeretezes utan

ugyanakkor nezetem szerint elvileg ertelmezhetetlen a
  1. body (height:100%)  
es ugyanigy elegge idegenul nez ki a
  1. #menubarIE {....  
  2. display:block;  
  3. float:left;  
  4. height:47px;  
  5. position:absolute;  
  6. top:150px;  
  7. width:100%;  
  8. z-index:1;  
  9. }  
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:
  1. #base {  
  2.     position:relative;  
  3.     width: 874px;  
  4.     margin-left: -437px;  
  5.     padding:0px;      
  6.     left: 50%;  
  7.     float:left;  
  8.     clear:both;  
  9.     background-image: url(../images/baseBorderLR.gif);  
  10.     background-repeat: repeat-y;  
  11.     background-position: 0px 0px;  
  12.     z-index: 0;  
  13. }  
HELYES:
  1. #base {  
  2.     position:relative;  
  3.     width: 874px;  
  4.     margin: 0 auto;  
  5.     padding:0px;      
  6.     clear:both;  
  7.     background-image: url(../images/baseBorderLR.gif);  
  8.     background-repeat: repeat-y;  
  9.     background-position: 0px 0px;  
  10.     z-index: 0;  
  11. }  
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.