469,592 Members | 1,670 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,592 developers. It's quick & easy.

Dynamic menu behaviour different in IE vs Mozilla and Opera

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").getElementsByTagNa me("DIV");
if(el.style.display == "none"){
for (var i=0; i<ar.length; i++){
ar[i].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')">M enu 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')">M enu 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>

Jul 20 '05 #1
1 2300
On Tue, 13 Jan 2004 09:39:21 GMT, Macamba <ma*****@ilse.nl> wrote:

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')">Men u 2</p>


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

Jim.
--
comp.lang.javascript FAQ - http://jibbering.com/faq/

Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

6 posts views Thread by Greg Scharlemann | last post: by
1 post views Thread by Cornelius | last post: by
2 posts views Thread by Martin Doyle | last post: by
7 posts views Thread by Lachlan Hunt | last post: by
2 posts views Thread by RWD | last post: by
7 posts views Thread by Severus Snape | last post: by
11 posts views Thread by Edwin Knoppert | last post: by
reply views Thread by suresh191 | last post: by
4 posts views Thread by guiromero | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.