2 columns layout - footer jumps around in IE

In IE5 on mac it's not your footer moving to the left but your wrapper's content. It looks like it has something to do with alignment properties in the body and wrapper but I'm sure one of the gurus will let you know.

I have had a look in IE6 Win but don't see the action you're describing but maybe I'm being dense.

You may like to get rid of the F.O.U.C effect though with either an empty script tag in the head or changing from style to link tags on the stylesheet.

Hugo.

hmm

Right at the very bottom of the page, the footer shifts 2 px from the left.

I'm using version 6.0.2900.2180

Anyone got any ideas?

I can't see anything that'd cause it to move? Everything should be the same width and centered?

Well it's a month on and I still can't see the problem you're describing!

I see that you're sticking with the F.O.U.C though

Hugo.

I think I see what you are describing, see screen grab. But don't have an answer yet.

BTW you have vaildation problems that need to be fixed see here http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.sabbathcat.com%2Fw00t%2Fnews.html

DisinfectedBarfbag I'm not clear what you're seeing here your jpg shows an identical rendition to that which i'm seeing in IE; it's centered, does not move around and is near and dammit the same as FF

I'm not convinced that were not on a fools errand here.

Sabbethcat can you please describe exactly what you are experience with this footer, and apologies if I'm missing something obvious :?

Hugo.

Hugo,
I can see a difference in the 2 browsers mentioned. If you look at the screengrabs below you should see what I see.

The 1st is from Firefox the 2nd from IE6, I have just checked the site in Opera and it looks the same as in fx.

You should see that in IE6, part of the graphic from the main box (between 'All Dates...' and the Copyright notice is shifted a few pixels to the right. This does not happen in Opera or Firefox.

Yeah, for clarification...

And the version of IE..

..

I should add that I don't know what FOUC means? Fade Out Under Characters? Fat Opaque Underlined Characters? Fall over upturned chimpanzee?

ah.. Pennty Drops. the Flash of Unstyled Content..

To be honest I rarely use IE other than at work, and that's very rarely so I'd not witnessed the whole FOUC thing that often and thought it was a memory thing (my work PC is ancient).

Do you mean get rid of

<style type="text/css">
     @import "styles.css";


</style>

and have a

<link href="styles.css" rel="stylesheet" type="text/css">

instead?

Ah, was looking at the wrong thing apologies, problem is the graphics are being knocked out when testing the styles so not sure why it's doing that, it's in haslayout mode, for the moment try adding position:relative to the ruleset and see if that helps at all (probably wont) if not add to it a negative left:-2px in a star selector filter for IE only, best I can think of at the moment but it is a hack not a solution really.

Hugo.

Re the F.O.U.C yes it will be neutralized by inclusion of script tags or link tags in the head, an empty script tag will suffice and is allowed.

Hugo.

ah cool! Thanks Hugo!

What's the syntax for making something IE only?

* html #element {

}

Keep in mind, IE7 won't read it.

Cool yeah, IE7 actually renders the footer okay, so that's cool.

Thanks for all the help guys

That's good , sorry it so long to get around to :oops: had a feeling that IE7 would be ok and as it wont read the star selector filter you should be safe with using that method.

Now this furthers my dislike of tft screens if I had moved back to my lovely old lumbering crt I would have probably seen the graphic straight away.

Hugo.

No problem Hugo! I aprecaite all the help,even more so when that help is voluntary.

Yeah, I still love my CRT, colours , definition / sharpness. The only downsize is the 1ft sq of desk space it takes up.

Though short CRT's are around the corner.

hmnn - I think the footer is somehow moving faster than the rest of the page- that or it's clamping the the right hand rather than relative.

I tried setting it to releative positioning, but this didn't change anything ..

Have a look in IE < 7

I tried putting it inside the container, but that created more weirdness in positioning vertically.

Anyone ?

Could it be a rounding error? Use even numbers in widths when you are centering.

Unless it's rounding to the nearest hundred - no.

Try it in IE 4,5,6 and see the behaviour it exibits.

It's as it the top half of the site is centering to the screen width, but the footer is moving maybe two or three times as much , as if it is trying to center itself to a much larger width.

Off hand I don't see why that is happening and don't have time to delve. You will need to employ some debugging to track the problem down.

Isolate and reduce your layout to bare minimum, comment out all of the content and non essential rules until the problem goes away in which case add back in rules and content one by one.

It would help to post up a simplified bare layout to trouble shoot if you can't track the problem down.

Hugo.

Could it be something to do with these two style rules?

* html #footer { margin-right:-2px; } 
* html #footernocol { margin-right:-2px; }

(Its not auto on both sides, so it won't center, but attach the element to within 2px of the right hand edge.)

I was going by this:
and this:

You assume I have any of those but I do not.

Hi guys, thanks for the replies.

Triumph - You quoted my original post, it's not exibiting that specific behavior any more, that's why I posted the screenshot right after yours - There isn't the 2px shift any longer, instead it behaves like I described in the last post.

Nice mature attitude - Assume you have IE? It'd be a given surely? You're a 'guru' but refuse to check on the most widely used browser?

Why bother posting guesses to a solution if firstly you don't read what someone has posted , and secondly can't actually view the behaviour first hand?

Chris - I'll have a try with that and report back.

Hugo- I'll put up a simplified version this weekend.

Don't worry about a simplified version too much as Chris pointed out, you have placed a negative >right< margin on the footer, not sure where you got that from, I originally suggested you shift the footer to the left (not margin) .

Remove the margin-right add position relative margin:0 auto and the left shift -2px for IE. There may well be other problems introduced but have a play with that.

Hugo.