S6: at one point, we used to have a rounded close button without a drop shadow; we ended up with the image with drop shadow, although only compatible browsers will only display the drop shadow on the rest of the items, so the close button would stand out; we probably want to back out to the image and technique explained in http://drupal.org/node/517688#comment-2021274

Comments

seutje’s picture

seutje commented

I just did some more css/firebug tests and i found a way to make the rounded corner work in every browser. I used a close button image that is rounded, but without shadow. When that is used as background image of the <a>, you can then round it's corners and apply box-shadow to create the desired shadow effect, while older browsers still see the rounded image.

I'm confused, he says to put the rounded corners in the image and then put rounded corners in the CSS as well? wouldn't that still be an issue for browsers that don't support any type of box-shadow or transparent PNGs or any type of border-radius like IE6

or would IE6 get a square box with no shadow? they're not really the 80% we're focussing on and it's a usable fallback

ksenzee’s picture

ksenzee
she/her
commented

I think the idea is that older browsers won't recognize either the rounded corners or the drop shadow. They'll display the image as-is (rounded, with no shadow). Newer browsers will recognize the drop shadow, which will also show up as rounded, because they'll recognize the rounded corners as well. So in new browsers you'll get a rounded image with a rounded shadow and everyone is happy.

seutje’s picture

seutje commented

yea but the problem is that you can't make an image with rounded corners without using transparency, and since GIFs are ugly that leaves us with PNG, which isn't properly supported by some browsers so for them the area that's suppose to be transparent will be this ugly grey thing but I'll see what I can do

ksenzee’s picture

ksenzee
she/her
commented

Ah gotcha. I assume you're lumping 8-bit PNG (which is universally supported) in the same "ugly" category as GIFs, since the rounded edge would look a tad pixelated. Maybe an ugly 8-bit PNG where the rounded edge is slightly farther out than we want it? That way we could round it off in newer browsers and cover up the pixelation.

David_Rothstein’s picture

David_Rothstein commented
Title: Overlay S6: fix close button styling » Fix overlay close button styling
Component: other » overlay.module
Issue tags: -overlay

No idea if this was fixed or not, so just moving to the correct queue for now.

aspilicious’s picture

aspilicious commented
Status: Active » Fixed

This is already fixed...
The images that you can find in the first link are the ones we are using now!

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.