Extra margin at the bottom of image links

**ReeD** · Oct 3, 2006 23:56

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;
}

**mhulse** · Oct 4, 2006 00:01

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; }

**S.Vasiliy** · Oct 4, 2006 00:10

you can just set height to your "a", and it will work in ff too

**ReeD** · Oct 4, 2006 00:30

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

**mhulse** · Oct 4, 2006 00:36

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?

**ReeD** · Oct 4, 2006 00:48

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

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.

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.

**mhulse** · Oct 4, 2006 00:58

Originally Posted by ReeD

Images could, but not links probably (as suggested).

Not sure what you mean.

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.

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.

User Tag List

Thread: Extra margin at the bottom of image links

Thread Tools

Display

Extra margin at the bottom of image links

Bookmarks

Bookmarks

Posting Permissions