SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript + CSS Background + IE 6

    I coded a Javscript menu (see below) that works in IE 7 Beta and Firefox just fine, but not IE 6. This is a little surprising because IE 6 will display just about everything and Firefox is more strict.

    When first displaying the menu, the CSS background images display properly. However, clicking another sub menu results in all CSS style information displaying properly EXCEPT for the background image. Obviously this is extremely frustrating. Is this a known problem with IE 6?

    index.html:
    Code:
    <html>
    <head>
    <script type="text/javascript" src="menu.js"></script>
    <style>
    td.on { background: url('http://mydomain.com/images/menu_on.gif'); font-weight: bold; font-family: Arial; font-size: 8pt; height: 28px; }
    td.on_sub { background: url('http://mydomain.com/images/menu_on_sub.gif'); font-weight: bold; font-family: Arial; font-size: 8pt; height: 28px; }
    td.on_sub_sub { background: url('http://mydomain.com/images/menu_on_sub-sub.gif'); font-weight: bold; font-family: Arial; font-size: 8pt; height: 28px; }
    td.off { background: url('http://mydomain.com/images/menu_off.gif'); font-weight: bold; font-family: Arial; font-size: 8pt; height: 28px; }
    td.off:hover { background: url('http://mydomain.com/images/menu_hover.gif'); font-weight: bold; font-family: Arial; font-size: 8pt; height: 28px; }
    td.off_fill { background: url('http://mydomain.com/images/menu_off.gif'); font-weight: bold; font-family: Arial; font-size: 8pt; height: 28px; }
    td.off_divider { background: url('http://mydomain.com/images/menu_off_divider.gif'); height: 28px; }
    td.sub_divider { background: url('http://mydomain.com/images/menu_sub_divider.gif'); height: 28px; }
    
    a.link_on:link,a.link_on:visited,a.link_on:hover,a.link_on:active { color: #FFF; }
    
    a.link_sub:link,a.link_sub:visited,a.link_sub:active { color: #D5DFFF; text-decoration: none; }
    a.link_sub_sub:link,a.link_sub_sub:visited,a.link_sub_sub:active { color: #D5DFFF; text-decoration: none; }
    
    a.link_sub:hover { color: #D5DFFF; text-decoration: underline; }
    a.link_sub_sub:hover { color: #D5DFFF; text-decoration: underline; }
    
    a.link_off:link,a.link_off:visited,a.link_off:hover,a.link_off:active { color: #000; }
    </style>
    </head>
    <body>
    
    <script type="text/javascript">show_menu(0)</script>
    
    </body>
    </html>
    menu.js
    Code:
    var top_menu_item_text = new Array()
    var top_menu_item_link = new Array()
    var sub_menu_item = new Array()
    
    top_menu_item_text[0] = "Menu 1"
    top_menu_item_text[1] = "Menu 2"
    top_menu_item_text[2] = "Menu 3"
    top_menu_item_text[3] = "Menu 4"
    
    top_menu_item_text[4] = "Page 1"
    top_menu_item_link[4] = "http://mydomain.com/page1/"
    
    top_menu_item_text[5] = "Page 2"
    top_menu_item_link[5] = "http://mydomain.com/page2/"
    
    top_menu_item_text[6] = "Page 3"
    top_menu_item_link[6] = "http://mydomain.com/page3/"
    
    top_menu_item_text[7] = "Page 4"
    top_menu_item_link[7] = "http://mydomain.com/page4/"
    
    sub_menu_item[0] = 	new Array(
    				new Array("Sub Menu 1", "http://mydomain.com/subpage1/"),
    				new Array("Sub Menu 2", "http://mydomain.com/subpage2/"),
    				new Array("Sub Menu 3", "http://mydomain.com/subpage3/"),
    				new Array("Sub Menu 4", "http://mydomain.com/subpage4/")
    			)
    
    
    
    sub_menu_item[1] = 	new Array(
    				new Array("Sub Menu 5", "http://mydomain.com/subpage1/"),
    				new Array("Sub Menu 6", "http://mydomain.com/subpage2/"),
    				new Array("Sub Menu 7", "http://mydomain.com/subpage3/"),
    				new Array("Sub Menu 8", "http://mydomain.com/subpage4/")
    			)
    
    sub_menu_item[2] = 	new Array(
    				new Array("Sub Menu 9", "http://mydomain.com/subpage1/"),
    				new Array("Sub Menu 10", "http://mydomain.com/subpage2/"),
    				new Array("Sub Menu 11", "http://mydomain.com/subpage3/"),
    				new Array("Sub Menu 12", "http://mydomain.com/subpage4/")
    			)
    
    sub_menu_item[3] = 	new Array(
    				new Array("Sub Menu 13", "http://mydomain.com/subpage1/"),
    				new Array("Sub Menu 14", "http://mydomain.com/subpage2/"),
    				new Array("Sub Menu 15", "http://mydomain.com/subpage3/"),
    				new Array("Sub Menu 16", "http://mydomain.com/subpage4/")
    			)
    
    
    function show_menu(menu_number)
    {
    	// Set some variables
    	var topHTML2 = ""
    	var subHTML2 = ""
    	var allHTML = ""
    
    	// Generate the top menu
    	topHTML2 = top_menu(menu_number)
    
    	// Generate the bottom menu
    	subHTML2 = sub_menu(menu_number)
    
    	// This displays the div that we'll put out menu into later on
    	if (!document.getElementById('menu'))
    	{
    		document.write('<div id="menu" style="margin: 0px; border:0px; padding:0px;">')
    		document.write('</div>')
    	}
    
    	// Put into one variable (probably unnecessary)
    	allHTML  = topHTML2
    	allHTML += subHTML2
    
    	// Put the menu into the div
    	document.getElementById('menu').innerHTML = allHTML
    }
    
    function top_menu(menu_number)
    {
    	// Set some variables
    	var i = 0
    	var topHTML = ""
    	var style_class = "off"
    
    	topHTML  = '<table cellpadding="0" cellspacing="0" width="100%"><tr><td class="off_fill">\r\n'
    	topHTML += '<table cellpadding="0" cellspacing="0"><tr>\r\n'
    
    	// Loop through the top menu text
    	for(i=0;i<top_menu_item_text.length;i++)
    	{
    		if (i == menu_number)
    		{
    			// This is the selected menu, so change stylesheet to "on"
    			style_class = "on"
    		} else {
    			// Not selected, so show "off" style
    			style_class = "off"
    		}
    		topHTML += '<td class="'+style_class+'">\r\n'
    		topHTML += '&nbsp;&nbsp;&nbsp;&nbsp;\r\n'
    		if (top_menu_item_link[i])
    		{
    			// If there is a direct link, have it link instead of a sub menu
    			topHTML += '<a href="'+top_menu_item_link[i]+'" class="link_'+style_class+'">'+top_menu_item_text[i]+'</a>\r\n'
    		} else {
    			// This menu item contains submenu items
    			topHTML += '<a href="javascript: void(0);" onClick="javascript: show_menu('+i+');" class="link_'+style_class+'">'+top_menu_item_text[i]+'</a>\r\n'
    		}
    		topHTML += '&nbsp;&nbsp;&nbsp;&nbsp;\r\n'
    		topHTML += '</td>\r\n'
    
    		// Display divider
    		topHTML += '<td class="off_divider" width="1"> </td>\r\n'
    	}
    	topHTML += '</tr></table>\r\n'
    	topHTML += '</td></tr></table>\r\n'
    	return topHTML
    }
    
    function sub_menu(menu_number)
    {
    	// Set some variables
    	var j = 0
    	var subHTML = ""
    
    	subHTML  = '<table cellpadding="0" cellspacing="0" width="100%"><tr><td class="on_sub">\r\n'
    	subHTML += '<table cellpadding="0" cellspacing="0"><tr>\r\n'
    
    	// Make sure there's actually a submenu or it'll return an error
    	if (sub_menu_item[menu_number])
    	{
    		// Loop through submenu items for specified menu
    		for(j=0;j<sub_menu_item[menu_number].length;j++)
    		{
    			// All submenu stylesheets are the same so no need to test anything
    			subHTML += '<td class="on_sub">\r\n'
    			subHTML += '&nbsp;&nbsp;&nbsp;&nbsp;\r\n'
    
    			// Generate the link
    			subHTML += '<a href="'+sub_menu_item[menu_number][j][1]+'" class="link_sub">'+sub_menu_item[menu_number][j][0]+'</a>\r\n'
    			subHTML += '&nbsp;&nbsp;&nbsp;&nbsp;\r\n'
    			subHTML += '</td>\r\n'
    
    			// Submenu divider
    			subHTML += '<td class="sub_divider" width="1"> </td>\r\n'
    		}
    	}
    	subHTML += '</tr></table>\r\n'
    	subHTML += '</td></tr></table>\r\n'
    	return subHTML
    }
    It's a neat bit of code (I think), but it's extremely frustrating not being able to get this to work.

  2. #2
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I figured out what the problem was and thought I would share in case anyone else has this (admittedly) very obscure bug. If you're behind a SonicWall firewall, when you click between menus, the SonicWall registers the request for the background image as a TCP FIN scan. No idea why IE 6 would be sending a FIN but it works outside the firewall. Everytime I try to use it behind the firewall, I get an alert that there was a possible TCP FIN scan from the web server. SonicWall's are also known to have overly aggressive TCP FIN detection algorithms. Just thought I'd let everyone know.


Bookmarks

Posting Permissions

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