Results 1 to 5 of 5

Thread: Annoying gap between images with links

  1. #1
    Join Date
    Apr 2006

    Annoying gap between images with links

    Hi there,
    I've been putting together a site trying to use CSS for the layout and especially making use of the a:hover to switch background images for a link.

    The issue I am having is a compatibility issue between IE6 and Firefox. I've got a few links on the right hand side that are using background images to try and fill the cell and will eventually switch background images on the hover effect. IE6 seems to recognise the height of a cell and the link style and does not display any gaps between the images.
    However Firefox seems to add an automatic gap/spacing between these links and I cannot find any way of getting rid of this gap. There should be no gap between links as you will see in IE6 but viewing in Firefox you will see a 1px gap around these links.
    How do I remove this gap in Firefox?

    The site is currently located here;
    And the css here;

    Any thoughts or comments would be appreciated.

  2. #2
    Join Date
    Jan 2005
    One thing, these instances
    background-image: url("body_member.jpg");
    where the file is in quotes - the quotes aren't needed.

    Another, you might add padding: 0 to each of the a (link) classes. Fx and IE interpret padding/margins differently. (Usually the exact opposite) Setting the padding to zero will help that.

    Lastly, add a border-collapse property to the main link table
    .mainlinktable {
    	width: 315px;
    	height: 367px;
    	margin: 0;
    	padding: 0;
    	vertical-align: top;
                 border-collapse: collapse;
    BTW - you might look into these errors: http://validator.w3.org/check?verbos...tn%2Fhome.html


  3. #3
    Join Date
    Apr 2006
    Hi KDLA,
    Thanks for your reply. I've tested out a the things that you have mentioned and am still experiencing no joy.
    I've removed the quotes from the background-image tags, added border-collapse attributes and also added padding: 0 attributes but I still have gaps between the images.

    Do you have any other idea's about what this problem could be related to? What else would Firefox be interpreting diferently to IE?

    Any more thoughts or suggestions would be a big help as I'm stuck.

  4. #4
    Join Date
    Apr 2003
    Remove the following classes: .bodycellmember, .bodycellcontent, .bodycellprograms and .bodycellcec
    At least 98% of internet users' DNA is identical to that of chimpanzees

  5. #5
    Join Date
    Apr 2006
    Fang you're the man, didn't realise those were completely useless.
    Done and consider this one sorted.
    Cheers guys.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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

Recent Articles