Hello, I am a complete novice to javascript and css. I have taken this piece of code and have it working correctly in Firefox, but cannot get it to work in IE.Thank you for any advice. I am attaching the HTML below: Does it have anything to do with Doctype? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>hid show div</title> <script type="text/javascript" language="JavaScript"> <!-- function HideContent(d) { if(d.length < 1) { return; } document.getElementById(d).style.display = "none"; } function ShowContent(d) { if(d.length < 1) { return; } document.getElementById(d).style.display = "block"; } function ReverseContentDisplay(d) { if(d.length < 1) { return; } if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; } else { document.getElementById(d).style.display = "none"; } } //--> </script> </head> <table width="310" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="images/top_curve2.jpg" alt="" width="299" height="30" /></td> </tr> <tr> <td></td> </tr> <tr> <td> <a onRelease="ShowContent('step1div'); return true;" href="javascript:ShowContent('step1div')" > <img src="images/step1.jpg" width="299" height="120" border="0"/></a> <div id="step1div" style="display:none; position:absolute; left:490px; top:178px; border-style: none; padding: 0px;"> <a onRelease="HideContent('step1div'); return true;" href="javascript:HideContent('step1div')" <img src="images/ step1_full_down.jpg" width="299" height="382" border="0"/> </a> </div> </td> </tr> <tr> <td> <a onclick="ShowContent('step2div'); return true;" href="javascript:ShowContent('step2div')" > <img src="images/step2.jpg" width="299" height="120" border="0"/></a> <div id="step2div" style="display:none; position:absolute; left:490px; top:298px; border color:red; border-style: none; padding: 0px;"> <a onclick="HideContent('step2div'); return true;" href="javascript:HideContent('step2div')" <img src="images/ step2_b_full_down.jpg" width="299" height="223" border="0"/> </a> </div> </td> </tr> <tr> <td> <a onclick="ShowContent('step3div'); return true; " href="javascript:ShowContent('step3div')" > <img src="images/step3.jpg" width="299" height="160" border="0"/></a> <div id="step3div" style="display:none; position:absolute; left:490px; top:418px; border-style: none; padding: 0px;"> <a onclick="HideContent('step3div'); return true;" href="javascript:HideContent('step3div')" <img src="images/ step3_c_full_down.jpg" width="299" height="160" border="0" /> </a> </div> </td> </tr> <tr> <td> <img src="images/bottom_curve2.jpg" alt="" width="299" height="30" /></td> </tr> </table> </body> </html> Code (markup):
There's no onrelease event in JavaScript and the only place "javascript:" should ever be written is in the address bar. Your links should follow this format, with or without an <img> tag within them: <a href = '#' onclick = "ShowContent('step1div'); return false;" >Show a div</a> Code (markup):
Thank you, I have updated the code to how you posted, and it works still in FF, but not yet in IE? What else could I be doing wrong here? or is it that IE does not support this? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>hid and show DIV</title> <script type="text/javascript" language="JavaScript"><!-- function HideContent(d) { if(d.length < 1) { return; } document.getElementById(d).style.display = "none"; } function ShowContent(d) { if(d.length < 1) { return; } document.getElementById(d).style.display = "block"; } function ReverseContentDisplay(d) { if(d.length < 1) { return; } if(document.getElementById(d).style.display == "block") { document.getElementById(d).style.display = "none"; } else { document.getElementById(d).style.display = "block"; } } //--></script> <style type="text/css"> a { outline: none; } a img { border:none; } </style> </head> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <table width="310" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <a href = '#' onclick = "ShowContent('step1div'); return false;" > <img src="images/step1.jpg" width="299" height="120" border="0"></a> <div id="step1div" style="display:none; position:absolute; left:490px; top:178px; border-style: none; padding: 0px;"> <a href='#' onclick="HideContent('step1div'); return true;" <img src="images/step1_full_downC.jpg" width="299" height="430" border="0"> </a> </div> </td> </tr></table> </body> </html> Code (markup):
You had an unclosed tag and still returning true in one link. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>hid and show DIV</title> <script type="text/javascript" language="JavaScript"> function HideContent(d) { if( typeof d == 'string' ) document.getElementById(d).style.display = "none"; } function ShowContent(d) { if( typeof d == 'string' ) document.getElementById(d).style.display = "block"; } function ReverseContentDisplay(d) { if( typeof d == 'string' ) if(document.getElementById(d).style.display == "block") { document.getElementById(d).style.display = "none"; } else { document.getElementById(d).style.display = "block"; } } </script> <style type="text/css"> a { outline: none; } a img { border:none; } </style> </head> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <table width="310" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <a href = '#' onclick = "ShowContent('step1div'); return false;" > <img src="images/step1.jpg" width="299" height="120" border="0">\\\\\\\\\\\ </a> <div id="step1div" style="display:none; position:absolute; left:490px; top:178px; border-style: none; padding: 0px;"> <a href='#' onclick="HideContent('step1div'); return false;">\\\\\\\\\\\\\\\\\\\ <img src="images/step1_full_downC.jpg" width="299" height="430" border="0"> </a> </div> </td> </tr> </table> </body> </html> Code (markup):