My Monkey Do

A Log of Coding Solutions

jquery

Slow Javascript in IE

by

Problem:

The menu on this website:  http://www.sohtanaka.com/web-design/side-navigation-tooltip-popup-bubble/ ran fine in IE.  It was quick and worked fine.  On my website however, it ran slooow.

Solution:

Look for large images that may be loaded.  IE doesn’t seem to handle them very well.  The background image for my project was 1196×1150.  Pretty large…  Gotta adjust for the weakest browsers.

Position Relative and Fade

by

These two hated with a hate Found only on the stage

– Lord  Byron

 

Problem:

Having a position:relative on an element causes the jQuery fadeTo and fadeIn/fadeOut functions to not work in IE8 and possibly other IEs.

 

Solution:

Take out position: relative.

Curvy Corners … Fun with IE!

by

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.