Register  |  Login

Question Details    

   Question

Time: 12:32 - May 03, 2006     Asked by: sbjc23      Status: Answered      Points: 30   

How do I get rid of the space underneath images in internet explorer?

Every time I add an image in internet explorer, it always leaves a 3 pixel space underneath the image. It doesnt do this in firefox though. Why is this and what can be done to fix it?

Ask a New Question

Become a Quomon Expert

Current Categories

 

Other Questions Needing Answers


   

Answer Discussion
Answer Discussion
Answer Summaries
Answer Summary
 
Have you tried adjusting the margin using CSS?

Expert:

jgivoni

Date:

May 12, 2006

Time:

17:10

 

Votes: Good (0) | Bad (0)
Login to rate this answer

I'm not using CSS, just normal HTML.

Expert:

sbjc23

Date:

May 12, 2006

Time:

17:33

 

Votes: Good (0) | Bad (0)
Login to rate this answer

Do you have a link to a page showing the problem? Have you tried setting border=0 ?

Expert:

tim

Date:

May 14, 2006

Time:

05:19

 

Votes: Good (0) | Bad (0)
Login to rate this answer

I dont have a link showing it, I am developing it off of my computer's drive. Have you heard of this problem before? The border is already set to zero.

Expert:

sbjc23

Date:

May 15, 2006

Time:

09:54

 

Votes: Good (0) | Bad (0)
Login to rate this answer

Can you post the html snippet surronding the images and the content below? Make sure the snippet demonstrates the same problem when in a page of it's own.

Expert:

tim

Date:

May 17, 2006

Time:

02:23

 

Votes: Good (0) | Bad (0)
Login to rate this answer

This is a freaking great question, I've always had problems with this one.

Expert:

john2

Date:

May 22, 2006

Time:

10:14

 

Votes: Good (0) | Bad (0)
Login to rate this answer

Even though you don't use stylesheets, it might be the only way to avoid the problem.
You don't have to create a complete stylesheet - the CSS code can just be added to your html document.
Try putting this within your <head></head> section:

<style type="text/css">
img { margin:0; padding:0; border:0;}
</style>

Expert:

jgivoni

Date:

May 22, 2006

Time:

20:01

 

Votes: Good (0) | Bad (0)
Login to rate this answer

There is an easy fix to this with simple HTML

If you have a table like this:

<table>
<td>
<img src-"">
</td>
</table>

It will have the space in interenet explorer. All you have to do is simply move the <td> tag up behind the <img> tag and it will solve the problem. I'm sure there are other fixes but this is the best one.

Example:

<table>
<td>
<img src-""></td>
</table>

Hope this does the trick for you.

Expert:

john2

Date:

May 25, 2006

Time:

10:28

 

Votes: Good (0) | Bad (0)
Login to rate this answer

Are you serious? That simple?

<table>
<td>
<img src-""></td>
</table>

Expert:

dbrons

Date:

Jun 12, 2006

Time:

18:10

 

Votes: Good (0) | Bad (0)
Login to rate this answer

I would use CSS if anyone reads this from this point on. Tables are out the door and it's just a matter of time before they disappear altogether.

Expert:

James1

Date:

Jul 03, 2006

Time:

11:12

 

Votes: Good (0) | Bad (0)
Login to rate this answer

Question Answered

This question has been answered, and points have been rewarded to the following experts:

john2: 30

You're welcome however to comment or give additional information or if you wish, you have the ability to write an Answer Summary for this question by clicking on the "Answer Summaries" Tab.


First the simple and direct solution:
display: block

This css property on an image will ensure that it is treated like a block level element - which will avoid the 3 pixel bottom margin problem (explanation follows below).
Example:
<img src="[...]" style="display: block" />

The explanation is that images per default are inline elements and therefore has to be aligned with neighbor inline elements, i.e. text. Per default this alignment will place images and letters on the same baseline. Since some letters, like j and g have parts below the baseline, the layout must reserve this space below the baseline for such characters. Result: The next block level element has to be places at least approx. 3 pixels below the image (depending on font-size and so on).

This is a workaround (it is mentioned in the answer to this question):
<td><img [...] ></td>

- placing the image tag between the surrounding tags with no spaces or linebreaks between, because that will prevent the layout engine from producing a text-element to align with the image. Just one single space or newline character is enough to break the layout, and therefore the css solution is recommended.

Firefox doesn't exhibit this 'problem', - in short because it is not behaving according to css standards.

(Main source: http://www.quirksmode.org/css/quirksmode...)

Click here to see the Answer Discussion that preceded this summary.

Expert:

jgivoni

Date:

Feb 11, 2007

Time:

12:19

 
 

Login to rate this summary: Good  |  Bad

Respond to this question:

New User

  Email:

Upon submission of this form, you will automatically be registered as a Quomon user and we will send your login information to this address

Registered User

Username:

Password:


Forgotten Password

 

New User

  Email:

Upon submission of this form, you will automatically be registered as a Quomon user and we will send your login information to this address

Registered User

Username:

Password:


Forgotten Password

   

"Psst, Quomon is a great site. Pass it on."     Tell a Friend  |   Link To Us  |   Save to Delicious  |   Digg! Digg it


All Questions


Language Options

English:

www.quomon.com

Español:

www.quomon.es

Sponsors

Questions and Answers Software
Real Estate Postcards
Marketing Fulfillment