Welcome to WebmasterWorld Guest from 18.232.124.77

Forum Moderators: not2easy

Message Too Old, No Replies

overflow scrollbar adding margin?

     
3:25 am on Dec 7, 2015 (gmt 0)

Moderator from US 

WebmasterWorld Administrator lifeinasia is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 10, 2005
posts:5844
votes: 190


I have an image carousel with thumbnail previews. All looks well if there are just a few images. The thumbnail area is fine with more than a few, as the overflow just scrolls automatically. However, when the scrollbar gets added, a margin is being added to the right of the main image. I inspected the resulting CSS for the divs surrounding the main images, and I can't find anything adding the margin. Is this regular behavior?

Without:
http://www.lifeinkorea.com/graphics/without_scrollbar.gif

With:
http://www.lifeinkorea.com/graphics/with_scrollbar.gif
3:45 am on Dec 7, 2015 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15754
votes: 827


Is the added width identical to the width (in pixels) of a scrollbar? It sure looks suspiciously similar. Is it identical on all browsers and/or all devices?

What if anything do each of the elements' respective CSS have to say about "overflow:"?

What happens if you intentionally force a vertical scroll on one element or the other?
5:01 am on Dec 7, 2015 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 21, 2002
posts:772
votes: 14


Looks like you might be letting the 'browser figure it out' on properties not set to a number? Reset CSS in effect?

Has the parent object padding be set? Child object padding, margin, outline and border set?

Does this happen on all popular browsers or just your example?
4:54 pm on Dec 7, 2015 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4392
votes: 311


I inspected the resulting CSS for the divs surrounding the main images, and I can't find anything adding the margin.
Sharing that CSS information here might help you get more answers and fewer questions.


just sayin'.
5:03 pm on Dec 7, 2015 (gmt 0)

Moderator from US 

WebmasterWorld Administrator lifeinasia is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 10, 2005
posts:5844
votes: 190


Is the added width identical to the width (in pixels) of a scrollbar? It sure looks suspiciously similar.
My thoughts exactly.
It sure looks suspiciously similar. Is it identical on all browsers and/or all devices?
tested on FF, Chrome, IE. Didn't check on mobile yet (by that time, I'd already spent enough time on the issue and needed to do something else...).
elements' respective CSS have to say about "overflow:"?

Thumbnail div is auto, most others aren't specified. The container div for the full-sized images is using the default style- hidden.

Just for fun, I added width:100% on img inside that (full-sized image) container, and that seems to have fixed the issue.

Thanks!
5:08 pm on Dec 7, 2015 (gmt 0)

Moderator from US 

WebmasterWorld Administrator lifeinasia is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 10, 2005
posts:5844
votes: 190


Sharing that CSS information here might help you get more answers and fewer questions.
i would have done that originally, except that the CMS currently adds a number of divs around those elements, and posting all the styles would have made for a long post. My original question was simply if anyone had ever seen this issue scrollbars being added to one div adding a margin to successive divs.
6:30 pm on Dec 7, 2015 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4392
votes: 311


Good to know it was resolved. I looked at this last night and the "scrollbar width" suggestion offered by lucy24 looked like the best guess, but I didn't see a way to give more help without more specifics so I was curious whether you had found a fix. Thanks :)