need help with Firefox CSS conflicts...

[Seldom Asked]

Hello,

I'm designing a site map page with a long list of links.

I've designed some javascript to control the mouseover events of the "box"
that contains the links.
In IE6, it works quite well, but in firefox it's a disaster.

In IE6, each link is in its own seperate box, but in Firefox all the boxes
are squished upward so they overlap the one above them, giving a stacked
deck of cards effect. great if you're playing poker, but lousy for looks on
a page.

If anyone could give me any pointers on refining css/js for Firefox
compatibility, I"d be much obliged!

I'll paste my code for the "link boxes" and also for the class governing the
link, below. thanks for any replies..


============ BEGIN LINK CODE ==============

<p>
<a href="../page1.htm" class="link3" style="background-image:
url(../images/bkg1.jpg); cursor: pointer"
onMouseOver="this.style.backgroundImage = 'url(../images/bkg2.jpg)'"
onMouseOut="this.style.backgroundImage = 'url(../images/bkg3.jpg)'"
onClick="window.location='../page1.htm'">Plcase Click Here...</a><br>

.... repeated 20 or so times... </p>

=========== END LINK CODE =================

CSS for "link3" class:

..link3 {
font-family: Geneva, Arial, Helvetica, san-serif;
font-size: 14px;
font-weight: bolder;
text-decoration: none;
height: 20px;
width: 90%;
padding-left: 20px;
border: 1px solid #E0FEFB;
padding-top: 5px;
padding-right: 5px;
margin: 2px;
padding-bottom: 5px; }

 

[Mark Parnell]

I'm designing a site map page with a long list of links.
http://css.maxdesign.com.au/listamatic/

I've designed some javascript to control the mouseover events of the "box"
that contains the links.

Why not use CSS? You're just changing the background image on hover.

In IE6, it works quite well, but in firefox it's a disaster.

Chances are Firefox is correct, and IE is wrong.

If anyone could give me any pointers on refining css/js for Firefox
compatibility, I"d be much obliged!

Validate your HTML and CSS. Beyond that: URL?