J
jefzalez
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?
CODE:
<!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>
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?
CODE:
<!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>