I'm trying to add an element to an existing webpage - www.lapada.org. On their Fairs and Exhibitions page, I need to add four subsections inbetween the "LAPADA Fairs" heading and the main text. The new sections should look like this.
I've coded these subsections such that they work in IE. In Firefox, I have what looks like a 5 pixel gap underneath each image. According to Firebug, the gap is inside the 'imagecell' td, but it shouldn't be there, and I can't find a way of removing it.
When I insert this code into the existing LAPADA page, this gap underneath each image disappears. Fine. But there's a worse problem: a similar gap to the right hand side of either the title or textbox td, causing these cells to be wider than the image between them, and making the fixed-width background of the textbox td start to repeat on the right hand side. This problem exists in both Firefox and IE. Because this space doesn't exist when the code is taken out of context, I'm assuming it's some existing piece of styling on the LAPADA website interfering with the new sections. But I can't work out what could be causing it.
The existing LAPADA page with my new sections added to it can be seen here.
Can anyone advise me on
a) how to get rid of the horizontal gap in this page? (because I don't know what's causing it, and it's bugging me)
b) how to get rid of the extra space on the right hand side of each column in this page?