CSS image a.rollover:hover problem in FF 3

Skipjackrick · February 12, 2009

Ok, I just don't understand why this doesn't work? The code is so simple?

The following works with Internet Explorer just fine. But in FF 3 its a no go. Anybody know why?

Basic HTML Code

Link if you want to see in FF 3 or IE --> http://www.extremecoast.com/KW09/test.php

<!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 rel="stylesheet" href="http://www.extremecoast.com/KW09/layout/kayakwars.css" type="text/css" />
</head>
<body>

               <a href="http://www.extremecoast.com" class="rollover1"></a>

               <a href="http://www.extremecoast.com" class="rollover2"></a>

               <a href="http://www.extremecoast.com" class="rollover3"></a>

               <a href="http://www.extremecoast.com" class="rollover4"></a>

               <a href="http://www.extremecoast.com" class="rollover5"></a>

               <a href="http://www.extremecoast.com" class="rollover6"></a>
     
               <a href="http://www.extremecoast.com" class="rollover7"></a>

</body>
</html>

My CSS.....I Don't think there are any errors????

@charset "utf-8";
/* CSS Document */

/********************************************
   LAYOUT
********************************************/ 
body {
background-color: #000000;
font: 100% Verdana, Tahoma, arial, sans-serif;
color: #FFFFFF; 
text-align: center;
}
p {
font: 100%/1.5em Verdana, Tahoma, arial, sans-serif;
}
/* Menu rollover */

a.rollover1:link { 
    display: block;
    width: 88px;
    height: 20px;
    background: url("http://www.extremecoast.com/KW09/layout/menu1.PNG") 0 0 no-repeat;
    text-decoration: none;
}
a.rollover1:hover {
    background-position: -88px 0;
}
a.rollover2:link { 
    display: block;
    width: 91px;
    height: 20px;
    background: url("http://www.extremecoast.com/KW09/layout/menu2.PNG") 0 0 no-repeat;
    text-decoration: none;
}
a.rollover2:hover {
    background-position: -91px 0;
}
a.rollover3:link { 
    display: block;
    width: 126px;
    height: 20px;
    background: url("http://www.extremecoast.com/KW09/layout/menu3.PNG") 0 0 no-repeat;
    text-decoration: none;
}
a.rollover3:hover {
    background-position: -126px 0;
}
a.rollover4:link { 
    display: block;
    width: 86px;
    height: 20px;
    background: url("http://www.extremecoast.com/KW09/layout/menu4.PNG") 0 0 no-repeat;
    text-decoration: none;
}
a.rollover4:hover {
    background-position: -86px 0;
}
a.rollover5:link { 
    display: block;
    width: 126px;
    height: 20px;
    background: url("http://www.extremecoast.com/KW09/layout/menu5.PNG") 0 0 no-repeat;
    text-decoration: none;
}
a.rollover5:hover {
    background-position: -126px 0;
}
a.rollover6:link { 
    display: block;
    width: 100px;
    height: 20px;
    background: url("http://www.extremecoast.com/KW09/layout/menu6.PNG") 0 0 no-repeat;
    text-decoration: none;
}
a.rollover6:hover {
    background-position: -100px 0;
}
a.rollover7:link { 
    display: block;
    width: 148px;
    height: 20px;
    background: url("http://www.extremecoast.com/KW09/layout/menu7.PNG") 0 0 no-repeat;
    text-decoration: none;
}
a.rollover7:hover {
    background-position: -148px 0;
}

/* links */

a.kwmenu:link { 
font-size: 11px;
color: #f6ff91; 
text-decoration: none;
}
a.kwmenu:active {
font-size: 11px; 
color: #f6ff91; 
text-decoration: none 
}
a.kwmenu:visited { 
font-size: 11px;
color: #f6ff91; 
text-decoration: none 
}
a.kwmenu:hover { 
font-size: 11px;
color: #86a0f6; 
text-decoration: none 
}

