Gray borders around controls in Colorbox

[espring]

I am using Colorbox 7.x-1.5 module on Drupal site, works fine, but for some reason there are gray borders (angles _| ) near controls buttons(from right side): what cause this borders? How to get rid of these gray angles? See examples.

sample
borders

[Pullo]

Hi,

This is hard to tell without seeing the page.
Could you post a link?

[espring]

I posted link (first link, sample).

[Stevie D]

Off Topic:

(Thread moved to CSS)

The default display for <button> is for it to have those outlines. Try setting button {border:none;} and see how that goes...

[espring]

Strange, I had no such issue in previous Colorbox installations I used, I haven't changed anything in original Colorbox styles. And these buttons are not separate images, it's an images from sprite (controls.png)

[Stevie D]

Strange, I had no such issue in previous Colorbox installations I used, I haven't changed anything in original Colorbox styles. And these buttons are not separate images, it's an images from sprite (controls.png)

Doesn't matter whether they are separate images or not, they are called up by the <button> element, and that has a default border. Maybe previous installations of Colorbox used different code or removed that border by default ... or maybe you removed it and forgot that you had done it

[espring]

Doesn't matter whether they are separate images or not, they are called up by the <button> element, and that has a default border. Maybe previous installations of Colorbox used different code or removed that border by default ... or maybe you removed it and forgot that you had done it

Yes, button {border:none;} should work, I did quick test with Firebug, but where is the proper place to put this code in colorbox_default_style.css?

[Stevie D]

Yes, button {border:none;} should work, I did quick test with Firebug, but where is the proper place to put this code in colorbox_default_style.css?

Anywhere you like ... if there's any other code for button then it would make sense to include it with that, but it doesn't have to go there, it just makes it easier to work with in the future.

[espring]

Anywhere you like ... if there's any other code for button then it would make sense to include it with that, but it doesn't have to go there, it just makes it easier to work with in the future.

I searched Colorbox CSS for button code but didn't find it at all. Its not in colorbox_default_style.css

[ronpat]

espring, you are correct. "button" does not appear on colorbox_default_style.css

You have to add it anywhere in that file as follows:

#cboxContent button {
    border:none;
}

[espring]

espring, you are correct. "button" does not appear on colorbox_default_style.css

You have to add it anywhere in that file as follows:

#cboxContent button {
    border:none;
}

Works fine. I tried also this

#cboxPrevious, #cboxNext, #cboxClose {
  border: none;
}

which works too, but your is shorter, so I stay with it. Thanks for the help!