Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Apr 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    IE / Mozilla Layout Differance

    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:
    Code:
    .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:

    Code:
    <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

  • #2
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    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.
    Last edited by drhowarddrfine; 04-22-2006 at 02:34 PM.

  • #3
    New to the CF scene
    Join Date
    Apr 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #4
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    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.
    Last edited by drhowarddrfine; 04-23-2006 at 05:01 AM.

  • #5
    New to the CF scene
    Join Date
    Apr 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    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 contains the hex codes for both "khaki" and "olive".
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #7
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •