www.webdeveloper.com
Results 1 to 3 of 3

Thread: Underscores in IE, space in FF

  1. #1
    Join Date
    Aug 2004
    Location
    San Diego, CA
    Posts
    225

    Underscores in IE, space in FF

    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.
    Code:
    <!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:
    Code:
    Test<a href="test.html"><img src="menu.gif" style="display:inline; border:0;"></a>
    Last edited by Jayhawk; 11-04-2005 at 05:25 PM.

  2. #2
    Join Date
    Aug 2004
    Location
    Ankh-Morpork
    Posts
    19,614
    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:
    Code:
    a img {   /* apply to all images contained within A elements */
      display: block;
      border: none;  /* you won't need the border="0" any more */
    }
    "Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be."
    ~ Terry Pratchett in Nation

    eBookworm.us

  3. #3
    Join Date
    Aug 2004
    Location
    San Diego, CA
    Posts
    225
    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.

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