Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

JavaScript + CSS + Background Image + IE

Status
Not open for further replies.
Tabletize

Tabletize

Programmer
Aug 29, 2006
2
US
I am really, really frustrated. I coded a javascript menu that works in IE Beta 7 and Firefox, but not IE 6. This is the opposite of what you would expect since IE displays just about everything whereas Firefox is more strict.

Let me narrow it down. The CSS stylesheets change properly, but ONLY the background image doesn't show up when you click on a menu item. This is so strange. You can set all other CSS properties just fine, but the background image doesn't show up. Here's the code:

index.html:
==========================================
<html>
<head>
<script type="text/javascript" src="menu.js"></script>
<style>
td.on { background: url(' font-weight: bold; font-family: Arial; font-size: 8pt; height: 28px; }
td.on_sub { background: url(' font-weight: bold; font-family: Arial; font-size: 8pt; height: 28px; }
td.on_sub_sub { background: url(' font-weight: bold; font-family: Arial; font-size: 8pt; height: 28px; }
td.off { background: url(' font-weight: bold; font-family: Arial; font-size: 8pt; height: 28px; }
td.off:hover { background: url(' font-weight: bold; font-family: Arial; font-size: 8pt; height: 28px; }
td.off_fill { background: url(' font-weight: bold; font-family: Arial; font-size: 8pt; height: 28px; }
td.off_divider { background: url(' height: 28px; }
td.sub_divider { background: url(' 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>
==========================================



And here's the menu.js contents:
==========================================
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] = "
top_menu_item_text[5] = "Page 2"
top_menu_item_link[5] = "
top_menu_item_text[6] = "Page 3"
top_menu_item_link[6] = "
top_menu_item_text[7] = "Page 4"
top_menu_item_link[7] = "
sub_menu_item[0] = new Array(
new Array("Sub Menu 1", " new Array("Sub Menu 2", " new Array("Sub Menu 3", " new Array("Sub Menu 4", " )



sub_menu_item[1] = new Array(
new Array("Sub Menu 5", " new Array("Sub Menu 6", " new Array("Sub Menu 7", " new Array("Sub Menu 8", " )

sub_menu_item[2] = new Array(
new Array("Sub Menu 9", " new Array("Sub Menu 10", " new Array("Sub Menu 11", " new Array("Sub Menu 12", " )

sub_menu_item[3] = new Array(
new Array("Sub Menu 13", " new Array("Sub Menu 14", " new Array("Sub Menu 15", " new Array("Sub Menu 16", " )


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)
{
// If there is a direct link, have it link instead of a sub menu
topHTML += '<a href="'+top_menu_item_link+'" class="link_'+style_class+'">'+top_menu_item_text+'</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+'</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
}
==========================================

Everything works fine and it's a neat little menu script. Just CSS background image + Javascript + Internet Explorer. Is this a known problem?
 
Sort by date Sort by votes
Try removing the quotes from the url() image file name ... may do the trick?

Regards
 
Upvote 0 Downvote
The problem was actually not the JavaScript, but an over-aggressive SonicWall which was registering the request for background images as a TCP FIN scan, thereby blocking the traffic. Unbelievably obscure bug, but FYI for anyone else out there.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
639
lexer
lexer
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
1K
Mike Lewis
Mike Lewis
JScannell
  • Locked
  • Question
Javascript events
Replies
1
Views
266
Daniel K
Daniel K
JScannell
  • Locked
  • Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
627
JScannell
JScannell
JScannell
  • Locked
  • Question
Google Chrome doesn't load my javascript files
Replies
1
Views
459
JScannell
JScannell

Part and Inventory Search

Sponsor

Back
Top