Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Negative Margins Issue in Chrome & Safari

    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

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

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,639
    Thanks
    0
    Thanked 649 Times in 639 Posts
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •