Links in rounded boxes? In ALL browsers (yep included IE8)

Question

I tried maaaany script but every time I get stuck in something bad. My goal is to create rounded boxes for links. You can see an example of I'm talking about here in the read more link (effects not necessary). Very common I know, but I want to make it work in eeeevery browsers at least safari, FF, chrome and most important IE7+ (IE6 not necessary...). The script that took me closest to the solution is Cornerz but I can't fix a very bad issue on IE8. Does anybody knows a way to get rid of this or to achieve my goal? Thank you I appreciate every support. Cheers

Answer 1

The problem your running into is differences in browser rendering. FF and Safari will render rounded corners derived from CSS. But IE8 does not render those same rounded corners. Here is a link for a work around http://www.html.it/articoli/nifty/index.html

Answer 2

As John already said Nifty Corners will work in all browsers you listed. If you want to stick to "Cornerz" you can force IE8 to emulate IE7 rendering see http://weblogs.asp.net/fredriknormen/archive/2009/03/19/change-ie8-to-ie7-compatible-mode-with-meta-tags.aspx

Answer 3

Thanks everbody but in the meanwhile I fixed it! And it seems working as I wish.

Look at here the link in the first row (bad choice gray on white :). http://testing123.webege.com/conrnerz/

I just had to add a display:inline-table; for IE8 in the link style and fix a problem with position for IE6-7.

I tried with Nifty but without success and the second suggestion is good but I wanted to find a way to make it works in IE8 running as IE8.

Many thanks hope this help I'll keep the page as long as I can and then I'll post the new link for everybody. cheers