I've been going crazy trying to figure out why some drop down menus are not
aligning correctly when viewed in a browser. When I preview, they are
perfectly aligned!!
Does anyone have any idea why this is happening?
I would *really*appreciate your comments.
Thanks,
This is an example of the code I'm using:
left.htm code:
<html><head><meta http-equiv="Content-Type" content="text/html;
charset=windows-1252"><meta http-equiv="Content-Language"
content="en-us"><title>Left Border</title><meta name="GENERATOR"
content="Microsoft FrontPage 6.0"><meta name="ProgId"
content="FrontPage.Editor.Document"><meta name="Microsoft Theme"
content="none, default">
<meta name="Microsoft Border" content="none">
</head>
<LINK REL="StyleSheet" HREF="menu.css">
<script language="javascript" src="menu.js"></script>
<body>
<table class="navbar" width="100" id="table1">
<tr>
<td class="menuNormal" width="110" onmouseover="expand(this);"
onmouseout="collapse(this);" style="padding-left: 4px; padding-right:
4px; padding-top: 1px; padding-bottom: 1px">
<p><u><a href="../htm%20pages/team.htm">Menu1</a></u></p>
<div class="menuNormal" width="104" style="width: 108px; height:
60px">
<table class="menu" width="104">
<td class="menuNormal">
<a HREF="page.asp" class="menuitem">item1</a>
</td>
</tr>
<tr>
<td class="menuNormal">
<a HREF="page.asp" class="menuitem">Item2</a> </td>
</tr>
<tr>
<td class="menuNormal">
<a HREF="page.asp" class="menuitem">Item3</a>
</td>
</tr>
<tr>
<td class="menuNormal">
<a HREF="page.asp" class="menuitem">Item4</a> </td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<table class="navbar" width="100" id="table2">
<tr>
<td class="menuNormal" width="110" onmouseover="expand(this);"
onmouseout="collapse(this);">
<p><u><a href="../htm%20pages/team.htm">Menu2</a></u></p>
<div class="menuNormal" width="104" style="width: 97px; height: 58px">
<table class="menu" width="104">
<td class="menuNormal">
<a HREF="page.asp" class="menuitem">item1</a>
</td>
</tr>
<tr>
<td class="menuNormal">
<a HREF="page.asp" class="menuitem">item2</a> </td>
</tr>
<tr>
<td class="menuNormal">
<a HREF="page.asp" class="menuitem">item3</a>
</td>
</tr>
<tr>
<td class="menuNormal">
<a HREF="page.asp" class="menuitem">item4</a> </td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
<!--webbot bot="Navigation" s-orientation="vertical" s-font="1"
s-rendering="graphics" s-type="children" b-include-home="FALSE"
b-include-up="FALSE" tag="body" s-theme="Pixel 0110" --></div><p> </p>
</body></html>
</html>
----------------------------------------------------------------------------
Stylesheet:
menu.css
------------------------------------------------------------------------------
BODY
{font-family: verdana, tahoma, arial, sans-serif;
font-size: 10pt;
margin: 3px;
margin-left: 3px;
margin-right: 0px;
padding: 0px;}
P
{padding-top: 10px;
margin: 0px;}
H1
{font-size: 12pt;
font-weight: bold;
padding-top: 15px;
margin: 0;}
table.navbar
{font-size: 8pt;
margin: 0px;
padding: 0px;
border: 0px;
font-weight: bold;}
table.menu
{font-size: 6pt;
margin: 0px;
padding: 0px;
font-weight: bold;}
td.menuNormal
{padding: 0px;
color: black;
font-weight: bold;
vertical-align: top;
horizontal-align: left;
background-color: white;}
td.menuHover
{padding: 0px;
color: black;
font-weight: bold;
vertical-align: top;
horizontal-align: left;
/*remove the following line for drop-down menu with images*/
background-color: lightblue;}
div.menuNormal
{display: none;
position: static;}
div.menuHover
{border: 1px solid lightblue;
background-color: white;
display: inline;
position: absolute;}
a.menuitem:link
{text-decoration: none;
color: lightblue;
background-color: white;
display: block;}
a.menuitem:visited
{text-decoration: none;
color: lightblue;
background-color: white;
display: block;}
a.menuitem:hover
{text-decoration: none;
color: lightblue;
background-color: lightblue;
display: block;}
a.menuitem:active
{text-decoration: none;
color: black;
background-color: white;
display: block;}
------------------------------------------------------------------------------
menu.js
function expand(s)
{
var td = s;
var d = td.getElementsByTagName("div").item(0);
td.className = "menuHover";
d.className = "menuHover";
}
function collapse(s)
{
var td = s;
var d = td.getElementsByTagName("div").item(0);
td.className = "menuNormal";
d.className = "menuNormal";
}