Grow your CSS skills. Land your dream job.

Weird Firefox CSS Table Issue

  • # July 16, 2012 at 10:10 pm

    Hey there,
    This is probably one that’s been dealt with already, but it’s puzzling me & I’m out of ideas, so I thought I’d send it your way as there’s no doubt a guru here who can help me. Here’s the page
    It’s a table with an image map in it (just migrated from an older site).
    It’s fine in Safari, Chrome & even IE8+
    Any ideas?
    Thanks in advance,
    Jas

    # July 17, 2012 at 7:42 am

    Man, you really did that the hard way didn’t you?!

    LOL.

    I would have just used a div with the map as a background image and its position set to relative, then made the little “w” icons links and absolutely positioned them where they need to be…no tables or failure, just solid stuff…

    why don’t you give that a try? It will clean up your code immensely.

    instead of what you have now you can assign the icon as a background image to a class and not have to repeat it over and over and over as an img element…you can do something like the following (just an example, specific to your case, but isn’t the exact code):


    div.map {
    position: relative;
    width: 250px;
    height: 400px;
    background: url(map.png) no-repeat left top;
    }
    a.location-icon {
    position: absolute
    display: block;
    width: 10px;
    height: 10px;
    text-indent: -9999px;
    background: url(location-icon.png) no-repeat center center;
    }
    a#auckland-east {
    top: 150px;
    left: 198px;
    }
    a#auckland-south {
    top: 250px;
    left: 187px;
    }
    a#auckland-west {
    top: 143px;
    left: 156px;
    }

    and your html would be something like:



    # July 17, 2012 at 4:33 pm

    Yeah, look – I totally agree. Now, to save face a little – I didn’t build it (I inherited it) so (as you say) I would prefer to rebuild this – but it’s been one of those nightmare jobs that I’ve basically lost money on – hand over fist.
    Regardless, I want to do the right thing – so I’ll follow your lead.
    Thanks for the example code – much appreciated,
    Jas

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".