Overflow-x not working in Opera

**murphaloid** · Mar 10, 2012 19:56

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!

**RyanReese** · Mar 10, 2012 20:51

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.

**murphaloid** · Mar 11, 2012 06:03

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>

</div>
<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>

</div>

</div>

</div>

</div>

**RyanReese** · Mar 11, 2012 10:29

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

Code:

#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...

Code:

.thumbContainer {
height:105px;
overflow-x:scroll;
}

You need to go fix up the rest of your CSS now.

**murphaloid** · Mar 11, 2012 12:37

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

**RyanReese** · Mar 11, 2012 12:45

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

)

**murphaloid** · Mar 11, 2012 13:38

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?

**RyanReese** · Mar 11, 2012 14:17

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

http://www.pmob.co.uk/search-this/scroll12.htm

Hope this was of help, sorry

.

**RyanReese** · Mar 11, 2012 14:33

Seems to be working in Opera/Chrome (Untested in FF/others)

Code:

<!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&amp;coverThumb.jpg" 
alt="Camera in rain protector"/><span><img src="images/gallery/prod-shots/Cam&amp;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&amp;domThumb.jpg" 
alt="Director & cinematographer"/><span><img src="images/gallery/prod-shots/will&amp;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&amp;lukeThumb.jpg" 
alt="Director & lead actor"/><span><img src="images/gallery/prod-shots/will&amp;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)

**murphaloid** · Mar 11, 2012 14:58

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

**RyanReese** · Mar 11, 2012 15:12

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.

User Tag List

Thread: Overflow-x not working in Opera

Thread Tools

Display

Overflow-x not working in Opera

Bookmarks

Bookmarks

Posting Permissions