1 pix 'gap' in FF, GC, but not IE

Hi all,

I built a web site a few years ago and have recently reworked it but essentially kept what was there before, the changes being mainly to artwork. The structure is controlled entirely by TABLEs, not a DIV in site(!).

The code is riddled with nested tables but works perfectly in Explorer, and also in Google Chrome and FireFox but with one annoying exception.

The site is at www.geminiintegratedelectronics.com and you can most easily see the problem if you go to the ESD section. In IE, everything is fine, but in GC and FF you'll see a 1-pix 'gap' above the banner heading. If it were a common problem for the two browsers I would expect to see lots of such gaps as the general structure is pretty consistent throughout the site, but it's only in this one place - but on every page, of course - so I'm assuming it's something in the local markup, but I just can't find it.

For what it's worth I've got TD lineheight set to zero in the stylesheet - which I find is essential for the two non-IE browsers - and also I've found that if you set the height of the thin strip image immediately below the gap to 6 instead of (correctly) 5 pix, then the gap disappears, but the image then distorts, of course, and doesn't line up with the background strip.

Thanks in advance for your help.

Let me advise you in the future to code for Firefox/Chrome and then fix it for IE, since it's the one that time and time again cares least about standards, websites are much more likely to function properly.

Btw, your HTML contains 70 errors according to the validator, which is really a huge amount, so fix those and even if that doesn't fix your problem (which it should) it'll be much easier to work out what will.

Here's your report: http://validator.w3.org/check?uri=http://www.geminiintegratedelectronics.com/esd.html&charset=(detect+automatically)&doctype=Inline&group=0

Edit: I think your main problem validation wise is that you've chosen XHTML Strict as the doctype, this is really a very strict standard and I don't see any reason why you'd need to use that. Try HTML 4.01 Transitional, it's much more lenient.

Furthermore, just of curiosity more than anything - why not use DIVs? That page would be sooooooo much easier to create with divs than with tables. Like, honestly, soooo much easier. :)

Just goes to show a little knowledge is a dangerous thing. I've not done much Flash before and thought I had to have the stricter Doctype for it. I've used your suggestion and I'm down to four errors, only one of which is really 'genuine'.

Thanks again.

As Common suggested, here (http://www.hotdesign.com/seybold/)is sone good reading about table layouts.

Maybe like me, he does not yet have the knowledge of how to.

Maybe like me, he does not yet have the knowledge of how to.

Better to learn correct coding practices from the beginning. If you have the choice to learn to build pages with tables or divs, both are learning experiences, so why not learn the correct one.

Because I knew nothing of DIVs. I started learning by viewing the source of many websites I had visited on a daily basis, which were built with tables, copying, pasting, and editing the code. When you don't know what you are doing and are just using what other people already had, obviously there isn't much "choice" there.

Anyway, like you said yourself, both are learning experiences, so why not learn...both. Which is what I intend to do.

I hope I didnt sound like I was belittling you or anyone. I agree that we all probably learn incorrect practices either from some other examples or even by bad instruction at one point or another.

I personally think table layouts can be more difficult that div layouts, especially when you get into nested tables and multi column/row joins and the like. The fact that you ARE learning is the exciting part, so keep on going!