/* headers */
h1, h2, h3 {
font-family: Verdana, Tahoma, Sans-serif;	 		
}
h1 {
font-size: 150%;	
font-weight: normal;
color: #FFFFFF;
}
h2 {
font-size: 140%;
text-transform: uppercase;
color: #FFFFFF;
}
h3 {
font-size: 120%;
color: #FFFFFF; 
}

/* start - table */
.kwmenutable {
border-color:#999999
border: solid
border-width:thick
}
table {
text-align:center;
}
th strong {
color: #fff;
}
th {
font-family: Verdana; 
font-size: 70%;
background: none;
height: 29px;
text-align: center;
}
tr {
text-align:center;
}
td {
font-family: Verdana; 
font-size: 70%;
text-align: center;
}  
/* end - table */

/* form elements */
form {
margin:10px; padding: 0 10px;
background-color: #FFF; 	
}
label {
display:block;
font-weight:bold;
margin:5px 0;
}
input {
padding:2px;
border:1px solid #eee;
font: normal 1em Verdana, sans-serif;
color:#777;
}
textarea {
width:400px;
padding:2px;
font: normal 1em Verdana, sans-serif;
border:1px solid #eee;
height:100px;
display:block;
color:#777;
}
input.button {
font: bold 12px Arial, Sans-serif;
height: 24px;
margin: 0;
padding: 2px 3px;
color: #FFF;
border: none;
background-color: #003399;
background-image: url(button-bg.jpg);
background-repeat: repeat-x;
background-position: 0 0;
}

haku · February 12, 2009

You are going to have to tell us what the problem is first mate. 'Just doesn't work' isn't descriptive of the problem at all.

Skipjackrick · February 12, 2009

You are going to have to tell us what the problem is first mate. 'Just doesn't work' isn't descriptive of the problem at all.

Well, the images aren't displayed in firefox. Basically, I get a blank screen. I figured this might be a common problem with FF 3.

If you have IE you can see what it is supposed to look like at the following link.

http://www.extremecoast.com/KW09/test.php

departedmind · February 12, 2009

Well it is working in FF 3.0.6

haku · February 12, 2009

I had the opposite problem - blank screen in IE7, menus in FF3.

Skipjackrick · February 12, 2009

I had the opposite problem - blank screen in IE7, menus in FF3.

LMAO!! Are you serious? What could be causing that.... I am totally flabberghasted!

killah · February 12, 2009

Can't really help you. Work's perfect on my side with ff 3.

haku · February 12, 2009

Its a javascript problem. Stuff appears and disappears when switching it on and off.

Skipjackrick · February 12, 2009

Its a javascript problem. Stuff appears and disappears when switching it on and off.

Wow?? hmmmm....Do you think it has something to do with the fact that the images are .PNG ???

I've had issues with .PNG images disappearing and there was a javascript png fix I think?

I just downloaded FF 3.0.6 and it works great. FF 3.0.5 it doesn't work....

I may go to the javascript forum for some help.

Thanks for the info fellas!

haku · February 12, 2009

No, .png problems are a result in the transparency of .png files, and only affect IE6 and below. The transparency ends up being a milky color. What you are seeing is something different.

Skipjackrick · February 12, 2009

No, .png problems are a result in the transparency of .png files, and only affect IE6 and below. The transparency ends up being a milky color. What you are seeing is something different.

This is way weird however I found the glitch.

I cleared my browser cache and browsing history and it worked perfect for Firefox 3.0.5 also. I did not observe any differences when switching off javascript?

However, go to this link....

http://www.extremecoast.com/

And then go to my test link

http://www.extremecoast.com/KW09/test.php

You see that it doesn't work.

But, if you clear your browsing history and then re-check the "test" link again....Everything works great!!!!!!!

Is it something in my main page code that is doing it?

