SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Aug 2005
    Location
    Lithuania, Europe
    Posts
    295
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Extra margin at the bottom of image links

    For some reason there's some margin visible below each of the image links. How do I remove it? It's only visible in FF, in IE it shows without the margins.

    HTML:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    	<head>
    		<title>Site</title>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<link href="style.css" rel="stylesheet" type="text/css" />
    	</head>
    	<body>
    		<a href="#"><img src="image1.jpg" /></a><br />
    		<a href="#"><img src="image2.jpg" /></a><br />
    		<a href="#"><img src="image3.jpg" /></a>
    	</body>
    </html>
    CSS:
    Code:
    html, body
    {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      background-color: #FFFFFF;
    }
    
    img
    {
      margin: 0;
      padding: 0;
      border: 0;
    }

  2. #2
    .* draziW tnioPetiS *. bronze trophy
    Join Date
    Jun 2004
    Location
    "Then I figure the most good good guy will win."
    Posts
    1,666
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you tried:

    Code:
    img { display: block; }
    ?

    Those BR's look a bit odd though... Personally, I would use a UL for this type of thing.

    EDIT: Also, setting a width/height for the images in your css could help too:

    Code:
    /* Remove blue linked image borders: */
    a img, :link img, :visited img { border: none; }
    a img { display: block; width: 50px; height: 50px; margin: 0; padding: 0; }

  3. #3
    SitePoint Enthusiast S.Vasiliy's Avatar
    Join Date
    May 2006
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you can just set height to your "a", and it will work in ff too

  4. #4
    SitePoint Addict
    Join Date
    Aug 2005
    Location
    Lithuania, Europe
    Posts
    295
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Unfortunately none of your suggestions work. display: block adds even more margin, setting the width/height of a doesn't help either (and it's not something I'd like to do).

  5. #5
    .* draziW tnioPetiS *. bronze trophy
    Join Date
    Jun 2004
    Location
    "Then I figure the most good good guy will win."
    Posts
    1,666
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ReeD
    (and it's not something I'd like to do).
    Why not? Images should be a set widht/height anyway? What is the harm?

    I guess it would be good to see a link to the page in question.

    Any reason you are using a strict DTD?

  6. #6
    SitePoint Addict
    Join Date
    Aug 2005
    Location
    Lithuania, Europe
    Posts
    295
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mhulse
    Why not? Images should be a set widht/height anyway? What is the harm?
    Images could, but not links probably (as suggested).
    Quote Originally Posted by mhulse
    I guess it would be good to see a link to the page in question.
    You don't believe me the margins are there? Just copy-paste the code and view it in FF.
    Quote Originally Posted by mhulse
    Any reason you are using a strict DTD?
    I like my pages passing strict validation, it's W3C recommendation. I don't see any reason why I should not use it.

  7. #7
    .* draziW tnioPetiS *. bronze trophy
    Join Date
    Jun 2004
    Location
    "Then I figure the most good good guy will win."
    Posts
    1,666
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ReeD
    Images could, but not links probably (as suggested).
    Not sure what you mean.

    Quote Originally Posted by ReeD
    You don't believe me the margins are there? Just copy-paste the code and view it in FF.
    I am lazy.

    If the page was available for us to dink with (via Firefox developer extensions), that would probably help streamline the help and subsequent answer from other members.

    Quote Originally Posted by ReeD
    I like my pages passing strict validation, it's W3C recommendation. I don't see any reason why I should not use it.

    This FAQ might explain some of my reasons for questioning your use of a strict DTD... but I am mos def not DTD police, so do what you think is best.


Bookmarks

Posting Permissions

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