#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    300
    Rep Power
    11

    CSS: moz-opacity problem with scrolling div


    Hi all,
    Normally I'm faithful to table layout in my page design, but try to stay aware of how CSS is comming along at least as far as browser compatibility issues go. I've been wanting to use CSS for its transperancy abilities, and with my first trial page I've sadly run into same reasons I've steered away from CSS for so long.

    Hopefully all is not lost, and I may find help here. My problem is with a div that has a background image, and another div inside that containing the text which uses semi tranperant background color and "overflow : auto" to set the text apart from the background and allow scrolling. In IE, everything looks beautiful, and I wondered for a moment why I stayed away form CSS for so long. Then I tried Mozilla...

    Scrolling the text in the div is painfully slow and unresponsive to the point its almost impossible to move where you want in the text. The opaque background changes in color once you move down and leaves a seperation between the two colors or opacity, and generally works poorly.

    Here is the link, and the source is small:

    http://coinmonger.com/now.html

    Hopefully this is due to my lack of expertise using CSS, and a work-around is available.

    Currently I've downsized the background image hoping it was image size that was causing the problem (as this is just a quick test to see if I could do this), but no change. The page even loads slower using the "moz-opacity" attribute.

    Any input is appreciated!
  2. #2
  3. Wiser? Not exactly.
    Devshed God 1st Plane (5500 - 5999 posts)

    Join Date
    May 2001
    Location
    Bonita Springs, FL
    Posts
    5,905
    Rep Power
    3969
    Well, I managed to fix it up abit. I think mozilla has a rendering bug doing it the way you had it. Doesn't look like mozilla is re-drawing the background when you scroll. If you hightlight the text then things get somewhat fixed but not completely. I added another div for the background though, and it seems to work fine. I took the opacity off the layer with the text as it seems to help speed up scrolling. Although scrolling wasn't very slow for me to begin with. If you want, just add it back in and see how well it works for you.

    http://kicken.mine.nu:8008/extras/now.html
    Recycle your old CD's, don't just trash them



    If I helped you out, show some love with some reputation, or tip with Bitcoins to 1N645HfYf63UbcvxajLKiSKpYHAq2Zxud
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    300
    Rep Power
    11

    Thank you very much


    Thanks Kicken!

    I was getting quite frustrated for awhile. I will leave it just the way you have it. It makes more sense witht he extra div. I have alot to learn about CSS!

    Thanks again!

IMN logo majestic logo threadwatch logo seochat tools logo