1andyw
08-31-2006, 05:14 PM
Hi,
My drop down menu works as designed but not when I add the doc type.
In compliant mode, the drop down menus won't align.
Why is that?
<code>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Menu Setup</title>
<script type="text/javascript">
<!--
var inmenu=false;
var lastmenu=0;
function Menu(current) {
if (!document.getElementById) return;
inmenu=true;
oldmenu=lastmenu;
lastmenu=current;
if (oldmenu) Erase(oldmenu);
m=document.getElementById("menu-" + current);
box=document.getElementById(current);
box.style.left= m.offsetLeft;
//box.style.left="150px";
box.style.top= m.offsetTop + m.offsetHeight;
//box.style.top="150px";
box.style.visibility="visible";
m.style.backgroundColor="Aqua";
box.style.backgroundColor="Aqua";
box.style.width="108px";
}
function Erase(current) {
if (!document.getElementById) return;
if (inmenu && lastmenu==current) {
return;
}
m=document.getElementById("menu-" + current);
box=document.getElementById(current);
box.style.visibility="hidden";
m.style.backgroundColor="Silver";
}
function Timeout(current) {
inmenu=false;
window.setTimeout("Erase('" + current + "');",500);
}
function Highlight(menu,item) {
if (!document.getElementById) return;
inmenu=true;
lastmenu=menu;
obj=document.getElementById(item);
obj.style.backgroundColor="Silver";
}
function UnHighlight(menu,item) {
if (!document.getElementById) return;
Timeout(menu);
obj=document.getElementById(item);
obj.style.backgroundColor="Aqua";
}
//-->
</script>
</head>
<body style="margin-left:0; margin-top:0;">
<table border="0" cellpadding="4">
<tr>
<td ID="menu-products" width="100" bgcolor="Silver"
onMouseOver="Menu('products');" onMouseOut="Timeout('products');">
<a href="products.html"><b>Products</b></a>
</td>
<td ID="menu-sales" width="100" bgcolor="Silver"
onMouseOver="Menu('sales');" onMouseOut="Timeout('sales');">
<a href="sales.html"><b>Sales</b></a>
</td>
<td ID="menu-service" width="100" bgcolor="Silver"
onMouseOver="Menu('service');" onMouseOut="Timeout('service');">
<a href="service.html"><b>Service</b></a>
</td>
<td ID="menu-staff" width="100" bgcolor="Silver"
onMouseOver="Menu('staff');" onMouseOut="Timeout('staff');">
<a href="staff.html"><b>Staff</b></a>
</td>
<td ID="menu-jobs" width="100" bgcolor="Silver"
onMouseOver="Menu('jobs');" onMouseOut="Timeout('jobs');">
<a href="jobs.html"><b>Employment</b></a>
</td>
</tr>
</table>
<div ID="products" STYLE="position:absolute; visibility: hidden">
<table width="100%" border="0" cellpadding="4" cellspacing="0">
<tr> <td width="100%" ID="p1"
onMouseOver="Highlight('products','p1');"
onMouseOut="UnHighlight('products','p1');">
<a href="equip.html">Equipment</a></td></tr>
<tr> <td width="100%" ID="p2"
onMouseOver="Highlight('products','p2');"
onMouseOut="UnHighlight('products','p2');">
<a href="supplies.html">Supplies</a></td></tr>
</table>
</div>
<div ID="sales" STYLE="position:absolute; visibility: hidden">
<table width="100%" border="0" cellpadding="4" cellspacing="0">
<tr> <td width="100%" ID="s1"
onMouseOver="Highlight('sales','s1');"
onMouseOut="UnHighlight('sales','s1');">
<a href="prices.html">Price List</a></td></tr>
<tr> <td width="100%" ID="s2"
onMouseOver="Highlight('sales','s2');"
onMouseOut="UnHighlight('sales','s2');">
<a href="order.html">Order Form</a></td></tr>
<tr> <td width="100%" ID="s3"
onMouseOver="Highlight('sales','s3');"
onMouseOut="UnHighlight('sales','s3');">
<a href="specials.html">Specials</a></td></tr>
</table>
</div>
<div ID="service" STYLE="position:absolute; visibility: hidden">
<table width="100%" border="0" cellpadding="4" cellspacing="0">
<tr> <td width="100%" ID="r1"
onMouseOver="Highlight('service','r1');"
onMouseOut="UnHighlight('service','r1');">
<a href="support.html">Support</a></td></tr>
<tr> <td width="100%" ID="r2"
onMouseOver="Highlight('service','r2');"
onMouseOut="UnHighlight('service','r2');">
<a href="cservice.html">Contact Us</a></td></tr>
</table>
</div>
<div ID="staff" STYLE="position:absolute; visibility: hidden">
<table width="100%" border="0" cellpadding="4" cellspacing="0">
<tr> <td width="100%" ID="t1"
onMouseOver="Highlight('staff','t1');"
onMouseOut="UnHighlight('staff','t1');">
<a href="staff.html">Meet the Staff</a></td></tr>
</table>
</div>
<div ID="jobs" STYLE="position:absolute; visibility: hidden">
<table width="100%" border="0" cellpadding="4" cellspacing="0">
<tr> <td width="100%" ID="j1"
onMouseOver="Highlight('jobs','j1');"
onMouseOut="UnHighlight('jobs','j1');">
<a href="jobs.html">Job Listings</a></td></tr>
</table>
</div>
<h1>Welcome to Our Products</h1>
<p>Welcome! This is the home page of Our Products,
your source for all products. Follow the links
below or use the menu above to learn more about our company
and our products.
</p>
<ul>
<li><a href="products.html"><b>Products</b></a></li>
<li><a href="sales.html"><b>Sales</b></a></li>
<li><a href="service.html"><b>Service</b></a></li>
<li><a href="staff.html"><b>Staff</b></a></li>
<li><a href="jobs.html"><b>Employment</b></a></li>
</ul>
</body>
</html>
</code>
Thanks,
Andy
My drop down menu works as designed but not when I add the doc type.
In compliant mode, the drop down menus won't align.
Why is that?
<code>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Menu Setup</title>
<script type="text/javascript">
<!--
var inmenu=false;
var lastmenu=0;
function Menu(current) {
if (!document.getElementById) return;
inmenu=true;
oldmenu=lastmenu;
lastmenu=current;
if (oldmenu) Erase(oldmenu);
m=document.getElementById("menu-" + current);
box=document.getElementById(current);
box.style.left= m.offsetLeft;
//box.style.left="150px";
box.style.top= m.offsetTop + m.offsetHeight;
//box.style.top="150px";
box.style.visibility="visible";
m.style.backgroundColor="Aqua";
box.style.backgroundColor="Aqua";
box.style.width="108px";
}
function Erase(current) {
if (!document.getElementById) return;
if (inmenu && lastmenu==current) {
return;
}
m=document.getElementById("menu-" + current);
box=document.getElementById(current);
box.style.visibility="hidden";
m.style.backgroundColor="Silver";
}
function Timeout(current) {
inmenu=false;
window.setTimeout("Erase('" + current + "');",500);
}
function Highlight(menu,item) {
if (!document.getElementById) return;
inmenu=true;
lastmenu=menu;
obj=document.getElementById(item);
obj.style.backgroundColor="Silver";
}
function UnHighlight(menu,item) {
if (!document.getElementById) return;
Timeout(menu);
obj=document.getElementById(item);
obj.style.backgroundColor="Aqua";
}
//-->
</script>
</head>
<body style="margin-left:0; margin-top:0;">
<table border="0" cellpadding="4">
<tr>
<td ID="menu-products" width="100" bgcolor="Silver"
onMouseOver="Menu('products');" onMouseOut="Timeout('products');">
<a href="products.html"><b>Products</b></a>
</td>
<td ID="menu-sales" width="100" bgcolor="Silver"
onMouseOver="Menu('sales');" onMouseOut="Timeout('sales');">
<a href="sales.html"><b>Sales</b></a>
</td>
<td ID="menu-service" width="100" bgcolor="Silver"
onMouseOver="Menu('service');" onMouseOut="Timeout('service');">
<a href="service.html"><b>Service</b></a>
</td>
<td ID="menu-staff" width="100" bgcolor="Silver"
onMouseOver="Menu('staff');" onMouseOut="Timeout('staff');">
<a href="staff.html"><b>Staff</b></a>
</td>
<td ID="menu-jobs" width="100" bgcolor="Silver"
onMouseOver="Menu('jobs');" onMouseOut="Timeout('jobs');">
<a href="jobs.html"><b>Employment</b></a>
</td>
</tr>
</table>
<div ID="products" STYLE="position:absolute; visibility: hidden">
<table width="100%" border="0" cellpadding="4" cellspacing="0">
<tr> <td width="100%" ID="p1"
onMouseOver="Highlight('products','p1');"
onMouseOut="UnHighlight('products','p1');">
<a href="equip.html">Equipment</a></td></tr>
<tr> <td width="100%" ID="p2"
onMouseOver="Highlight('products','p2');"
onMouseOut="UnHighlight('products','p2');">
<a href="supplies.html">Supplies</a></td></tr>
</table>
</div>
<div ID="sales" STYLE="position:absolute; visibility: hidden">
<table width="100%" border="0" cellpadding="4" cellspacing="0">
<tr> <td width="100%" ID="s1"
onMouseOver="Highlight('sales','s1');"
onMouseOut="UnHighlight('sales','s1');">
<a href="prices.html">Price List</a></td></tr>
<tr> <td width="100%" ID="s2"
onMouseOver="Highlight('sales','s2');"
onMouseOut="UnHighlight('sales','s2');">
<a href="order.html">Order Form</a></td></tr>
<tr> <td width="100%" ID="s3"
onMouseOver="Highlight('sales','s3');"
onMouseOut="UnHighlight('sales','s3');">
<a href="specials.html">Specials</a></td></tr>
</table>
</div>
<div ID="service" STYLE="position:absolute; visibility: hidden">
<table width="100%" border="0" cellpadding="4" cellspacing="0">
<tr> <td width="100%" ID="r1"
onMouseOver="Highlight('service','r1');"
onMouseOut="UnHighlight('service','r1');">
<a href="support.html">Support</a></td></tr>
<tr> <td width="100%" ID="r2"
onMouseOver="Highlight('service','r2');"
onMouseOut="UnHighlight('service','r2');">
<a href="cservice.html">Contact Us</a></td></tr>
</table>
</div>
<div ID="staff" STYLE="position:absolute; visibility: hidden">
<table width="100%" border="0" cellpadding="4" cellspacing="0">
<tr> <td width="100%" ID="t1"
onMouseOver="Highlight('staff','t1');"
onMouseOut="UnHighlight('staff','t1');">
<a href="staff.html">Meet the Staff</a></td></tr>
</table>
</div>
<div ID="jobs" STYLE="position:absolute; visibility: hidden">
<table width="100%" border="0" cellpadding="4" cellspacing="0">
<tr> <td width="100%" ID="j1"
onMouseOver="Highlight('jobs','j1');"
onMouseOut="UnHighlight('jobs','j1');">
<a href="jobs.html">Job Listings</a></td></tr>
</table>
</div>
<h1>Welcome to Our Products</h1>
<p>Welcome! This is the home page of Our Products,
your source for all products. Follow the links
below or use the menu above to learn more about our company
and our products.
</p>
<ul>
<li><a href="products.html"><b>Products</b></a></li>
<li><a href="sales.html"><b>Sales</b></a></li>
<li><a href="service.html"><b>Service</b></a></li>
<li><a href="staff.html"><b>Staff</b></a></li>
<li><a href="jobs.html"><b>Employment</b></a></li>
</ul>
</body>
</html>
</code>
Thanks,
Andy