IE setAttribute

setAttribute doesn't always work in IE
http://webbugtrack.blogspot.com/2007/08/bug-242-setattribute-doesnt-always-work.html

# bgcolor: Use "bgColor"

# cellpadding: Use "cellPadding"

# cellspacing: Use "cellSpacing"

# class: Use "className"

# colspan: Use "colSpan"

# defaultchecked: Use "defaultChecked"

# defaultselected: Use "defaultSelected"

# defaultvalue: Use "defaultValue"

# type: See note (bug 237) "type" is readonly in IE

# frameborder: Use "frameBorder"

# hspace: Use "hSpace"

# longdesc: Use "longDesc"

# maxlength: Use "maxLength"

# marginwidth: Use "marginWidth"

# marginheight: Use "marginHeight"

# noresize: Use "noResize"

# noshade: Use "noShade"

# on*: Inline events can not be set in IE, attach event handlers instead

# readonly: Use "readOnly"

# rowspan: Use "rowSpan"

# selected: When setting multiple selected items in a "select multiple" this will fail. {bug ref#TBD}

# style: None - see (bug 245), (bug 329)

# tabindex: Use "tabIndex"

# valign: Use "vAlign"

# vspace: Use "vSpace"


var browserName=navigator.appName;
if (browserName=="Microsoft Internet Explorer") {
}


IE Debugging

The following are errors when everything works in Firefox.

1. Could not get the type property. This command is not supported.

var hidden_field1 = row3.appendChild(document.createElement("input"));
hidden_field1.id = 'request_type';
hidden_field1.type = 'hidden'; // problem

In IE you can't change the type of an input element after it has been added to the document, so set before being appended.

2. Object doesn't support this action

var calendar_icon = document.createElement("button");
calendar_icon.type = "button"; // problem

change createElement('input'); but eventually use ajax callback template;

3. Object required
check if object exist

var dt_select_msg = document.getElementById('dt_select_msg');
if(dt_select_msg) { dt_select_msg.style.display = 'hidden'; }


4. Div Overflow

container {
   height:100%;
   overflow:auto;
   position:relative;
}

IE Problems

1. Display Content quickly but then "Internet Explorer cannot display the webpage"
1) Press "Esc" before it shows "Internet Explorer cannot display the webpage"
2) Double-click the warning sign at the status bar
3) HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917)
4) Checked the HTML source code, can't really see any problems
5) Another project works fine, only difference is the layout.php, only
<?php echo $sf_data->getRaw('sf_content') ?>
6) Change the layout template, worked.

2. Empty Image src cause the rest code does not display
<img src='<?php echo image_path('xxx/xxx.png') ?>'/>
but because that image file does not exist, the code after the image doesn't display.

Empty Image src can destroy your site
http://www.nczonline.net/blog/2009/11/30/empty-image-src-can-destroy-your-site/

Use PHP file_exists to check if file exist.
<?php  $filename = image_path('clients/'.$sf_user->getCurrentClientId().".png");
            if(file_exists($filename)) {?>
            <img style="float:left;margin-right:5px;" src='<?php echo $filename ?>'/>  
<?php  } ?>

3. href onclick doesn't work in IE (work in Firefox)
a href="javascript:void(false);" onclick="alert('here')"

add '; return false;'
a href="javascript:void(false);" onclick="alert('here'); return false;"

4. checkbox onchange doesn't work in IE (work in Firefox)
input type="checkbox" onchange="alert('here')"

change to onclick
input type="checkbox" onclick="alert('here')"

5. href return function(value) doesn't work in IE (work in Firefox)
a href="url" onclick='return function();'

change to
a href="javascript:void(false);" onclick="alert('here'); return false;"