5 replies [Last post]
Emlyn
Offline
newbie
Last seen: 17 years 3 weeks ago
Joined: 2005-01-06
Posts: 5
Points: -1

Hoooeeeee have I entered some dangerous waters...

Well, I've read up quite a bit on the grand old problem of IE's magically shifting scrollbar, but a new problem has come up that is really quite vexing (gray-hair-inducing/vomitous), because the differences in the way that IE handles this vs Firefox are deeper than I had thought.

I have, essentially, a DIV with embedded float left and float right DIVs acting as content areas. When the inner content extends below the height of the outer DIV, it forces the browser to provide a scrollbar which allows for putting large amounts of content into small spaces.

Great. Lovely. Just what I want.

With no margin or padding on any of these DIVs everything lines up perfectly the same in Firefox and IE.

But OMG how hard it is to put either margins OR padding around EITHER the outer OR inner DIVs within this construct. Firefox and IE will absolutely NOT, EVER line up the same way, no matter how many variations of width, padding or margin tweaking I do in any combination on any of the element attributes.

Feel free to take a look at this infuriating monstrosity here:

http://www.ixwa.com/creative/prism/about.php (Deep content)
http://www.ixwa.com/creative/prism/design.php (Shallow content)

(FYI: the background is an image)

Now compare these two pages between Firefox and IE, and see how these columns shift around (between 10 and 20 pixels, in some instances).

It seems that if I make it work for one browser it breaks the other, again and again and again and again ad infinitum.

:twisted:

Anyone got a simply BRILLIANT solution to this? Or perhaps I'm just doing something so wrong with CSS that I should be flogged silly? Gently :?

Thanks.

Emlyn

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

The amazing Mozilla/IE shifting CSS scrolling div! Aaargh!

Emlyn remove the xml prolog as it's throwing IE into 'Quirks Mode' and then check how the page is performing.

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

Emlyn
Offline
newbie
Last seen: 17 years 3 weeks ago
Joined: 2005-01-06
Posts: 5
Points: -1

The amazing Mozilla/IE shifting CSS scrolling div! Aaargh!

Thanks for the tip Hugo.

I removed the xml encoding line and then started the positioning from scratch. I managed to find a reasonably good approximation between both browsers, as long as margin and padding settings were kept to a minimum. I put the xml line back in and everything seemed to hold up so I'll leave it in for now.

For those interested in the "solution" (of sorts):

It seems that altering the outer DIV is more effective than doing micro-tweaking to the inner ones because of the differences in the way that Firefox and IE handle these nested DIVs+scrollbar.

The only minor difference that I'm prepared to live with is an additional 10px padding to right of the inner left DIV in Firefox. Other than that both browsers now display pages the same whether the scrollbar is present or not. Judging by IE's popularity I made this work in IE over Firefox.

I don't even want to KNOW what this looks like on a Mac...

Emlyn

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

The amazing Mozilla/IE shifting CSS scrolling div! Aaargh!

No don't put the xml prolog back in, your switching IE into 'Quirks Mode' ; which is not a good thing !
The xml prolog must also be the very first line of code, no white space before it and no other characters both of which you have in this instance which means it's an invalid declaration.

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

MonkeyDub
Offline
newbie
Vancouver, BC
Last seen: 17 years 1 week ago
Vancouver, BC
Joined: 2005-01-22
Posts: 2
Points: 0

Re: The amazing Mozilla/IE shifting CSS scrolling div! Aaarg

Emlyn wrote:

I have, essentially, a DIV with embedded float left and float right DIVs acting as content areas. When the inner content extends below the height of the outer DIV, it forces the browser to provide a scrollbar which allows for putting large amounts of content into small spaces.

Great. Lovely. Just what I want.

Exactly what I'm looking to do, too, but IE Mac is ruining my party... but it looks like your scrolls are working fine on my Mac... cool... Do you think I could see how you have your "fullcolumn" class written in your CSS file?

Here's my first attempt... that, as mentioned, is working well everywhere but Mac IE. www.numberonerecords.com/test.html

Your site looks great!
Thanks!

Emlyn
Offline
newbie
Last seen: 17 years 3 weeks ago
Joined: 2005-01-06
Posts: 5
Points: -1

The amazing Mozilla/IE shifting CSS scrolling div! Aaargh!

Hugo--Didn't know that about the XML line. I'll either have to fix it everywhere or ditch it. Thanks for the heads-up.

Monkey dub--your scroll looks good on Firefox and IE6 for windows so you should be all set, er, except Mac. I'd recommend 10px margin-bottom.

Here's the link to the scroll css I wrote if you're interested (quite a few statements in here):

http://www.ixwa.com/creative/prism/style.css

Enjoy.

Emlyn