27 replies [Last post]
SabbathCat
Offline
Regular
Last seen: 14 years 26 weeks ago
Joined: 2004-07-01
Posts: 23
Points: 0

Hi guys, this is probably something simple, but I can't see where there is anything in the CSS to cause the footer div to slide left the way it does in IE.

It renders perfectly in firefox Sad

http://www.sabbathcat.com/w00t/news.html

http://www.sabbathcat.com/w00t/styles.css

Any suggestions would be greatly apreciated Smile

w00t!

chazza
Offline
Regular
Last seen: 15 years 15 weeks ago
Joined: 2005-11-16
Posts: 29
Points: 0

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.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 8 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

2 columns layout - footer jumps around in IE

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

SabbathCat
Offline
Regular
Last seen: 14 years 26 weeks ago
Joined: 2004-07-01
Posts: 23
Points: 0

2 columns layout - footer jumps around in IE

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
Smile

w00t!

SabbathCat
Offline
Regular
Last seen: 14 years 26 weeks ago
Joined: 2004-07-01
Posts: 23
Points: 0

2 columns layout - footer jumps around in IE

Anyone got any ideas?

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

w00t!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 8 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

2 columns layout - footer jumps around in IE

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 Smile

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 45 weeks 3 days ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

2 columns layout - footer jumps around in IE

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

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 8 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

2 columns layout - footer jumps around in IE

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 45 weeks 3 days ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

2 columns layout - footer jumps around in IE

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.

SabbathCat
Offline
Regular
Last seen: 14 years 26 weeks ago
Joined: 2004-07-01
Posts: 23
Points: 0

:D

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?

w00t!

SabbathCat
Offline
Regular
Last seen: 14 years 26 weeks ago
Joined: 2004-07-01
Posts: 23
Points: 0

2 columns layout - footer jumps around in IE

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?

w00t!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 8 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

2 columns layout - footer jumps around in IE

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 8 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

2 columns layout - footer jumps around in IE

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

SabbathCat
Offline
Regular
Last seen: 14 years 26 weeks ago
Joined: 2004-07-01
Posts: 23
Points: 0

2 columns layout - footer jumps around in IE

Hugo wrote:
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.

ah cool! Thanks Hugo!

What's the syntax for making something IE only?

w00t!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 2 hours 34 min ago
Joined: 2004-06-30
Posts: 9669
Points: 805

2 columns layout - footer jumps around in IE

* html #element {

}

Keep in mind, IE7 won't read it.

Verschwindende wrote:
  • CSS doesn't make pies

SabbathCat
Offline
Regular
Last seen: 14 years 26 weeks ago
Joined: 2004-07-01
Posts: 23
Points: 0

2 columns layout - footer jumps around in IE

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

Thanks for all the help guys Laughing out loud

w00t!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 8 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

2 columns layout - footer jumps around in IE

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

SabbathCat
Offline
Regular
Last seen: 14 years 26 weeks ago
Joined: 2004-07-01
Posts: 23
Points: 0

2 columns layout - footer jumps around in IE

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

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. Laughing out loud

w00t!

SabbathCat
Offline
Regular
Last seen: 14 years 26 weeks ago
Joined: 2004-07-01
Posts: 23
Points: 0

2 columns layout - footer jumps around in IE

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 Laughing out loud..

Have a look in IE < 7

w00t!

SabbathCat
Offline
Regular
Last seen: 14 years 26 weeks ago
Joined: 2004-07-01
Posts: 23
Points: 0

2 columns layout - footer jumps around in IE

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

w00t!

SabbathCat
Offline
Regular
Last seen: 14 years 26 weeks ago
Joined: 2004-07-01
Posts: 23
Points: 0

2 columns layout - footer jumps around in IE

Anyone Smile?

w00t!

Anonymous
Anonymous's picture
Guru

2 columns layout - footer jumps around in IE

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

SabbathCat
Offline
Regular
Last seen: 14 years 26 weeks ago
Joined: 2004-07-01
Posts: 23
Points: 0

2 columns layout - footer jumps around in IE

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

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.

w00t!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 8 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

2 columns layout - footer jumps around in IE

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 23 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

2 columns layout - footer jumps around in IE

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.)

Anonymous
Anonymous's picture
Guru

Re: :D

SabbathCat wrote:
Unless it's rounding to the nearest hundred - no. Smile
I was going by this:
SabbathCat wrote:
Right at the very bottom of the page, the footer shifts 2 px from the left.
and this:
SabbathCat wrote:

SabbathCat wrote:
Try it in IE 4,5,6 and see the behaviour it exibits.
You assume I have any of those but I do not. Smile

SabbathCat
Offline
Regular
Last seen: 14 years 26 weeks ago
Joined: 2004-07-01
Posts: 23
Points: 0

2 columns layout - footer jumps around in IE

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.

Quote:
You assume I have any of those but I do not. Smile

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. Smile

w00t!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 8 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

2 columns layout - footer jumps around in IE

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me