browser compatibility Firefox

[bitstomper]

Hi everyone,

I have a problem with Firefox not displaying my page properly.
Probably using some code Firefox does not understand.

My css:

.boxclass a:link {background-image: url("images/boxes/box3.gif");
width: 169px; height: 165px; text-align: center; vertical-align: top; }
.boxclass a: hover {background-image: url("images/boxes/box2.gif");
width: 169px; height: 165px; text-align: center; vertical-align: top; }
.boxclass a:visited {background-image: url("images/boxes/box3.gif");
width: 169px; height: 165px; text-align: center; vertical-align: top; }

My HTML:
<tr>
<td class="boxclass"><a href="link1.htm">
<br>
<img border="0" src="images/boxes/image1.jpg" width="112" height="94"><br>
<p class="classmain2">millinery essentials</p></a></td>
<td class="boxclass"><a href="link2.htm">
<br>
<img border="0" src="images/boxes/image2.jpg" width="70" height="94"><br>
<p class="classmain2">crinoline</p></a></td>
<td class="boxclass"><a href="link3.htm">
<br>
<img border="0" src="images/boxes/image3.jpg" width="112" height="94"><br>
<p class="classmain2">hoods</p></a></td>
<td class="boxclass"><a href="link4.htm" >
<br>
<img border="0" src="images/boxes/image4.jpg" width="70" height="94"><br>
<p class="classmain2">millinery books</p></a></td>
</tr>

Does fine in IE but in FF it is a mess.
FF does not seem to do the class inside a <td>.
ANything I can do with divs?

Thanks

[drhowarddrfine]

You have a: hover with a space. The space must not be there.
In addition, you have several html errors. Validate for that list.
What exactly is the problem? Don't make us guess.
Show the complete code. Without it, we don't know if something else might be wrong, such as, which doctype are you using?

Whatever the problem, it will be with IE. Never use IE as a reference browser. Only use modern browsers to initially test in, such as Firefox.

[bitstomper]

Thanks for your response Howard,
None of the pages uses a doctype.
This I know is blasphemy but that is how I initially took over the management of the site. It will take too much time now to overhaul the site to be compatible to all browsers using doctype. I might do that later though. Here is the thing though: all pages work nicely in all browsers with the exception of some Javascript navigation in FF. When adding the html 4.01 strict doctype it becomes a little messy in FF and Opera. So quirk mode works fine for now until I will update the whole thing. You can find the page here: www.torbandreiner.com/millinery_supplies.htm
FF and Opera do not load the background images.
I have tried to validate using a doctype but the W3C validator keeps loading and never gives me a result.
What do you know about table definitions in FF and Opera?

[Centauri]

<a> is an inline element and therefore cannot be given a width and height. Try adding display:block to the <a> css

[bitstomper]

I have solved the issue by using different css see: www.torbandreiner.com/millinery_supplies.htm

This way I stay out of defining the <td> as a class but give <a> a class.
Works like a charm.

[Centauri]

I might point out that you only need to include changes in the psuedo class css, therefore, for example, .BoxLink:hover can be simplified to
.BoxLink:hover {
color: #330099;
background-image: url("images/boxes/box3.gif");
} as the non-changing styles have already been defined in .BoxLink class.