[SOLVED] Working In IE.. Not In FF.. displaying images with onMouseOver

[AbydosGater]

Hey Guys,Having a bit of a problem with an image.

Im using the following HTML to display a blue

 

<table width="100%" border="0">
  <tr>
     <th width="52%" scope="col"><span class="style14"><img src="images/2200.png" alt="Dedicated Server" width="97" height="31"></span></th>
     <th width="48%" scope="col"><a href="somelink" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('999','','images/order_bo.gif',1)"><img src="images/order_b.gif" name="Image37" width="50" height="19" border="0"></a><a href="somelink" target="_top" onClick="MM_nbGroup('down','group1','order_b','images/order_bo.gif',1)" onMouseOver="MM_nbGroup('over','order_b','images/order_bo.gif','images/order_bo.gif',1)" onMouseOut="MM_nbGroup('out')"></a></th>
  </tr>
</table>

And The links use javascript to change on move in and move out.. I dont know the javascript but it can all be found on http://apthost.com/dedicated.php.

Dont worrie about the class of style14.. it doesnt exist yet.

 

Now if you open IE and look at the page.. it all looks perfect.

 

But if you open In FireFox everything for the "Order" buttons is above the blue background it was ment to be in.

 

Does anyone know why firefox is messing this up? It looks good in IE?

 

Andy

[Gafaddict]

A better way to work with hovering images is with CSS. First you turn the image into a span, and have the original image load through a CSS attribute. Then you apply the hover image basically the same way you'd apply properties to a link when you make it hover. This would be put in place of your image code:

 

<span desc="Dedicated Server" class="dedicatedserver"> </span>

 

Then you'd put this in a CSS document:

 

.dedicatedserver {
background-image: "images/2200.png";
width= 97px;
height=31px;
}

.dedicatedserver:hover {
background-image: "images/2200.png";
}

 

That should work on Firefox, IE, Safari... pretty much every browser out there.

[Gafaddict]

Sorry, the CSS code should have been:

 

.dedicatedserver {
background-image: url("images/2200.png");
width= 97px;
height=31px;
}

.dedicatedserver:hover {
background-image: url("images/2200.png");
}

[mainewoods]

you sure that will work, Gafaddict, I always code background-image without quotes:

.dedicatedserver {
background-image: url(images/2200.png);
width= 97px;
height=31px;
}

also a ':' should follow width and height.  As well I'm not sure if the css hover works with the span in IE, IE has limitations on the hover that ff doesn't have.  Code as a link instead that returns false from the onclick event, works everywhere.

[AbydosGater]

Hey Guys, Thanks for the replys. Hmm. I do like the idea. Although those codes are for the wrong image.. I adapted it for the order button but even when using a span and the following code:

 

                                  <tr>
                                    <th width="52%" scope="col"><span class="style14"><img src="images/2600.png" alt="Dedicated Server" width="97" height="31"></span></th>
                                    <th width="48%" scope="col"><span desc="Dedicated Server" class="order">       </span></th>
                                  </tr>

 

With the above css for .order{} class.. The order button on the page still appears above the blue background.

 

Has anybody else got any other ideas?

 

This is really important and any help is greatly appriciated!

Andy

[AbydosGater]

Topic solved

 

All Fixed.

Andy