Trying to simplify some things and use more of what FW does internally, in this case shadows and rounded corners on html layers. Problem is that on Windows IE, the text boxes have this weird light blue background drawing under the drop shadow and in the corners where the radii are.
I do not see this with graphic elements with the same settings however.
Windows IE cannot properly display transparent PNG images. There are
fixes built in to Freeway for transparent PNGs used as foreground
images, but it cannot fix them when they are used as background image
elements.
One thing you could do is to hide this effect entirely from Windows IE
users – simply use a different method of making the rounded corners
that doesn’t require images. My CSS3 Corners Action (at ActionsForge)
will make rounded corners on any HTML element using pure CSS3 – no
images needed. IE users see square sharp corners, Firefox and Safari
users (Mac or Windows) will see rounded corners. Borders can curve
along with the background color, and there’s natural transparency to
this effect.
I don’t have any equivalent for the shadows, but there is a box-shadow
property in CSS3, so it should be possible.
Walter
On Mar 25, 2009, at 2:27 PM, Solutions Etcetera wrote:
Problem is that on Windows IE, the text boxes have this weird light
blue background drawing under the drop shadow and in the corners
where the radii are.
Actually, I had done most of the work for the CSS box-shadow in my
CSS3 Corners, so I made a matching Shadow version. You can apply both
of them to the same element, and have rounded shadowed boxes with zero
images. As usual, it took me longer to write up a description of the
thing than to make it.
Just realize that people will need to see this in Safari or Firefox – IE won’t see any special effects. But it won’t break in that browser, it will just look boring.
I fiddled with that for a while, and you’re right – even though the
style is being properly applied to the image’s DIV container, these
rounded corners do not ‘clip’ the image inside. This is consistent in
Safari and Mozilla, but I haven’t read the spec to see if it’s desired
or expected behavior.
Long ago, Tim Plumb (or maybe it was Paul Dunning) had an action that
turned a foreground image into a background image. This used the old
background=… tag that isn’t valid today, but it might be nice if
that got resuscitated. Even though it’s simple enough to add an image
to a drawn DIV as a background-image, it’s still quite a few more
steps than
Drag a photo to the page, set crop and such.
Apply an Action to the image box.
And if you made it a page-level action, you could make it set-and-
forget.
Walter
On Mar 25, 2009, at 7:26 PM, Solutions Etcetera wrote:
Also the Corners action does not seem to work with grc elements so
you’ll need to use an html box with a bg grc.
