CSS inline gallery / max-width: 100% = Scrollbar does not appear

Question

I am trying to create a CSS inline gallery.

HTML

<div id="wrapper">
    <ul>
        <li><img src="http://placehold.it/500x50" alt="" /></li>
        <li><img src="http://placehold.it/500x50" alt="" /></li>
        <li><img src="http://placehold.it/500x50" alt="" /></li>
        <li><img src="http://placehold.it/500x50" alt="" /></li>
        <li><img src="http://placehold.it/500x50" alt="" /></li>
    </ul>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  border: 0;
  -ms-interpolation-mode: bicubic;
  width: auto\9;
  height: auto;
}

html,
body {
    width: 100%;
    height: 100%;
}

#wrapper {
    width: 100%;
    background: grey;
    text-align: center;
    overflow: scroll;
}

ul {
    display: table;
    width: 100%;
    height: 50px;
    overflow: hidden;
}

li {
    display: table-cell;
    width: 100%;
}

Fiddle

The problem I am facing is that its not working (d'oh). The idea is to have #wrapper set to width: 100%; and then having the images aligned horizontal in one line inside #wrapper. To navigate between the images, a horizontal scrollbar can be used.

But as you can see, no scrollbar appears, the overflow is simply hidden.
While debugging I found that the following rule on the img elements causes the problem: max-width: 100%;. If you remove that, the scrollbar appears but the images aren't centered anymore.

As it is a responsive site, I also can't simply remove max-width: 100%;. So basically, I am stuck and don't know that to do. I don't even know why max-width: 100%; messes up the scrolling.

Can you please help me?

Edit: So in Safari 6.0.2., no scrollbar appears, but in Firefox 19.0.2 everything seems fine. To me things get stranger and stranger.

@AndreaLigios Thanks for your comment. I just checked the Fiddle in Firefox 19.0.2 and indeed, everything is fine there, but not in Safari 6.0.2. — Sven, Mar 19 '13 at 16:22
I think the problem is in Safari only. Chrome & FF works for me. — Jack M., Mar 19 '13 at 16:24
In Safari I see the scrollbar disabled because it displays only one image. — otinanai, Mar 19 '13 at 16:25
Since its a Safari problem, you might want to look into http://stackoverflow.com/questions/8946869/force-scrollbar-on-safari — Jack M., Mar 19 '13 at 16:26
Ok... sorry I don't have Safari installed. But it does seems a lot of code for the purpose... and what is `width: auto\9;` :O — Andrea Ligios, Mar 19 '13 at 16:26
I've added Safari tag, hopefully more people will come to help. P.S: You may want to use `overflow-x: scroll` instead of simple overflow... — Andrea Ligios, Mar 19 '13 at 16:28

Simon · Accepted Answer · 2013-03-20T08:37:44.130

2

The problem isn't safari per say, here's a working solution:

http://jsfiddle.net/6fjV9/2/

#wrapper {
    width: 100%;
    background: grey;
    overflow: scroll;
}

ul {
    display: table;
    width: 2500px;
    height: 50px;
    table-layout: fixed;
}

li {
    display: table-cell;
    vertical-align: top;
}

img {
    display: block;
}

You set your list's width to 100% of its parent, which just takes the viewport size, as its own width is also 100%. The list must have the width of all its children in a line, e.g. 5 * 500 = 2500. While FF seems to just resize the "table" to its content (maybe table-layout: fixed; is an important style property here), safari keeps its size at 100%, causing no scrollbars as it's just as wide as its parent.

Update: Or just set no width at all with display: table. http://jsfiddle.net/6fjV9/4/

edited Mar 20 '13 at 08:37

answered Mar 19 '13 at 16:37

Simon

7,182
2
26
42

Ah I see, thank you! So on another note if somebody else runs into this issue: https://coderwall.com/p/tctqaa does not necessarily brings any advantages! "don't use wrapper with width of 20000 pixels" Thats wrong I believe, as the Fiddle above clearly shows that such a wrapper width is needed . – Sven Mar 19 '13 at 17:05
Well I haven't tried to set no width at all to be honest, but it should work, try it out ;). – Simon Mar 20 '13 at 08:36

CSS inline gallery / max-width: 100% = Scrollbar does not appear

1 Answers1