I am trying to create a CSS inline gallery.HTML\[code\]<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>\[/code\]CSS\[code\]* { 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%;}\[/code\]Fiddle The problem I am facing is that its not working (d'oh). The idea is to have \[code\]#wrapper\[/code\] set to \[code\]width: 100%;\[/code\] and then having the images aligned horizontal in one line inside \[code\]#wrapper\[/code\]. 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 \[code\]img\[/code\] elements causes the problem: \[code\]max-width: 100%;\[/code\]. 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 \[code\]max-width: 100%;\[/code\]. So basically, I am stuck and don't know that to do. I don't even know why \[code\]max-width: 100%;\[/code\] 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.
While debugging I found that the following rule on the \[code\]img\[/code\] elements causes the problem: \[code\]max-width: 100%;\[/code\]. 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 \[code\]max-width: 100%;\[/code\]. So basically, I am stuck and don't know that to do. I don't even know why \[code\]max-width: 100%;\[/code\] 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.