/    Sign up×
Community /Pin to ProfileBookmark

CSS sprite not working in FF

Valued colleagues,
round and round; I can not get Firefox to react to or recognize the second button in the following code; I suspect I’m doing something dumb but I’m too close to my work to see it.

So far I have put up two buttons with the intent of using the “css sprites” technique for the hover effect. It works fine in IE but while FF reacts to the home button it does nothing on the second, “contact” button!! It doesn’t even recognize it as a link.

Here is the code:

[code]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<link type=”text/css” rel=”stylesheet” href=”css/main.css” />
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Hooligan Tees</title>
<style type=”text/css”>
ul {
list-style-type:none;
padding:0px;
}
ul li a:link, a:visited {
display:block;
width:124px;
height:35px;
}

#home a {
background-image:url(buttons/homeslide.png);
background-position: 0px 0px no-repeat;
}

#home a:hover {
background-position:-124px 0px;
}

#contact a{
background-image:url(buttons/contactslide.png);
background-position: 0px 0px no-repeat;
}
#contact a:hover {
background-position:-124px 0px;
}

</style>

</head>

<body>
<div id=”textpanel”>
<div id=”header”><img src=”assets/HLGN3.jpg” alt=”logo” id=”teeshirt” /><img src=”assets/hool_title.png” alt=”hooligan_title” id=”titlewords” /><img src=”assets/trans_logo.gif” alt=”logo” /></div>
<div id=”sidepanel”><h4 align=”center”>Site Links</h4>

<div id=”links”>
<ul>
<li id=”home” ><a href=”index.php” ></a></li>
<li id=”contact” ><a href=”contact.php” ></a></li>
</ul>
</div><!–end links div–>

<div id=”ppwords”><img src=”assets/pp_words2.png” alt=”paypal words” /></div><!–end ppwords div–>
<div id=”paypal_logo”><img src=”assets/paypal_logo.png” /></div>
<div id=”models”><img src=”assets/three_mods.png” alt=”three models” /></div>
</div><!–end sidepanel –>

<h3 id=”order_title”>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Item Information and Order Page</h3>
<!–build the table for the item informaton–>
<?php

//adjust the php/mysql connection depending on server or xampp
include(‘php/mysqlconnect_setting.php’);

$shirt=addslashes($_GET[‘shirt’]);

$query=”SELECT cat_num, item_name, price, descript, img_lt, img_rt FROM item WHERE item_name=’$shirt'”;
$result=mysql_query($query) or die(mysql_error());
if(!$result){ echo ‘<h3>There was a problem retrieving item information.</h3>’; }

while($row=mysql_fetch_array($result))
{
$folder=”./images/”.$row[‘item_name’].”/”;
opendir($folder);

$lt_path=$folder.$row[‘img_lt’];
fopen($lt_path,’r’);

$rt_path=$folder.$row[‘img_rt’];
fopen($rt_path,’r’);
echo ‘<div id=”twopanel”><table><tr><td><img src=”‘.$lt_path.'” /></td><td><img src=”‘.$rt_path.'” /></td></tr></table><br /><br />’;
echo ‘<div id=”order_form”><form target=”paypal” action=”https://www.paypal.com/cgi-bin/webscr” method=”post” >
<input type=”hidden” name=”business” value=”[email protected]” />
<input type=”hidden” name=”cmd” value=”_cart” />
<input type=”hidden” name=”add” value=”1″ />
<input type=”hidden” name=”item_name” value=”‘.$row[‘item_name’].'”/>
<input type=”hidden” name=”item_number” value=”‘.$row[‘cat_num’].'”/>
<input type=”hidden” name=”amount” value=”‘.$row[‘price’].'”/>
<input type=”hidden” name=”shipping” value=”.20″ />
<input type=”hidden” name=”tax” value=”.075″ />
<input type=”hidden” name=”on1″ value=”‘.$row[‘descript’].'”/>
<input type=”hidden” name=”return” value=”http://www.hooligan-tees.com/index.php” />
<input type=”hidden” name=”notify_url” value=”http://www.hooligan-tees.com/ppnotice.php?Page=Notify” />

<input type=”image” src=”https://www.paypal.com/en_US/i/btn/btn_cart_LG.gif” border=”0″ name=”submit” alt=”PayPal – The safer, easier way to pay online!” />
<img alt=”” border=”0″ src=”https://www.paypal.com/en_US/i/scr/pixel.gif” width=”1″ height=”1″ />’;

echo ‘<br /><br /><div id=”infobox”><table border=”1″ frame=”box” cellpadding=”3″ ><tr><th>Cat.<br />Number:</th><th>&nbsp;Item:&nbsp;</th><th>Description:</th><th>Price:</th><th>Desired<br />Quantity:</th><th>Size:</th><th>Size Choice:</th></tr><tr><td>’.$row[‘cat_num’].'</td><td>’.
$row[‘item_name’].'</td><td>’.$row[‘descript’].'</td><td>’.$row[‘price’].'</td><td align=”right”><input name=”quantity” type=”text” size=”4″ value=”1″ align=”right”/></td><td><input type=”hidden” name=”on0″ value=”Size:” />Size:</td><td><select name=”os0″><option value=”Small”>Small</option><option value=”Medium”>Medium</option><option value=”Large”>Large</option><option value=”Extra Large”>Extra Large</option></select></td></tr></table><br /><br /><h3><a href=”index.php?route=inside” >RETURN TO PRODUCTS</a></h3></div><!–end infobox div–>

</form>

</div>’;//end order_form div
echo ‘</div>’;//end twopanel

}//end while loop
?>

</div><!–end textpanel–>
</body>
</html>[/code]

any help would be greatly appreciated.

captsig

to post a comment
CSS

0Be the first to comment 😎

×

Success!

Help @captsig spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...