Underscores in IE, space in FF [Archive]

Click to See Complete Forum and Search --> : Underscores in IE, space in FF

Jayhawk

11-04-2005, 04:22 PM

In the following, the first one has no space between the word "Test" and the image, the second has a space when viewed in FF, and a space filled by an underscore when viewed in IE.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div style='width:100%; text-align:center'>

<div style="width:768px">
Test<a href="test.html"><img src="menu.gif" border=0></a><br>
Test<a href="test.html">
<img src="menu.gif" style="display:inline; border:0;"></a>
</div>
</body>
</html>

What is causing that, and how does one get rid of it? Is it related to the text, the image, or the <a> element?

I can more or less live with the space, but definitely not the underscore.

oops: never mind: I just saw it:

Test<a href="test.html"><img src="menu.gif" style="display:inline; border:0;"></a>

NogDog

11-04-2005, 06:16 PM

By default, an IMG is an in-line element. As such, a linebreak just before or after an IMG tag will result in a word space. I would suggest adding this to your CSS style:

a img { /* apply to all images contained within A elements */
display: block;
border: none; /* you won't need the border="0" any more */
}

Jayhawk

11-04-2005, 07:43 PM

Thanks. I had gotten that it was the line break in the <href><img> combination, but I hadn't pinned it down to the fact that it was specific to the break before/after the image regardless of the <a> issue. That will keep me out of trouble until I forget it. (But I'm making notes, so...)

This is such a helpful place.