Image Map Works in IE but not in Firefox

jason010101 · 12-25-2008, 06:58 PM

Can't figure out why this image map won't work in Firefox. It recognizes the clickable areas, yet does not go to the link when clicked. Instead it makes Firefox non responsive. In IE it works fine. The code validates in html transitional according to w3 standards. Thanks in advance!

Here is it in action: http://www.unitedbbq.com/test/bbqindex.html

Here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>United BBQ</title>

<style type="text/css">

body
{
background: #000000;
text-align: center;
margin: 0;
padding: 0;
}

h1 {color: #000000; font-family: arial; font-size: 170%; font-style: italic; font-weight:

bold; text-align: center}
h2 {color: #000000; font-family: arial; font-size: 130%; }
p {color: #000000; margin:0 font-family: arial; font-size: 130%;}

.container {
border: 0px;
width: 770px;
float: center;
clear: none;
margin-left: auto;
margin-right: auto;
padding:0px;
}

.top {
border: 0px;
text-align: left;
width: 770px;
float: center;
clear: none;
padding:0px;
}

.left1 {
border: 0px;
width: 40px;
float: left;
clear: none;
padding:0px;
}

.content {
border: 0px;
text-align: left;
background: #ffffcc;
background-color: #ffffcc;
layer-background-color:#ffffcc;
width: 692px;
float: left;
clear: none;
padding: 0px;
overflow:auto;
}

.right1 {
border: 0px;
width: 38px;
float: left;
clear: none;
padding:0px;
}

.left2 {
border: 0px;
width: 40px;
float: left;
clear: none;
padding:0px;
}

.animation {
border: 0px;
width: 77px;
float: left;
clear: none;
padding:0px;
}

.right2 {
border: 0px;
width: 38px;
float: right;
clear: none;
padding:0px;
}

.bottom {
border: 0px;
width: 770px;
float: center;
clear: none;
padding:0px;
}
</style>
</head>
<body>

<div class="container">
<div class="top">
<map id="ubbqnav" name="ubbqnav">
<area shape="poly" coords="29,89,168,12,221,26,188,175,137,227,56,227,16,175,"

href="http://www.unitedbbq.com" alt="Home" title="Home">
<area shape="poly" coords="241,134,267,167,330,185,353,186,329,226,285,221,246,188,"

href="menu.html" alt="Menu" title="Menu" >
<area shape="poly" coords="364,222,398,206,424,148,432,123,470,148,463,192,422,223,"

href="location.html" alt="Location" title="Location">
<area shape="poly" coords="501,176,511,157,515,127,561,129,621,182,621,206,571,174,"

href="reviews.html" alt="Reviews" title="Reviews">
<area shape="poly" coords="645,206,656,162,715,130,754,137,714,155,688,211,683,235,"

href="contact.html" alt="Contact" title="Contact">
</map> <img src="UBBQlayout_top.jpg" usemap="#ubbqnav" border="0" width="770" height="248" alt="ubbqnav">
</div>
</div>
<div class="container">
<div class="left1">
<img src="UBBQlayout_left1.jpg" alt=" ">
</div>
<div class="content">
<br>
<h1>
"Come on down for some AWESOME EATS!"<br>
We are open daily 11am-11pm
</h1>
<center><img src="pichome.jpg" width="400" alt=" "></center>
<br>
<p>
        Barbecue is one of the world’s oldest

methods of cooking. In the U.S.A., barbecue has deep roots, especially in the South and

Mid-West, although its popularity is growing in other parts of the country. Barbecue has

even become a competitive sport, with pitmasters vying against each other to create the

most delicious taste sensations.
<br><br>
        Here at United BBQ we are making our own

history, starting now. Our goal is to bring you authentic, pit-smoked barbecue using the

freshest, quality ingredients available. We want to unite your taste buds with some great

barbecue!
<br><br>
        We use green packaging options and local

produce whenever we can. We offer a selection of vegetarian meat alternatives and sides.

All of our waste oils are recycled by Newport Bio-Diesel for use as home heating

fuel.<br><br><br>
</p>
</div>
<div class="right1">
<img src="UBBQlayout_right1.jpg" alt=" ">
</div>
</div>
<div class="container">
<div class="left2">
<img src="UBBQlayout_left2.jpg" alt=" ">
</div>
<div class="animation">
<img src="delivery_animation.gif" alt=" ">
</div>
<div class="right2">
<img src="UBBQlayout_right2.jpg" alt=" ">
</div>
</div>
<div class="container">
<div class="bottom">
<img src="UBBQlayout_bottom.jpg" alt=" ">
</div>
</div>
</body>
</html>

12-25-2008, 06:58 PM	#1 (permalink)
jason010101 Registered User Join Date: Dec 2008 Posts: 1 OS: Vista	Image Map Works in IE but not in Firefox Can't figure out why this image map won't work in Firefox. It recognizes the clickable areas, yet does not go to the link when clicked. Instead it makes Firefox non responsive. In IE it works fine. The code validates in html transitional according to w3 standards. Thanks in advance! Here is it in action: http://www.unitedbbq.com/test/bbqindex.html Here is the code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>United BBQ</title> <style type="text/css"> body { background: #000000; text-align: center; margin: 0; padding: 0; } h1 {color: #000000; font-family: arial; font-size: 170%; font-style: italic; font-weight: bold; text-align: center} h2 {color: #000000; font-family: arial; font-size: 130%; } p {color: #000000; margin:0 font-family: arial; font-size: 130%;} .container { border: 0px; width: 770px; float: center; clear: none; margin-left: auto; margin-right: auto; padding:0px; } .top { border: 0px; text-align: left; width: 770px; float: center; clear: none; padding:0px; } .left1 { border: 0px; width: 40px; float: left; clear: none; padding:0px; } .content { border: 0px; text-align: left; background: #ffffcc; background-color: #ffffcc; layer-background-color:#ffffcc; width: 692px; float: left; clear: none; padding: 0px; overflow:auto; } .right1 { border: 0px; width: 38px; float: left; clear: none; padding:0px; } .left2 { border: 0px; width: 40px; float: left; clear: none; padding:0px; } .animation { border: 0px; width: 77px; float: left; clear: none; padding:0px; } .right2 { border: 0px; width: 38px; float: right; clear: none; padding:0px; } .bottom { border: 0px; width: 770px; float: center; clear: none; padding:0px; } </style> </head> <body> <div class="container"> <div class="top"> <map id="ubbqnav" name="ubbqnav"> <area shape="poly" coords="29,89,168,12,221,26,188,175,137,227,56,227,16,175," href="http://www.unitedbbq.com" alt="Home" title="Home"> <area shape="poly" coords="241,134,267,167,330,185,353,186,329,226,285,221,246,188," href="menu.html" alt="Menu" title="Menu" > <area shape="poly" coords="364,222,398,206,424,148,432,123,470,148,463,192,422,223," href="location.html" alt="Location" title="Location"> <area shape="poly" coords="501,176,511,157,515,127,561,129,621,182,621,206,571,174," href="reviews.html" alt="Reviews" title="Reviews"> <area shape="poly" coords="645,206,656,162,715,130,754,137,714,155,688,211,683,235," href="contact.html" alt="Contact" title="Contact"> </map> <img src="UBBQlayout_top.jpg" usemap="#ubbqnav" border="0" width="770" height="248" alt="ubbqnav"> </div> </div> <div class="container"> <div class="left1"> <img src="UBBQlayout_left1.jpg" alt=" "> </div> <div class="content"> <br> <h1> "Come on down for some AWESOME EATS!"<br> We are open daily 11am-11pm </h1> <center><img src="pichome.jpg" width="400" alt=" "></center> <br> <p>         Barbecue is one of the world’s oldest methods of cooking. In the U.S.A., barbecue has deep roots, especially in the South and Mid-West, although its popularity is growing in other parts of the country. Barbecue has even become a competitive sport, with pitmasters vying against each other to create the most delicious taste sensations. <br><br>         Here at United BBQ we are making our own history, starting now. Our goal is to bring you authentic, pit-smoked barbecue using the freshest, quality ingredients available. We want to unite your taste buds with some great barbecue! <br><br>         We use green packaging options and local produce whenever we can. We offer a selection of vegetarian meat alternatives and sides. All of our waste oils are recycled by Newport Bio-Diesel for use as home heating fuel.<br><br><br> </p> </div> <div class="right1"> <img src="UBBQlayout_right1.jpg" alt=" "> </div> </div> <div class="container"> <div class="left2"> <img src="UBBQlayout_left2.jpg" alt=" "> </div> <div class="animation"> <img src="delivery_animation.gif" alt=" "> </div> <div class="right2"> <img src="UBBQlayout_right2.jpg" alt=" "> </div> </div> <div class="container"> <div class="bottom"> <img src="UBBQlayout_bottom.jpg" alt=" "> </div> </div> </body> </html>