My Monkey Do

A Log of Coding Solutions

IE crap

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.

 

 

 

 

Centering w/o Absolute

by

Problem:

I needed to add some jquery popups to my code, but the popup appeared at the very top outside the viewing area.  The popup uses absolute positioning and so it is relative to the nearest element with a “position” attribute.  Since I centered my page with the following code, I didn’t have a nearest element with a “position” attribute so the popup was relative to the document.  And the document was just a sliver at the top because the elements within it were positioned absolutely…  here’s I mean:

The yellow highlight is the body tag.

Using Firebug, you can see, the yellow highlighted area is the width/height of my body element (it’s actually the margin and the width/height is zero).  So the popup appeared in that area instead of the entire page.

 

Solution:

The quick solution would be to change this  code:

#Table_01 {
    position:absolute;
    left:50%;
    top:0px;
    height:auto;
    margin-left:-500px;
    width:1025px;
    background-image:url(../images/expand.png);
    background-position:top;
    background-repeat:repeat-y;
}

To the following code.  The following code doesn’t use absolute, instead it uses display: table and margin: 0px auto;

#Table_01 {
    display: table;
    margin: 0px auto;
    width:1025px;
    background-image:url(../images/expand.png);
    background-position:top;
    background-repeat:repeat-y;
}

And of course, we need some special code for our special browser Internet Explorer:


        
body { text-align: center; }
body * { text-align: left; }
#Table_01 {
    zoom: 1;
	display: inline;
}

 

Table_01 is the first element inside of the Body tag.  For a full explanation head on to where i found the solution.  Also do not forget the Doc Type for IE to work propery.

 

DOC TYPE or Die

by

All men kill the thing they hate, too, unless, of course, it kills them first.

-James Thurber

After countless hours of trying to figure out why Internet Explorer is doing this or that different from all the other browsers the most common solution is to add a Doc Type.  Never ever forget this.  This one little addition solves 90% 75% 60% of the IE problems.  It can save you hours and hours of googling and hair pulling.  While this is supposed to be in every HTML document, sometimes it’s left out.  Whether it’s the designer‘s fault or the developer’s fault it doesn’t matter.  It should be put in.

This is the doc type that I use.  To me, it is the best one to use because it’s not so strict on the structure and it doesn’t restrict presentational attributes.  This should be the very first thing in the html file, before the <html> tag.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN” ” http://www.w3.org/TR/REC-html40/loose.dtd”>

No Multiple Upload for IE

by

Problem:

I wanted a way for users to upload multiple files to a server on a webpage.  I found a great jQuery plugin that does drag & drop and multiple file upload.   Under browser support you can see that IE is supported, however there are special notes.  MSIE does not support drag & drop and multiple file support.  So basically, the script works with IE where users can upload 1 file at a time.

 

Solution:

From my research, it turns out that it is impossible to do multiple upload (same goes for drag and drop) to IE.  The browser just simply does not support it.  There are many scripts out there that say “multiple upload” and say it works with IE, but it’s not truly multiple file upload.  The script actually just allows you to upload multiple files with one request, not select multiple files at one time.  So in other words, the file browser opens and you can only select one file.  Then you can open the file browser again and select another file.  If you had 10 files, you would have to repeat this process 10 times instead of just highlighting multiple files if it had true multiple file support.

Anyway, that is the “workaround” which is not acceptable for me.  So IE users just won’t have a multiple upload feature in my project.

No table-cell or table-row in IE CSS

by

Internet Explorer, How do I loathe thee?
Let me count the ways.

As stated on the w3schools website,

[quote]The values “inline-table”, “run-in”, “table”, “table-caption”, “table-cell”, “table-column”, “table-column-group”, “table-row”, “table-row-group”, and “inherit” is not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 supports the values.[/quote]

I had a project where I needed to create a photo gallery.  The goal was to get the gallery to look like iStockPhoto with the images all bottom-aligned, evenly spaced, etc, etc.  Well in creating the gallery I had a hard time aligning the photos on the bottom, so I took a look at how istock did it.  They use “table-cell” display option and vertically align the image to the bottom.  So I tried it, but soon found that Internet Explorer does not support that option.  And then I found that istock was no exception.

iStock with Chrome

 

iStock with IE

 

Solution:

I did not personally do this solution as this was not too important.  However someone on Stack Overflow seems to have solved it with jQuery:

$(document).ready(function(){
  if ($.browser.msie && $.browser.version == 7)
  {
    $(".tablecell").wrap("<td />");
    $(".tablerow").wrap("<tr />");
    $(".table").wrapInner("<table />");
  }
});

the above script assumes you have divs using style such as:

<style>
.table     { display: table; }
.tablerow  { display: table-row; }
.tablecell { display: table-cell; }
</style>