Jump to content
Sign in to follow this  
steffanantonas

Rounded Corners For Navigation in Internet Explorer (IE)

Recommended Posts

steffanantonas

I've been searching through the forums but I havent found a solution to this yet. I've been trying to put rounded corners on the nav menu using the border-radius.htc hack all morning, but I've been unsuccessful. (for anyone not familiar with this hack here are the details: ------- To get rounded corners in IE, Here is the solution for MOST websites: http://code.google.com/p/curved-corner/ Just add the .htc file to the same directory as your style.css file add this line in the CSS for the class you want to have rounded corners behavior: url(border-radius.htc); and voila, rounded corners in IE. Works with IE6 too! Edit: Also, make sure you use -moz-border-radius: px; -khtml-border-radius: px; -webkit-border-radius: px; border-radius: px; in the same class. ------------- Has anyone got this to work or found a better solution using Platform Pro + Base? *really* hoping someone has an answer. Any solution will do. Here's a link to the site. As you can see, rounded corners works with all other browsers just fine.

Share this post


Link to post
Share on other sites
cmunns

I just tested it and couldn't get it to work either.

Share this post


Link to post
Share on other sites
steffanantonas

Any ideas why this might be happening? I've done this successfully with other WordPress themes in the past.

Share this post


Link to post
Share on other sites
cmunns

really? I didn't even know this solution existed. I'll try it again and report back later.

Share this post


Link to post
Share on other sites
cmunns

no, unfortunately...I really needed it for my own projects as well...i think the difficulty is getting the path correct to .htc file as it is supposed to be relative to the page calling the css and not the stylesheet directly which is a confusing statement.

Share this post


Link to post
Share on other sites
steffanantonas

Not a confusing statement at all, actually. I totally get where you're coming from. I actually tried to solve the problem by putting the border-radius.htc file in EVERY CSS folder that contained a style sheet thinking the exact same thing (i.e. It's just the path that's wrong!). I also tried using an absolute path that I know was right behavior:url(exactlocation/border-radius.htc). Still no luck. There must be a way to get rounded corners on the menu with CSS.....has anyone done it successfully? I've seen people ask for it in the forums, but no solutions have been shared.

Share this post


Link to post
Share on other sites
catrina

Hm, I've never seen it done successfully in Internet Explorer using CSS, but there are some solutions using images for rounded corners. Have you heard of those?


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
steffanantonas

Of course. If that's the way it has to be, then that's the way it has to be, I suppose. If creating an IE specific style sheet with background images is the only way, then so be it. At least we know that this is the "best available" solution. I did some digging. Here are the hoops you have to jump through just to get the border-radius.htc hack to work with IE. If any of these criteria aren't satisfied, it won't work. There are also some IE specific quirks.... Hoops you have to jump through for IE: * Any element with this hack needs to have position, so unless it already has a position, attach position: relative. * It can act funny on some elements that are natively inline, even if you attach display: block, although not all the time (fun!). * It also has issues with elements that don??™t ???have layout??™. Attach zoom: 1; to get around this. * You can only use this on elements with the same border radius applied to all their corners. * When using this over anything translucent, a white ghost-line will stroke the rounded rectangle. * Don??™t even think about combining this with another IE hack, such as a box-shadow filter hack. So, knowing these challenges, it's probably easier to go the separate-ie-stylesheet route and just put a background image in there. You can find the "HOW TO" to do this at the bottom of this page... See the bottom of this page.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×