CSS mozilla-specific styles...

thesun · Joined: 07 Sep 2008 Posts: 16

I've got some code in my CSS stylesheet that creates a gorgeous border around my Google map...but only in Firefox. In IE, this border gets dropped and there's just a square box with a map inside. The rounded border really makes the page look better and I'd like it to appear on all browsers, not just Firefox. So I'm wondering if anyone knows how to add code that will do that for IE.

Here's the part that makes the border appear in Firefox.

-moz-outline-radius:20px;
-moz-box-sizing:padding-box;
-moz-outline-style:solid;
-moz-outline-color:#878700;
-moz-outline-width:10px;

I'm not really a great programmer (ahem, read: not really a programmer!) so the simplest solution may be the best. I've considered ditching the code above and just doing it with a graphic instead, but the advantage of this is that it conforms nicely to surround the box no matter what the size is. I'm not sure I'd know how to do that same thing with a hard-coded graphic. (The website, by the way, is www dot onsenjapan dot net...it looks quite different in Firefox and IE...vexing to say the least!)

Any help would be greatly appreciated. Thank you!

sticks464 · Joined: 31 Dec 2006 Posts: 1173

This method only works in Gecko browsers (firefox, mozilla) not in Trident browsers (IE)
This will work in all browsers http://www.curvycorners.net/

thesun · Joined: 07 Sep 2008 Posts: 16

Okay...that curvycorners was definitely what I'm looking for. I can't seem to get it to work on the main page, but it's in place elsewhere on the site. Thanks!