[SOLVED] Rollover problems with Firefox

[KevinM1]

This is another one of those "It works in IE but not FF" problems.

 

I have a series of rollover images for my navigation and some other things.  I've had code similar to what I've written work in both browsers, so it's a mystery as to why it's not working across platforms in this case.

 

The HTML in question is a bit messy.  It was constructed by a co-worker purely out of Photoshop slices, so it's a pretty messy table layout.  The page that I was responsible for was done tableless.  For the table-based pages, the links in question are inside of table cells.  For my tableless page, they're in unordered list elements.  I doubt that makes a difference, as my page has been having issues with FF as well.

 

So, a basic link would look something like:

.
.
.
<td colspan="3" id="home">
<a href="index.html"></a>
</td>
.
.
.

 

The CSS to control the rollover is:

td#home a{
   background: url(images/Glow Buttons/homeglow.jpg) no-repeat 0 0;
   height: 37px;
   width: 99px;
   display: block;
}

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

 

Pretty straight forward.  Unfortunately, the images aren't actually being displayed.  The images are there as they show up in IE7.  Is it a matter of the image url's having a space in their paths (Glow Buttons)?  Or is there something else going on?

 

[TheFilmGod]

You have nothing in between

<a href="index.html">.... Code needed here .... </a>

 

Pretty straight forward.

 

- really?

[KevinM1]

You have nothing in between

<a href="index.html">.... Code needed here .... </a>

 

You don't need anything between the opening and ending anchor tags if you tell those anchors to be block elements rather than inline elements, which is what I've done. The CSS basically says this:

 

For each <a>, make it a box with certain dimensions (in my example above, a 99 x 37 box). Give the background of that box an image (the url supplied in the background property) This image, in the same example, is 99 x 74. When the mouse hovers over the image, shift the background up 37 pixels.

 

This method of creating rollovers does work. I've done it myself in other websites, including my company's site (http://www.thinkingmachineonline.com), which works perfectly in FF. That's why I'm at a loss as to why it's not working now.

 

Pretty straight forward.

 

- really?

 

I think so. I was able to explain it in a mere four sentences above. Once you figure out you're just creating a mask for a background image, it's not hard to visualize what's going on.

 

EDIT: To see what my problem is, visit http://www.tmsource.com using Firefox.  The navigation menu on the left will show several blank spots, which is where the rollover images are supposed to be.  Like I said in my first post, those images are on the server.  IE7 shows them just fine.

[dbrimlow]

The problem in a nutshell (as I'm sure you suspect) is that it is 100% quirks mode - IE's best friend.

 

Also, since there is no doctype, you have an xhtml closing tag here:

<link rel="stylesheet" type="text/css" href="buttonglow.css" />

 

This makes it even worse. Modern browsers hate this.

 

Slap an html 4.0 strict doctype on it and clean up the tag soup. THEN advanced css tricks may work in modern browsers.

 

As is, this html and css has no chance in anything but IE.

[KevinM1]

The problem in a nutshell (as I'm sure you suspect) is that it is 100% quirks mode - IE's best friend.

 

Also, since there is no doctype, you have an xhtml closing tag here:

<link rel="stylesheet" type="text/css" href="buttonglow.css" />

 

This makes it even worse. Modern browsers hate this.

 

Slap an html 4.0 strict doctype on it and clean up the tag soup. THEN advanced css tricks may work in modern browsers.

 

As is, this html and css has no chance in anything but IE.

 

Ah, good point re: doctype.  However, the buy it page is XHTML strict (https://www.tmsource.com/Buy It/buyit.php).  The problem is there, as well.  Again, like I said above, this CAN work in Firefox.  My company's site -- which I also coded -- is proof of that.  I'm going to try one more thing, in addition to adding a doctype to the other pages.  FF's error console is giving me an error in the background properties for the rollovers, which is odd, as I don't get any errors from thinkingmachineonline.com, which uses almost the same exact CSS.

[KevinM1]

I was right -- my main problem was that FF didn't like the space (Glow Buttons) in the path of the background images' url.  So, now the images appear, even though the layout looks like crap in FF thanks to the tag soup.  But, whatever...fixing that is my co-worker's responsibility.

[dbrimlow]

With all that tag soup, if you make it xhtml 1.1 "aka, strict" , it will still be quirks mode until it validates to the doctype.

 

Using html 4.0 strict for one page and xhtml for another doesn't affect anything. The XHTML is defaulting to html anyway - if you are using text/html mime type.

 

But the page STILL is invalid code and will NOT layout right in FF.

 

PLEASE tell your colleague to Kill that xhtml closing tag in the css link, and shame on anyone who still uses the old html 3.0 body tags of (bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"), remove width="" and height="" from the table tags, and for goodness sake put SOMETHING in all of the naked alt="" tags.

 

An actual "tech" company and product website that uses such frightening, old deprecated code and heavy handed 1995 photoshop graphics is scary.

 

I've seen YOUR website(s). THAT is how professional business websites look! (although, you need to fix the invalid UTF-8 character line 96 of your home page; it is blowing up the validator - and the embedded video doesn't play in Firefox).