Question

I custom styled the buttons of a Colorbox lightbox on this page (click the image to load).

There are gray buttons (two arrows and an X) that do not appear in Safari (7.0.1) but appear in Chrome and Firefox.

Using web inspector to change the background to a color has no effect either.

CSS of one button:

#cboxNext {
position: fixed;
top: 47%;
right: 18px;
width: 22px;
height: 32px;
background: url("buttons.png");
background-position: -42px 0;
background-repeat: no-repeat;
background-color:white;
}
  • The .png sprite file and stylesheet are in the same directory.
  • Updating to the latest Colorbox version didn't help (I reverted back to older version).
  • I read here that Safari in the past had issue with the background shortcut syntax, hence the long form.

Any help is much appreciated!

Was it helpful?

Solution

Fixed.

The position:fixed buttons were child elements of a container that had overflow:hidden. Unlike other browsers, Safari seemed to hide the buttons inside their parent.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top