View Full Version : Negative Margins Issue in Chrome & Safari

01-27-2012, 10:58 PM
I'm using a Joomla module that 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 (http://teamsdesign.com/com/)

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).

01-28-2012, 12:06 AM
You can't use position:absolute or position:relative inside a table as the fact that it is a table defines the relative positions. As you have discovered different browsers interpret it differently when you try to apply positioning that doesn't make sense for tables.

01-30-2012, 05:53 PM
Unfortunately, like I mentioned, the Joomla module automatically generates and populates the table. If I knew how to create CMS extensions, I would do it differently, but I'm not a developer and I have to work with what's there. :(

Do you have advice for how I could go about layering the information within the table in a different way with CSS?