Web design, image in cell offset problem.

This is a Firefox problem. I just started messing with the start of a FLOW web site for our Ogre wrapper. Ignore the barbie colors.

I'm having a strange problem with the positioning of an image within a cell, I've tried it as an image and as a background image to the cell. In both cases the image is offset 4/5 pixels in firefox and I can't find any reason for it.

I'm not very familiar with web design, thought I'd post on here see if any experts out there are familiar with the problem and have a solution for fixing it.

here's the page, http://www.flow3d.org/

It'd very early on, so not a lot of code to sift through, hope someone can figure it out. Spent several hours today with it.

-----

I also have a problem with the floating right margine jumping to the next line when the window is in some positions in IE7. I'm mostly concerned about the vertical offser in mozilla firefox though.

Managed to make the image relative top -4 pixels, which adjusted it so it looks right in FF, but them IE& is messed up since the offset effects IE which didn't have the same problem.


http://www.flow3d.org/relative-4.html

Adding "display:block" to img{} did the trick here for me.

[EDIT] The problem specifically was the image involved within the .dsR54 div, so you can just use the child-selector to specifically display:block that image if you want, or whatever other workaround you may know about.


Btw, if you don't have it, get the Firebug extension, bloody useful for troubleshooting sites, even though the extension itself does bug up once in a while {oh the irony...})

http://www.perturbatio.co.uk/files/flow.rar

I would suggest not using tables for layout at all, I knocked something up using CSS (had to redo the graphics a touch).

And yes, firebug is damned useful.

Hey thanks guys this helps a lot, and Perturbatio.

I searched all over the web for a way to get the backdrop to tile on each side and ended up with that rather messy margin trick.

Thanks for showing me a much nicer, elegant way to do it :)

I think I'm good to go now and build this thing in earnest.

Cheers guys.

I'm going to go grab the Firebug extensions now.

No problem :)

You *might* want to widen the header graphic a little more than 2000 pixels if you're bothered about users with a resolution of 2048xwhatever or higher.