content shift IE6

[Luki_be]

Hi,

on page load and refresh i get a content shift in IE6. I was thinking some width problem but i tried debugging with borders on the usual suspects but didn't see anything sticking out.

Anybody knows what's the culprit?

page

css

[Paul O'B]

It's probably because you don;t have the height and width attributes in the image and the browser doesn't know how much space to allocate until the image is loaded and the has to adjust.

 <img src="http://www.dzinelabs.com/sandbox/GrupoMP/../GrupoMP/Images/cavalhoprincipal.jpg" alt="foto de cavalo mec&acirc;nico com prancha e estrutura mec&acirc;nica" width="526" height="397" /

[Luki_be]

jeez, IE6 doesn't stop to amaze me. I would never have figured that one out :-)

[Luki_be]

Paul, seems there's more under the hood: the shift doesn't occur anymore on refresh, but on initial load it still does. Atleast at my end.

Any clues?

page
Good css
bad ie css

[Paul O'B]

Hi,

It's much better than it was but I can still occasionally see the shift.

I think you are running into this bug for which there is no cure. IE6 can't handle percentage margins until it knows the width of the elements concerned which is why you get the jog effect.

I tried the usual fixes (and even removing the image altogether) but the effect is still there. There may be another trigger but I couldn't spot it. I always avoid percentage margins because of this bug.

There may be a solution if you divided the page up without using margins (e.g three percentage width containers) and then used inner elements to create the spacing but that would be too much to do at this stage.

[Luki_be]

I was afraid it would be that bug...

I assume changing the margins in ems also wouldn't be an option being it a fluid lay-out...

[RyanReese]

Noo that would make it an elastic layout .

[Luki_be]

Well, at the moment i'm reading up at the percentage bug, Paul mentioned.

I think i'm gonna try with feeding IE the expression shown there (if i can get it to work), otherwise feeding IE ems so in IE it will be an elastic lay-out. I can live with that.

[Luki_be]

Well, the expression is no option i noticed. I need to have a negative value in the expression and i have no clue as how to do that lol. I suppose it's not as easy as just giving -5 because it doesn't have any effect. (eventual replies are maybe better send in private as it seems to be OT).

[RyanReese]

I think in JS you can find the absolute value of that, wrap that in () and outside it put a -, it should be able to...I know it's posible to do negative values.

[Luki_be]

I think i have it working....

Would be so kind as to check the pages in IE6?

Page

[Paul O'B]

I'm not seeing a shift in ie6 anymore

[RyanReese]

Missed your post Luki, on my mothers IE6 (native) no shift.

Edit:

Tried so many times to convert her..even tried deleting it/hiding it

[Luki_be]

YEAHHHHHHH lol.

Oh no.... when adding the ie sheet to the live site it's all messed up: float drops all over the place. I can't find anything wrong/missing in the css or the page.

page without percentage fix

page with fix

Jeez am i getting nuts or what????

[Paul O'B]

Hi,

My maths was never very good but are those expressions correct for division?

5% would be 100/5 = 20 wouldn't it.

e.g. 100 / 20 = 5%

3% would be 100/3 = 33.3

e.g. 100/33.3 = 3%

e.g.

/* prevents box-expansion caused by too wide content in IE6 */
#maincontainer {
    overflow-x: hidden; 
    margin-left: expression(this.parentNode.offsetWidth / 20 + 'px');
}

/* keeps overflowing content visible in IE6 */
/*Also needs zoom:1 to prevent disappearing last paragraph and reappearing on resizing*/
#maincontainer * {
    position: relative; 
    zoom:1;
}

/* prevents box-expansion caused by too wide content in IE6 */
#rightcol {
    overflow-x: hidden; 
    margin-left: expression(this.parentNode.offsetWidth / 20 + 'px');
    margin-right: expression(this.parentNode.offsetWidth / 20 - 'px');
}

/* keeps overflowing content visible in IE6 */
#rightcol * {
    position: relative; 
}

#sidebar {
    margin-left: expression(this.parentNode.offsetWidth / 33.3 + 'px');
}

Of course I think you probably should have been multiplying them by .05 and by .03

[Luki_be]

Oh my.... it seems you're correct Paul: 20 and 33.3 are the correct values:

Page

No more drops and as far as i can tell no shift anymore :-)

Now, what i did wrong was just using the expressions stated in the article about the percentage bug without giving it proper thinking:

margin-left: expression(this.parentNode.offsetWidth / 10 + 'px'); is equivalent to margin-left: 10%;.

So in my haste i said 'oh, okay, if i need to convert 5%, it's just substituting the '10' by '5'.

But ofcourse: 10% from what? What's the width of the CB??

Jeez, i feel so stupid

Tnx a lot for the help and patience :-)