<SCRIPT LANGUAGE="JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
image1 = new Image();image1.src = "http://extremecoast.com/layout/v2/menu1on.jpg";
image2 = new Image();image2.src = "http://extremecoast.com/layout/v2/menu2on.jpg";
image3 = new Image();image3.src = "http://extremecoast.com/layout/v2/menu3on.jpg";
image4 = new Image();image4.src = "http://extremecoast.com/layout/v2/menu4on.jpg";
image5 = new Image();image5.src = "http://extremecoast.com/layout/v2/menu5on.jpg";
image6 = new Image();image6.src = "http://extremecoast.com/layout/v2/menu6on.jpg";
image7 = new Image();image7.src = "http://extremecoast.com/layout/v2/menu7on.jpg";
image8 = new Image();image8.src = "http://extremecoast.com/layout/v2/2menu1on.jpg";
image9 = new Image();image9.src = "http://extremecoast.com/layout/v2/2menu2on.jpg";
image10 = new Image();image10.src = "http://extremecoast.com/layout/v2/2menu3on.jpg";
image11 = new Image();image11.src = "http://extremecoast.com/layout/v2/2menu4on.jpg";
image12 = new Image();image12.src = "http://extremecoast.com/layout/v2/2menu5on.jpg";
image13 = new Image();image13.src = "http://extremecoast.com/layout/v2/2menu6on.jpg";
image14 = new Image();image14.src = "http://extremecoast.com/layout/v2/2menu7on.jpg";
// End -->
</script>
<script defer type="text/javascript" src="pngfix.js"></script>
<body>
<a href="http://extremecoast.com" onmouseover="image1.src='http://extremecoast.com/layout/v2/menu1on.jpg';"
onmouseout="image1.src='http://extremecoast.com/layout/v2/menu1onon.jpg';"><img name="image1" src="http://extremecoast.com/layout/v2/menu1onon.jpg" border=0></a><a href="http://extremecoast.com/reports/reports.php" onmouseover="image2.src='http://extremecoast.com/layout/v2/menu2on.jpg';" onmouseout="image2.src='http://extremecoast.com/layout/v2/menu2off.jpg';"><img name="image2" src="http://extremecoast.com/layout/v2/menu2off.jpg" border=0></a><a href="http://extremecoast.com/Kayak_Wars/index.php" onmouseover="image3.src='http://extremecoast.com/layout/v2/menu3on.jpg';" onmouseout="image3.src='http://extremecoast.com/layout/v2/menu3off.jpg';"><img name="image3" src="http://extremecoast.com/layout/v2/menu3off.jpg" border=0></a><a href="http://extremecoast.com/phpBB3/index.php" onmouseover="image4.src='http://extremecoast.com/layout/v2/menu4on.jpg';" onmouseout="image4.src='http://extremecoast.com/layout/v2/menu4off.jpg';"><img name="image4" src="http://extremecoast.com/layout/v2/menu4off.jpg" border=0></a><a href="http://extremecoast.com/multimedia/multimedia.php" onmouseover="image5.src='http://extremecoast.com/layout/v2/menu5on.jpg';" onmouseout="image5.src='http://extremecoast.com/layout/v2/menu5off.jpg';"><img name="image5" src="http://extremecoast.com/layout/v2/menu5off.jpg" border=0></a><a href="http://extremecoast.com/contest.php" onmouseover="image6.src='http://extremecoast.com/layout/v2/menu6on.jpg';" onmouseout="image6.src='http://extremecoast.com/layout/v2/menu6off.jpg';"><img name="image6" src="http://extremecoast.com/layout/v2/menu6off.jpg" border=0></a><a href="http://extremecoast.com/contact.php" onmouseover="image7.src='http://extremecoast.com/layout/v2/menu7on.jpg';" onmouseout="image7.src='http://extremecoast.com/layout/v2/menu7off.jpg';"><img name="image7" src="http://extremecoast.com/layout/v2/menu7off.jpg" border=0></a><BR>      <TABLE BORDER="0" CELLSPACING="0" CELLPADDING="5" ALIGN="center" WIDTH="765">
<TR>

Rest of Page past this point excluded.

Sign In

CSS image a.rollover:hover problem in FF 3

Recommended Posts

Skipjackrick

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

Skipjackrick

Link to comment

Share on other sites

departedmind

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

Skipjackrick

Link to comment

Share on other sites

killah

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

Skipjackrick

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

Skipjackrick

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information