I have an overlfow-x property on an image thumbnail gallery to make it scroll horizontally, which is fine in everything but Opera. Ive read that Opera doesnt support it!???
Is there a general, simple way to get around this or do you need to see the code?
Thanks!
Well Opera doesn’t start supporting overflow-x until Opera 9.5 Beta 1. That was released in 2007, and you shouldn’t have to worry too much about users in that old browser. Opera users are used to upgrading frequently and I doubt the 9.4 and below market is even existant for your website, if at all.
If of course, you are seeing it not work in a version of Opera later than 9.5 Beta1, than we will need to see code here :). Preferably a website if you have it.
Ah I see. Well maybe its my markup that’s the issue! I’m wondering now if its something to do with the white-space property? The site is not yet online, but here is the (probably quite dodgy) code for the gallery in question (2 horizontally scrolling thumbnail galleries which display a larger image below when you hover over the thumbnail) -
#gallery #leftCol {
width:692px;
}
#galleryBox {
border:1px solid #000;
overflow:hidden;
overflow-y:hidden;
position:relative;
padding-top:6px;
padding-bottom:405px;
}
#gallery h5 {
font-size:1.1em;
margin-bottom:-13px;
padding:0 5px;
color:#e02427;
}
#gallery .galleryDiv {
width:680px;
height:105px;
padding:10px 2px;
overflow:scroll;
overflow-y:hidden;
white-space:nowrap;
margin-left:2px;
margin-bottom:10px;
border-bottom:1px solid #000;
}
#gallery #galleryDiv .thumbContainer {
height:105px;
display:inline;
overflow-x:scroll;
}
#gallery .thumbnail {
width:150px;
height:84px;
}
.thumbnail:hover{
background-color: transparent;
}
.thumbnail span{ /CSS for enlarged image/
position: absolute;
visibility: hidden;
text-decoration: none;
}
.thumbnail:hover span{/CSS for enlarged image/
visibility: visible;
top: 308px;
left: 3px; /position where enlarged image should offset horizontally/
z-index: 50;
}
<div id=“subWrapper”>
<h2>Gallery</h2>
<div id="leftCol">
<div id="galleryBox">
<h5 id="firstGallery"><a href="#firstGallery">Film Stills</a></h5>
<div class="galleryDiv">
<div class="thumbContainer">
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/cafe-shiftyThumb.jpg"
alt="Luke in Cafe" /><span><img src="images/gallery/cafe-shiftyLG.jpg" alt="Luke in Cafe" /></span></a>
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/dogsThumb.jpg"
alt="Dogs"/><span><img src="images/gallery/dogsLG.jpg" alt="Dogs"/></span></a>
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/cafe-proprietorThumb.jpg"
alt="Cafe Scene" /><span><img src="images/gallery/cafe-proprietorLG.jpg" alt="Cafe Scene"/></span></a>
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/gilchristThumb.jpg"
alt="Man In Fear Sandwich Board"/><span><img src="images/gallery/gilchristLG.jpg" alt="Man In Fear Sandwich Board"/></span></a>
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/coach-crashThumb.jpg"
alt="Road Crash Scene"/><span><img src="images/gallery/coach-crashLG.jpg" alt="Road Crash Scene"/></span></a>
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/crash2Thumb.jpg"
alt="Car Crash Close Up"/><span><img src="images/gallery/crash2LG.jpg" alt="Car Crash Close Up"/></span></a>
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/police-station-2Thumb.jpg"
alt="In Police Station"/><span><img src="images/gallery/police-station-2LG.jpg" alt="In Police Station"/></span></a>
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/forkThumb.jpg"
alt="Man Holding Fork"/><span><img src="images/gallery/forkLG.jpg" alt="Man Holding Fork"/></span></a>
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/luke-in-police-stationThumb.jpg"
alt="Anthony Fox in Police Station" /><span><img src="images/gallery/luke-in-police-stationLG.jpg" alt="Anthony Fox in Police Station" /></span></a>
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/newspaper-revealThumb.jpg"
alt="Gilchrist in Newspaper"/><span><img src="images/gallery/newspaper-revealLG.jpg" alt="Gilchrist in Newspaper"/></span></a>
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/man-in-fear-boardThumb.jpg"
alt="Man In Fear Sandwich Board"/><span><img src="images/gallery/man-in-fear-boardLG.jpg" alt="Man In Fear Sandwich Board"/></span></a>
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/luke-in-streetThumb.jpg"
alt="Anthony in Street"/><span><img src="images/gallery/luke-in-streetLG.jpg" alt="Anthony in Street"/></span></a>
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/hoodyThumb.jpg"
alt="Hoody Close Up"/><span><img src="images/gallery/hoodyLG.jpg" alt="Hoody Close Up"/></span></a>
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/luke-in-crash-aftermathThumb.jpg"
alt="Crash Aftermath"/><span><img src="images/gallery/luke-in-crash-aftermathLG.jpg" alt="Crash Aftermath"/></span></a>
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/running-down-hill-wide-2Thumb.jpg"
alt="Running Down Hill"/><span><img src="images/gallery/running-down-hill-wide-2LG.jpg" alt="Running Down Hill"/></span></a>
</div><!--.thumbContainer-->
</div><!--.galleryDiv-->
<h5 id="secondGallery"><a href="#secondGallery">Production Stills</a></h5>
<div class="galleryDiv">
<div class="thumbContainer">
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/prod-shots/crewFromAboveThumb.jpg"
alt="Crew Filming 1"/><span><img src="images/gallery/prod-shots/crewFromAboveLG.jpg" alt="Crew Filming 1" /></span></a>
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/prod-shots/Cam&coverThumb.jpg"
alt="Camera in rain protector"/><span><img src="images/gallery/prod-shots/Cam&coverLG.jpg" alt="Camera in rain protector"/></span></a>
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/prod-shots/boom-cafeThumb.jpg"
alt="Boom mic in cafe"/><span><img src="images/gallery/prod-shots/boom-cafeLG.jpg" alt="Boom mic in cafe"/></span></a>
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/prod-shots/busThumb.jpg"
alt="Filming a Double Decker"/><span><img src="images/gallery/prod-shots/busLG.jpg" alt="Filming a Double Decker"/></span></a>
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/prod-shots/clapboardThumb.jpg"
alt="Clapper Board on set"/><span><img src="images/gallery/prod-shots/clapboardLG.jpg" alt="Clapper Board on set" /></span></a>
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/prod-shots/filming-stationThumb.jpg"
alt="Police Station scene"/><span><img src="images/gallery/prod-shots/filming-stationLG.jpg" alt="Police Station scene"/></span></a>
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/prod-shots/luke-camThumb.jpg"
alt="Filming lead actor"/><span><img src="images/gallery/prod-shots/luke-camLG.jpg" alt="Filming lead actor"/></span></a>
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/prod-shots/make-upThumb.jpg"
alt="Make-up artist at work"/><span><img src="images/gallery/prod-shots/make-upLG.jpg" alt="Make-up artist at work" /></span></a>
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/prod-shots/will&domThumb.jpg"
alt="Director & cinematographer"/><span><img src="images/gallery/prod-shots/will&domLG.jpg" alt="Director & cinematographer"/></span></a>
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/prod-shots/multiCamsThumb.jpg"
alt="3 Cameras"/><span><img src="images/gallery/prod-shots/multiCamsLG.jpg" alt="3 Cameras"/></span></a>
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/prod-shots/willCopThumb.jpg"
alt="Director in cop costume"/><span><img src="images/gallery/prod-shots/willCopLG.jpg" alt="Director in cop costume" /></span></a>
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/prod-shots/healySideShotThumb.jpg"
alt="Tim Healy as cop"/><span><img src="images/gallery/prod-shots/healySideShotLG.jpg" alt="Tim Healy as cop" /></span></a>
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/prod-shots/will&lukeThumb.jpg"
alt="Director & lead actor"/><span><img src="images/gallery/prod-shots/will&lukeLG.jpg" alt="Director & lead actor" /></span></a>
</div><!--.thumbContainer-->
</div><!--.galleryDiv-->
</div><!--#galleryBox-->
</div><!--leftCol-->
</div><!--#subWrapper-->
Hi, you should note (this is off topic) that when you set display:inline;, you remove the ability for leements to have a height set. So this is …pointless
#gallery #galleryDiv .thumbContainer {height:105px;
display:inline;
overflow-x:scroll;
}
Onto the problem. In your code, (Opera isn’t the only one not displaying scrollbars), there is no id=“gallery”. NOWHERE in your code. So all that CSS you have that starts with #gallery is being ignored. I just removed that selector (as shown below). Also, your #galleryBox element in the HTML isn’t a parent of .thumbContainer so there is NO WAY for it to even select it. I just left the CSS as .thumbContainer and it worked. Oh, and you have to remove display:inline; for it to work also :). So your end code should be below…
.thumbContainer {
height:105px;
overflow-x:scroll;
}
You need to go fix up the rest of your CSS now.
Hi Ryan
Thank you for the feedback. I understand your point about using inline at the same time as using height but I’m confused about the other things…
Firstly, the “gallery” id is the id of the whole page, the gallery page, which is why I’m specifying it so the css knows which page to target.
Secondly, if you look again at my html, the “galleryBox” div IS a parent of .thumbContainer isnt it? Unless my understanding of what a parent element is maybe innacurate? #galleryBox is the container for .galleryDiv which is the container for .thumbContainer. Does this mean #galleryBox is a parent or something else?
I also just made the changes to the css rule you suggested but it still makes no difference in Opera 
Sorry…Im still finding my way with all this so I appreciate your feedback 
Well in the code YOU POSTED there was no id=“gallery” so I had no way of konwing you had that there :).
And pardon me about galleryDiv. You specify (all but 1 time in your CSS) that galleryDiv is an ID. You actually have it set to a class in the HTML. YOu need to change all the #galleryDiv 's in the CSS to .galleryDiv
Sorry :).
And in the code segment in my last post was put in (instead of the other part) it did work in Opera for me. What version are you running? Are you sure you followed my advice correctly? Sorry for doubting you but I have to be sure (I DID test :p)
Ha ha, ok point taken…I will be more careful to ensure the code I post here makes sense. 
Here is the new rule:
#gallery .thumbContainer {
height:105px;
overflow-y:hidden;
overflow-x:scroll;
}
I had to add “overflow-y:hidden” because if I don’t I get a vertical scrollbar in the other browsers, which I don’t need. Either way, it still wont work in Opera, but is perfect in all other browsers! I’m on Opera 11.61, the latest I think. I really cant go live until I get this sorted.
Thanks again for your advice…any other possibilities you can think of?
I have to go out in a bit, but try basing your code off this example. I have a local copy working with all but the nowrap keeping it all on the same line. Can’t finish up though, I will later on however, if you either don’t adapt your gallery to this, or noone else pitches in
[URL=“http://www.pmob.co.uk/search-this/scroll12.htm”]http://www.pmob.co.uk/search-this/scroll12.htm
Hope this was of help, sorry :).
Seems to be working in Opera/Chrome (Untested in FF/others)
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../css/styles.css" rel="stylesheet" type="text/css">
<title>kwpwebdesign.se - Startsida</title>
<style>
#gallery #leftCol {
width:692px;
}
#galleryBox {
border:1px solid #000;
overflow:hidden;
overflow-y:hidden;
position:relative;
padding-top:6px;
padding-bottom:405px;
}
#gallery h5 {
font-size:1.1em;
margin-bottom:-13px;
padding:0 5px;
color:#e02427;
}
#gallery .galleryDiv {
width:680px;
height:105px;
padding:10px 2px;
white-space:nowrap;
margin-left:2px;
overflow:auto;
overflow-y:visible;
overflow-x:scroll;
margin-bottom:10px;
border-bottom:1px solid #000;
}
#gallery .galleryDiv .thumbContainer {
height:105px;
}
#gallery .thumbnail {
width:150px;
display:inline-block;
height:84px;
}
.thumbnail:hover{
background-color: transparent;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
visibility: hidden;
text-decoration: none;
}
.thumbnail:hover span{/*CSS for enlarged image*/
visibility: visible;
top: 308px;
left: 3px; /*position where enlarged image should offset horizontally*/
z-index: 50;
}
</style>
</head>
<body id="gallery">
<div id="subWrapper">
<h2>Gallery</h2>
<div id="leftCol">
<div id="galleryBox">
<h5 id="firstGallery"><a href="#firstGallery">Film Stills</a></h5>
<div class="galleryDiv">
<div class="thumbContainer">
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/cafe-shiftyThumb.jpg"
alt="Luke in Cafe" /><span><img src="images/gallery/cafe-shiftyLG.jpg" alt="Luke in Cafe" /></span></a>
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/dogsThumb.jpg"
alt="Dogs"/><span><img src="images/gallery/dogsLG.jpg" alt="Dogs"/></span></a>
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/cafe-proprietorThumb.jpg"
alt="Cafe Scene" /><span><img src="images/gallery/cafe-proprietorLG.jpg" alt="Cafe Scene"/></span></a>
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/gilchristThumb.jpg"
alt="Man In Fear Sandwich Board"/><span><img src="images/gallery/gilchristLG.jpg" alt="Man In Fear Sandwich Board"/></span></a>
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/coach-crashThumb.jpg"
alt="Road Crash Scene"/><span><img src="images/gallery/coach-crashLG.jpg" alt="Road Crash Scene"/></span></a>
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/crash2Thumb.jpg"
alt="Car Crash Close Up"/><span><img src="images/gallery/crash2LG.jpg" alt="Car Crash Close Up"/></span></a>
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/police-station-2Thumb.jpg"
alt="In Police Station"/><span><img src="images/gallery/police-station-2LG.jpg" alt="In Police Station"/></span></a>
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/forkThumb.jpg"
alt="Man Holding Fork"/><span><img src="images/gallery/forkLG.jpg" alt="Man Holding Fork"/></span></a>
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/luke-in-police-stationThumb.jpg"
alt="Anthony Fox in Police Station" /><span><img src="images/gallery/luke-in-police-stationLG.jpg" alt="Anthony Fox in Police Station" /></span></a>
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/newspaper-revealThumb.jpg"
alt="Gilchrist in Newspaper"/><span><img src="images/gallery/newspaper-revealLG.jpg" alt="Gilchrist in Newspaper"/></span></a>
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/man-in-fear-boardThumb.jpg"
alt="Man In Fear Sandwich Board"/><span><img src="images/gallery/man-in-fear-boardLG.jpg" alt="Man In Fear Sandwich Board"/></span></a>
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/luke-in-streetThumb.jpg"
alt="Anthony in Street"/><span><img src="images/gallery/luke-in-streetLG.jpg" alt="Anthony in Street"/></span></a>
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/hoodyThumb.jpg"
alt="Hoody Close Up"/><span><img src="images/gallery/hoodyLG.jpg" alt="Hoody Close Up"/></span></a>
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/luke-in-crash-aftermathThumb.jpg"
alt="Crash Aftermath"/><span><img src="images/gallery/luke-in-crash-aftermathLG.jpg" alt="Crash Aftermath"/></span></a>
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/running-down-hill-wide-2Thumb.jpg"
alt="Running Down Hill"/><span><img src="images/gallery/running-down-hill-wide-2LG.jpg" alt="Running Down Hill"/></span></a>
</div><!--.thumbContainer-->
</div><!--.galleryDiv-->
<h5 id="secondGallery"><a href="#secondGallery">Production Stills</a></h5>
<div class="galleryDiv">
<div class="thumbContainer">
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/prod-shots/crewFromAboveThumb.jpg"
alt="Crew Filming 1"/><span><img src="images/gallery/prod-shots/crewFromAboveLG.jpg" alt="Crew Filming 1" /></span></a>
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/prod-shots/Cam&coverThumb.jpg"
alt="Camera in rain protector"/><span><img src="images/gallery/prod-shots/Cam&coverLG.jpg" alt="Camera in rain protector"/></span></a>
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/prod-shots/boom-cafeThumb.jpg"
alt="Boom mic in cafe"/><span><img src="images/gallery/prod-shots/boom-cafeLG.jpg" alt="Boom mic in cafe"/></span></a>
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/prod-shots/busThumb.jpg"
alt="Filming a Double Decker"/><span><img src="images/gallery/prod-shots/busLG.jpg" alt="Filming a Double Decker"/></span></a>
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/prod-shots/clapboardThumb.jpg"
alt="Clapper Board on set"/><span><img src="images/gallery/prod-shots/clapboardLG.jpg" alt="Clapper Board on set" /></span></a>
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/prod-shots/filming-stationThumb.jpg"
alt="Police Station scene"/><span><img src="images/gallery/prod-shots/filming-stationLG.jpg" alt="Police Station scene"/></span></a>
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/prod-shots/luke-camThumb.jpg"
alt="Filming lead actor"/><span><img src="images/gallery/prod-shots/luke-camLG.jpg" alt="Filming lead actor"/></span></a>
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/prod-shots/make-upThumb.jpg"
alt="Make-up artist at work"/><span><img src="images/gallery/prod-shots/make-upLG.jpg" alt="Make-up artist at work" /></span></a>
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/prod-shots/will&domThumb.jpg"
alt="Director & cinematographer"/><span><img src="images/gallery/prod-shots/will&domLG.jpg" alt="Director & cinematographer"/></span></a>
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/prod-shots/multiCamsThumb.jpg"
alt="3 Cameras"/><span><img src="images/gallery/prod-shots/multiCamsLG.jpg" alt="3 Cameras"/></span></a>
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/prod-shots/willCopThumb.jpg"
alt="Director in cop costume"/><span><img src="images/gallery/prod-shots/willCopLG.jpg" alt="Director in cop costume" /></span></a>
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/prod-shots/healySideShotThumb.jpg"
alt="Tim Healy as cop"/><span><img src="images/gallery/prod-shots/healySideShotLG.jpg" alt="Tim Healy as cop" /></span></a>
<a class="thumbnail" href="#galleryTop"><img src="images/gallery/prod-shots/will&lukeThumb.jpg"
alt="Director & lead actor"/><span><img src="images/gallery/prod-shots/will&lukeLG.jpg" alt="Director & lead actor" /></span></a>
</div><!--.thumbContainer-->
</div><!--.galleryDiv-->
</div><!--#galleryBox-->
</div><!--leftCol-->
</div><!--#subWrapper-->
</body>
</html>
I had a project with classmates but we moved it to 7:30 PM (3 hours from now)
Ryan you’re a bloody genius…it works!
I just had to change overflow-y to hidden in #gallery .galleryDiv. Tested and working great in all browsers.
Thanks so much for your help
You’re welcome :). Glad I was able to help.
Opera is always tricky for me to debug :(, took me a bit to get it working.