I'm using a module on my homepage (Mini Frontpage) to make a gallery of links to recent news articles. The module generates table cells with each article's title and image (the bottom two rows of images on that page). You can see it on the bottom of the page here: TEAMS Design
In order to make the image, title, and transparent background for the title overlap, I'm using relative positioning. The text and its background have negative vertical positions so that they appear layered over the images, but this also leaves white space underneath them.
In order to remove the extra white space beneath those elements, I added a negative margin. This displays fine in Firefox and IE (though a little inconsistently), but Safari and Chrome entirely ignore the negative margin. They leave a huge white gap under each image.
When I tried to use absolute positioning instead, it made all of the elements of each row pile up on top of each other. Basically, it positioned them absolutely based on the rows, not on the cells.
Is there a more consistent way than negative margins to remove the white space if I stick with relative positioning? Or, is there a way to position the elements absolutely, but to make it determine the position by table cell instead of table row? The way that the table is generated, I can't just change the images to be table background images (or maybe I could, but I would need to know PHP).
I've been told that a table automatically positions elements relatively, and that's why each browser is rendering it differently.
Unfortunately, the Joomla module automatically generates and populates the table. If I knew how to create CMS extensions, I would design it differently, but I'm not a developer and I have to work with what's there.
Any advice on how work around this issue in order to layer the elements in the table?