Positioning Problem Help Needed - About out of hair to pull out

HTML & CSS
1

I’m working on a site here:

Join us October 19-22, 2011 for Zest in the West in West Houston, Texas.

In every browser it seems to work beautifully, except Firefox -
can someone catch something I missing?

In Firefox, all the hover images are stacked on top of each other in the upper left hand corner. In the other browsers, it appears just fine.

I’m at my wit’s end. Please help!

2

The specs don’t define whether you can position from table cells so its down to browser interpretation.

That is indeed Mozilla’s excuse to not fix it. I don’t see the point of having specs if the specs say “2 browsers are okay to do it this way and 3 browsers can do it this whole other way too” since that just means “developers cannot use that at all”.

Should be big black boxes in the specs in all those places where it says “x is not defined” so all developers know right away to stop even reading that section and go find something that is supposed to actually be the same cross-browser.

3

Hi,

The specs don’t define whether you can position from table cells so its down to browser interpretation. You could probably fudge it with negative margins but the safest way to is wrap the content in a div that is set to position:relative.

e.g.


<td class="top1 fadehover"><div><a href="./grand_zesting.php" title="Grand Zesting"><img src="http://www.zestinthewest.com/images/zest_1.jpg" alt="Grand Zesting" class="a" border="0" /></a> <a href="./grand_zesting.php" title="Grand Zesting"><img src="http://www.zestinthewest.com/images/zest_2.jpg" alt="Grand Zesting" class="b" border="0" /></div></a></td>
				<td class="top2 fadehover"><div><a href="./zestival.php" title="The Zestival"><img src="http://www.zestinthewest.com/images/canvas_1.jpg" alt="The Zestival" class="a" border="0" /></a> <a href="./zestival.php" title="The Zestival"><img src="http://www.zestinthewest.com/images/canvas_2.jpg" alt="The Zestival" class="b" border="0" /></a></div></td>
				<td class="top3 fadehover"><div><a href="./creations_sips.php" title="Culinary Creations &amp; Sips"><img src="http://www.zestinthewest.com/images/foam_1.jpg" alt="Culinary Creations &amp; Sips" class="a" border="0" /></a> <a href="./creations_sips.php" title="Culinary Creations &amp; Sips"><img src="http://www.zestinthewest.com/images/foam_2.jpg" alt="Culinary Creations &amp; Sips" class="b" border="0"/></a></div></td>

Then only position one image to keep the cell open.


img.a {
	position: relative;
	z-index: 10;
}
img.b {
	position: absolute;
	left: 0;
	top: 0;
}
.fadehover div{position:relative;zoom:1.0}
4

Sorry, I didn’t look any further after I saw the position:absolute with the top: and left: declarations of the img.a. I tried removing those top: and left: values, and that makes the images stack pairwise inside the td, but now the whole middle row collapses in FF(4).

There is an issue with FF and tables, i.e. table cells, I remember that from a problem on another forum where a content had to be positioned inside a td. And we couldn’t solve it due to a FF property. So I’m afraid I don’t have an answer for you yet.

5

Try giving the img.a a position:relative in stead of absolute.

6

That works for img.a, but the img.b still stays in the upper right corner. If I change img.b to relative also, it then sits below the img.a image instead of being stacked on one top of each other and creating the hover fade effect.

Any ideas?