Dynamic menu behaviour different in IE vs Mozilla and Opera

[Macamba]

Hi all,

I am currently developing a website for a voluntary organisation. It is
my first step in website development. The dynamic menu I developed has
some bugs, which I addressed in another post. In this post I want to ask
you why my code behaves differently in IE, while it behaves like I
expect in Mozilla and Opera. What I would like to see addressed is what
I need to do to get the same behaviour in all 3 browsers. I know each
browser has it one definition of HTML at the like.

The problem I have, is when I hover over a link, the box in which the
link is contained, grows larger vertically.

Next difference, the text of the link is only displayed when you hover
with the mouse pointer over the text. At least, that is the case when I
view the page locally, from my hard drive. I see this is not the case
when I go to the website itself.

For a live view on what I mean, visit the website (which is in Dutch,
but you will catch the drift):
http://www.accentoptalent.nl/index2.html

Hope anyone can help. I would appreciate it.

Macamba

Here is my code:
The JavaScript
function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("cont").getElementsByTagName("DIV");
if(el.style.display == "none"){
for (var i=0; i<ar.length; i++){
ar.style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}}}

function ChangeClass(menu, newClass){
if (document.getElementById){
document.getElementById(menu).className = newClass;
}}

document.onselectstart = new Function("return false");

This is (part) of my CSS:
..menuOut, .out
{
cursor: pointer;
margin: 7px;
background-color: rgb(246, 220, 1);
color: rgb(183, 1, 102);
width: 170px;
height: 20px;
border: 1px solid rgb(183, 1, 102);
padding: 2px;
font-size: 10pt;
text-align: center;
font-weight: 800;
}

..menuOver, .over, .over a, a:hover
{
cursor: pointer;
margin: 7px;
background-color: rgb(183, 1, 102);
width: 170px;
height: 20px;
border: 1px solid rgb(183, 1, 102);
padding: 2px;
text-align: center;
font-weight: 800;
color: rgb(253, 236, 158);
}

..submenu, .subsubmenu
{
margin: 7px;
color: rgb(183, 1, 102);
width: 170px;
font-family: Verdana, Arial, "sans serif";
font-weight: 800;
font-size: 10pt;
padding-left: 15px;
}

..submenu a, .subsubmenu a
{
font-family: Verdana, Arial, "sans serif";
color: rgb(183, 1, 102);
text-decoration: none;
font-weight: bold;
}

..submenu a:hover, a:hover
{
font-family: Verdana, Arial, "sans serif";
color: rgb(253, 236, 158);
text-decoration: none;
font-style: oblique;
font-weight: bold;
}

Lastly, part of my HTML:
<div id="cont">

<p class="out"
id="menu1"
onmouseover="ChangeClass('menu1','over')"
onmouseout="ChangeClass('menu1','out')">
<a href="accent.html" target=tekst title="Menu 1">Menu without sub
menus</a><br/></p>

<!-- Menu 2 -->
<p class="menuOut" id="menu2" onclick="SwitchMenu('sub2')"
onmouseover="ChangeClass('menu2','menuOver')"
onmouseout="ChangeClass('menu2','menuOut')">Menu 2</p>

<!-- Menu 2_1 -->
<div class="submenu" id="sub2" style="display:none;">
<p class="menuOut" id="submenu2_1" onclick="SwitchMenu('sub2_1')"
onmouseover="ChangeClass('submenu2_1','menuOver')"
onmouseout="ChangeClass('submenu2_1','menuOut')">Menu 2_1</p>

<div class="subsubmenu" id="sub2_1" style="display:none;">
• <a href="sub2_1/sub2_1_1.html" target=tekst title="Menu
2_1_1">Menu 2_1_1</a><br/>
• <a href="sub2_1/sub2_1_2.html" target=tekst title="Menu
2_1_2">Menu 2_1_2</a><br/>
• <a href="sub2_1/sub2_1_3.html" target=tekst title="Menu
2_1_3">Menu 2_1_3</a><br/>
• <a href="sub2_1/sub2_1_4.html" target=tekst title="Menu
2_1_4">Menu 2_1_4</a><br/>
</div> <!-- Sub 2_1 -->

<!-- Menu 2_2 -->
<p class="menuOut" id="submenu2_2" onclick="SwitchMenu('sub2_2')"
onmouseover="ChangeClass('submenu2_2','menuOver')"
onmouseout="ChangeClass('submenu2_2','menuOut')">Menu 2_2</p>

<div class="subsubmenu" id="sub2_2" style="display:none;">
• <a href="sub2_2/sub2_2_1.html" target=tekst title="Menu
2_2_1">Menu 2_2_1</a><br/>
• <a href="sub2_2/sub2_2_2.html" target=tekst title="Menu
2_2_2">Menu 2_2_2</a><br/>
• <a href="sub2_2/sub2_2_3.html" target=tekst title="Menu
2_2_3">Menu 2_2_3</a><br/>
• <a href="sub2_2/sub2_2_4.html" target=tekst title="Menu
2_2_4">Menu 2_2_4</a><br/>
</div> <!-- Sub 2_2 -->

<!-- Menu 3, no sub menus -->
<p class="menuOut" id="menu3" onclick="SwitchMenu('sub3')"
onmouseover="ChangeClass('menu3','menuOver')"
onmouseout="ChangeClass('menu3','menuOut')">Menu 3</p>

</div> <!-- Cont -->
</body>
</html>

 

[Jim Ley]

The growing larger is likely a CSS issue, IE can't fit your font into
the height given on the over size so grows it so it can.

Next difference, the text of the link is only displayed when you hover
with the mouse pointer over the text. At least, that is the case when I
view the page locally, from my hard drive. I see this is not the case
when I go to the website itself.

Again, sounds like CSS guillotine bug, but I've not seen the site.

<p class="menuOut" id="menu2" onclick="SwitchMenu('sub2')"
onmouseover="ChangeClass('menu2','menuOver')"
onmouseout="ChangeClass('menu2','menuOut')">Menu 2</p>

designing your menu as UL/LI would be better, than these block items.

Jim.