Seeking help on Mozilla positioning issue

[slightly]

Hi all.

I just finished putting together a small portfolio site for my web development - got it looking good in Safari, IE for Mac, and IE for Windows. However, the positioning of elements doesn't appear the same in Mozilla for Mac/Win, Netscape, or Firefox.

Here's the site.
http://homepage.mac.com/slightly99

If you view the site using a non-Mozilla browser, the four thumbnails at the top of the page are all contained in the larger border. I use position=absolute to do this, since absolute positioning takes account of the nearest ancestor with a position value (in this case, the table border).

However, the Mozilla browsers position the thumbnails as though their "absolute" co-ordinates were relative to the browser window, not the appropriate ancestor element. (If I try and position the thumbnails using position=relative, all kinds of hell breaks loose, and the positioning of one affects the positioning of another. So that doesn't seem like the way to go.)

Which is right? And how do I get around this without laborious browser-sniffing?

Thanks for any help.

Matt

[bousozoku]

I'm not certain but the W3C validator had a few comments about the page. It may be nothing, but fixing them might prove useful.

http://validator.w3.org/check?uri=http%3A%2F%2Fhomepage.mac.com%2Fslightly99

[Rower_CPU]

Here's a second vote for cleaning up the XHTML. I always validate first, then squash browser bugs.

[slightly]

Thanks both of you. That's a useful resource I didn't know about. The site now validates OK ... now I have to figure out why the positioning isn't consistent!

Matt

[Rower_CPU]

It looks to me like an absolute vs relative positioning cascade issue.

Try changing it to relative on the image links.

[slightly]

Well, I tried relative positioning. Like I said before, though, the actual values of the relative co-ordinates don't seem to make any sense (what are they relative to? it's not the containing element or the browser window), and getting them to the right location is totally trial-and-error. I had to re-position all the images in that table cell to make them look right.

So now, the page looks the same (and correct) in Safari and Mozilla browsers....but totally wrong in IE.

http://homepage.mac.com/slightly99/index2.html

The quest continues.... :(

Matt

[mnkeybsness]

check out these references for relative vs absolute positions

w3schools (http://www.w3schools.com/css/pr_class_position.asp?output=print)
brainjar (http://www.brainjar.com/css/positioning/)

[bousozoku]

...
So now, the page looks the same (and correct) in Safari and Mozilla browsers....but totally wrong in IE.

http://homepage.mac.com/slightly99/index2.html

The quest continues.... :(

Matt

That sounds more likely, though. ;)