IE / Mozilla Layout Differance

johnny_theknife

04-22-2006, 09:15 AM

Hi All,

I seem to have come upon an issue with differances between IE and Firefox. I have developed as a test an expanding menu, which will run down the left hand side of the page. When the mouse is hovered over a menu item, a div will apear to the left with submenus.

This works as expected in IE, the submenus appear to the right of the primary menu item, in Firefox, it appears below the primary menu item. The code is below:

From the stylesheet:
.clsMenu
{
border:solid 1;
border-color:khaki olive olive khaki;
background-color:#ff9900;
position:absolute;
display:none;
padding:1px;
width:180px;
z-index:1;
padding-left:5px;
font-family:ariel;
font-size:10pt;
text-align:left;
}

And from the page:

<head>

<title>Ocean Computing Solutions</title>
<link href="./styles/oceanweb.css" type="text/css" rel="stylesheet">

<script language="javascript">
var strActiveMenu = ""

function ShowMenu(sMenuID)
{
document.all[sMenuID].style.display = 'block';
}

function HideMenu(sMenuID)
{
setTimeout("DoHide('"+sMenuID+"')",250);
}

function DoHide(sMenuID)
{
if (strActiveMenu=="") {
document.all[sMenuID].style.display = "none";
}
}

function ActiveMenu(sMenuID, sDeactivate)
{
if (sDeactivate=="1") {
strActiveMenu=""
setTimeout("DoHide('"+sMenuID+"')",100);
} else {
strActiveMenu=sMenuID;
}
}
</script>
</head>

<body>
<table border = 1 width = 100px>
<tr><td><a onmouseover="ShowMenu('menu1')" onmouseout="HideMenu('menu1')" href="#">Menu 1</a> <div class="clsMenu" id="menu1" onmouseover="ActiveMenu('menu1')" onmouseout="ActiveMenu('menu1', '1')">Item 1<br>Item2</div></td></tr>
</table>

</body>
</html>

Apologies for the sucky formatting. I'm sure this is something simple to resolve, but it annoying me quite deeply at the moment.

Thanks,

JK

drhowarddrfine

04-22-2006, 01:27 PM

First observation, there is no color 'khaki' and ariel is spelled arial.
Also, border: solid 1 is not complete. You are missing units for the width and didn't specify a color. Setting this to border: solid 1px black and it works.

johnny_theknife

04-23-2006, 02:00 AM

Thanks, I made the changes as suggested, but the problem still remains (although the border works nicely). When viewed in Internet Explorer, the div will appear to the right of the text which activates it, this is the desired behvaiour. In Firefox, the div appears below the test, as if there is a line break or something between the text and the div.

JK

drhowarddrfine

04-23-2006, 03:58 AM

Well, I thought I had it working in FF but I guess not. This gives me further confusion. I haven't worked in js for a while but started picking it up again a couple of days ago. I was reading a book that mentioned (I thought) that most browsers implemented document.all even though it is an IE-only function. So I assumed FF did, too. After googling a bit, I'm not sure that it does or not. I have read that it will work in quirks mode but not standard mode. But I haven't found a definitive answer about the whole thing yet. In fact, it doesn't work in Netscape but it does in Opera.

Perhaps the best solution is just to use getElementById anyway.

johnny_theknife

04-23-2006, 04:24 AM

Hi,

The div does display, just it's position relative to the link text changes. That is, in IE, the div is displayed on the right hand side of the link text, in FF, it is below the link text.

JK

Arbitrator

04-23-2006, 12:25 PM

This is a minor thing, but to get the border colors you desire in Firefox, you're going to need to use the border-bottom/left/right/top-color CSS properties instead of defining them all in one statement since Firefox doesn't support that for some reason. Furthermore, you should define your colors using hex codes (or RGB) so that your color is the same in every browser. This color table (http://halflife.ukrpack.net/csfiles/help/colors.shtml) contains the hex codes for both "khaki" and "olive".

drhowarddrfine

04-23-2006, 04:15 PM

Firefox doesn't support that for some reason.
Oh? Works fine for me in this code.
you should define your colors using hex codes (or RGB) so that your color is the same in every browser.
Olive and black are standard html colors and work in every browser.

I'm going out of town this morning. I don't know what I did to my copy of your code but now I can't get it to work in FF. I must have messed it up but I have no internet access till I come back Tuesday night.