IE og FF sikker opstilling af Drop Down Menu
Hej Eksperter,Jeg har en drop down menu der bliver oprettet automatisk fra en database. Jeg har dog et problem med opstillingen af hvert menupunkt i menuen. I Internet Explorer varierer afstanden mellem hvert niveau i menuen afhængigt af tekstlængden. I Firefox er afstanden den samme, ligegyldigt hvor lang teksten end er.
Mit spørgsmål er derfor:
Kan jeg ændre noget i CSS'en (evt. lidt JavaScript) således at afstanden altid er korrekt i begge browsere?
Kildekode:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Side Demo</title>
<style type="text/css">
td.menu
{
width:120px;
background:lightblue;
}
table.menu
{
width:120px;
padding-left:2px;
border:solid 1px #000000;
font-size:100%;
margin-top:-1px;
margin-left:36px;
position:absolute;
visibility:hidden;
cursor:pointer;
}
table.root
{
padding-left:2px;
border:solid 1px #000000;
width:120px;
font-size:100%;
cursor:pointer;
}
</style>
<script language="javascript" type="text/javascript">
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible";
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden";
}
</script>
</head>
<body>
<table width="1000" cellpadding="0" cellspacing="0" border="0">
<tr>
<td colspan="2" style="height:75px;">
</td>
</tr>
<tr>
<td style="height:25px; border-top:solid 1px #000000;">
</td>
<td style="height:25px; border-top:solid 1px #000000; border-bottom:solid 1px #000000; padding:0px 0px 0px 5px;">
</td>
</tr>
<tr>
<td style="width:150px; vertical-align:top; text-align:left; border-right:solid 1px #000000;">
<div style="width:1px; height:1px; position:absolute; left:20px; top:116px; z-index:1000;">
<table id="parent0" class="root" cellpadding="0" cellspacing="0">
<tr>
<td class="menu" onclick="java script:location.href='?s=1'" onmouseover="showmenu('parent1',0)" onmouseout="hidemenu('parent1')">
Test demo 1
<table id="parent1" class="menu" cellpadding="0" cellspacing="0">
<tr>
<td class="menu" onclick="java script:location.href='?s=2'" onmouseover="showmenu('parent2',1)" onmouseout="hidemenu('parent2')">
Underside 1
<table id="parent2" class="menu" cellpadding="0" cellspacing="0">
<tr>
<td class="menu" onclick="java script:location.href='?s=3'">
Under underside 1
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="menu" onclick="java script:location.href='?s=7'">
Underside 2
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="menu" onclick="java script:location.href='?s=4'" onmouseover="showmenu('parent4',0)" onmouseout="hidemenu('parent4')">
Test demo 2
<table id="parent4" class="menu" cellpadding="0" cellspacing="0">
<tr>
<td class="menu" onclick="java script:location.href='?s=5'" onmouseover="showmenu('parent5',1)" onmouseout="hidemenu('parent5')">
Underside 1
<table id="parent5" class="menu" cellpadding="0" cellspacing="0">
<tr>
<td class="menu" onclick="java script:location.href='?s=6'">
Under underside 1
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="menu" onclick="java script:location.href='?s=8'">
Underside 2
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
<td style="height:600px; vertical-align:top; text-align:left; padding:2px 0px 0px 5px;">
<u>Der er endnu ikke tilføjet nogen sider til dette websted.</u>
</td>
</tr>
</table>
</body>
</html>
På forhånd tak.
