<div overflow: auto> problem in module.

bdanielsson · 26.10.2004, 00:16

I've created a module with a list of images scrolling down the page and used this code:

Code:

<div
style="overflow: auto; width: 168px; height: 420px;">the images</div>

The problem I'm having is that in Safari, it extends the columns and pushes the footer content all the way down to the length of the images..... even though you can't see any of the images below the 420px frame.

It works fine in Camino and Firefox on Mac. I'm not sure if it's exclusive to Safari, or if any PC browsers encounter this. I don't have access to a PC to test it.

Is this a template issue? I have my front page news content as in a div overflow frame and when I remove the module from the page it's just fine. It's only doing it with the module.

I need it to work because a lot of people I know use Safari and most people on Mac don't bother to try different browsers.... at least none of the people I know.

Any ideas?

Mambo 4.5.1a
http://bdanielsson.com

Edit: Here are comparison screenshots... Camino & Safari

zorkhh · 26.10.2004, 00:57

Hi,

i think, thats a safari problem. I use the same CSS on my site. You may check, if it displays wrong in safari, too. Ii don't own a mac. So i can't check it.

bdanielsson · 26.10.2004, 01:32

Hey, I didn't see any modules on your site that used a div overflow. But as far as Safari goes... you site was pretty much unfunctional with it. The right column was pushed left into the main body and the navigation menu didn't work.

It worked fine in Camino.

Troubadour · 26.10.2004, 03:27

Odd - apart from the issue outlined in your screenshots there were no other problems viewing the site in Safari for me. I'm using 1.2.2 of Safari on 10.3.5.

I'm no css guru unfortunately, so I'd probably start checking out the sites of people who are, particularly:

http://www.positioniseverything.net/
http://www.meyerweb.com/eric/css/
http://www.thenoodleincident.com/tut...css/index.html
http://www.brainjar.com/

I'll keep my eyes open... sorry I can't help more.

bdanielsson · 26.10.2004, 03:46

Thanks for looking. I don't think it's a CSS issue because my news has a div overflow and when I remove that module... the site looks fine. It's only an issue with that module in the left column.

Troubadour · 26.10.2004, 04:38

I think overflow is a css property - and Safari has plenty of css issues. Not quite Windows or Mac IE problems, but enough.

In particular, Safari has issues with 100% height... although it's probably not the problem here.

Are there other <div overlow> tags in the site?

bdanielsson · 26.10.2004, 06:48

The <div overflow> tags are only in the index.php for the news and in the html content of the module. There aren't any <div overflow> tags anywhere in my CSS. Is that what's wrong? Should I have put it somewhere in the CSS instead of the module html?

Troubadour · 26.10.2004, 08:08

No, not at all - css properties don't have to be limited to the stylesheet and can be embedded in the page itself. It should work either way.

Just spinning ideas here - perhaps a negative margin on the bottom could solve it?

bdanielsson · 26.10.2004, 21:20

Thanks... but no, that didn't work. This is what I tried:

Code:

<div
style="overflow: auto; margin-bottom: -900px; width: 168px; height:
420px;">

Maybe I'll try creating a blank template and putting the images on it and use an iframe in the module.

Troubadour · 27.10.2004, 08:16

Another thought I had is to do with Safari's weird issues with "Height: 100%"

It's possible that there's a cascade of properties that's causing the height of the overflow to be recognised as the 100% height.

If you take a look here:

http://www.quirksmode.org/css/

You might find some inspiration - particularly in the table of compatible properties for Safari.