Web Hosting Talk







View Full Version : CSS Auto-Scroll problem


shiftthis
07-07-2004, 06:42 PM
If there are any CSS guru's out there, this problem is for you.

I'm designing a site that uses the CSS property for overflow:auto within a <div>. It's based upon this fixed positioning tutorial (webpages.charter.net/mmmbeer/code/css/layouts/fixed/), and works quite nicely. My biggest problem is within IE6 sometimes the text decides to go off screen to the right instead of creating scrollbars. If I resize the window slightly, the scroll bars usually appear, but if I navigate away and then back again the same issue is present. It's very annoying!

Screenshots
Problem: imagedesignpros.com/wsp/css-autoscroll-cutoff.gif
After Resize (what it should look like): imagedesignpros.com/wsp/css-autoscroll-afterresize.gif

The site can be viewed/tested at imagedesignpros.com/wsp/
and the css files are located as follows:
imagedesignpros.com/wsp/style/body.css
imagedesignpros.com/wsp/style/common.css
imagedesignpros.com/wsp/style/fixed.css
imagedesignpros.com/wsp/style/ie.css

If anyone knows any fixes or workarounds to this problem I would be very happy to hear your suggestions. I've scoured over google results and still haven't found any applicable solutions. Thanks guys.

Sorry - apparently I can't post url links until I make 5 posts. copy paste to view. Stupid rules :P

shiftthis
07-07-2004, 06:53 PM
Wouldn't you know it, five minutes after posting, I fix it. Simply switching the left margin setting to left padding in the #content <div> solved it. One of those stupid little things. [:)]

the_pm
07-07-2004, 07:15 PM
Yep. Margin pushes the box out in IE, but padding pushes it in (which is not the correct interpretation of the CSS boxmodel, but IE has a knack for getting these things wrong).

The proper way to implement this is to make sure you have an element containing the div in question. This way, pushing out has the effect IE errantly achieves. The problem with IE's version is that you can't make it push out when it's supposed to, whereas elsewhere you can control which way the container goes using this method (or not enclosing it, as the case may be).

I actually happen to like IE's interpretation. Then again, I like French fries, but that doesn't mean they're good for me :)

Paul H

ktwilight
07-08-2004, 11:07 AM
i was so determined to answer this question. lol :D
glad ya found out in a few moments.