www.webdeveloper.com
Results 1 to 5 of 5

Thread: Annoying gap between images with links

  1. #1
    Join Date
    Apr 2006
    Posts
    4

    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;
    http://productsofthesystem.com/clients/ptn/home.html
    And the css here;
    http://productsofthesystem.com/clients/ptn/style.css


    Any thoughts or comments would be appreciated.

  2. #2
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    One thing, these instances
    Code:
    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
    Code:
    .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

    KDLA
    FYI
    * My screen resolution is set at 1680x1050
    * I'm accessing your site through a T1 line
    * I'm probably viewing it using Firefox (unless browser is specified)

  3. #3
    Join Date
    Apr 2006
    Posts
    4
    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
    Location
    Netherlands
    Posts
    21,654
    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
    Posts
    4
    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