• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

My Monkey Do

A Log of Coding Solutions

  • Home
  • Web Hosts
  • Tools
  • About

Curvy Corners … Fun with IE!

May 27, 2011 by Webhead

I have decided to stick with love. Hate is too great a burden to bear.

– Martin Luther King, Jr.

Problem:

I was given a task to make the corners of a div area to be rounded.  I knew that only IE 9 supported this out of the IE family, but I didn’t expect it to be hampered by a -moz-border-radius or jquery.curvycorners.js or jquery.corner.js.

  • -moz-border-radius caused the top and bottom inner border to be smaller.
  • jquery.curvycorners.js caused the corners to look like a square got cut out.
  • The jquery.corner.js made the rounded corner, but you could still see the original square corner (ie it wasn’t transparent).

Solution:

After a lot of trial and error with the multiple ways of trying to get a corner in IE, I found a blog that showed the following code.  Actually I found this blog first and tried this, but for one reason or another it didn’t work until many failures later:
<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />

Stupid IE caching!  I thought I had the solution which was to add the meta tag, but apparently after no code change and a restart of IE, the square corner has come back.  So the new solution is to not run the curvycorner code if it is IE8 and possibly others.

 

 

 

 

Filed Under: Coding Tagged With: css, IE crap, jquery

Primary Sidebar

Topics

apache apple block editor chrome cms css debug eCommerce embed firebug firefox git gmail goDaddy google hosting htaccess html html 5 IE crap image iPad iPhone javascript jquery linux localization mac os x ms sql mysql open source optimize php php 5.3 responsive rest api seo svg tinymce woocommerce wordpress wpengine xss yii youtube




Categories

  • Coding
  • Off the Shelf
  • Plugins
  • Random Thoughts
  • Server Stuff
  • Tools