Select Categories Below
Status: Closed Points: 30 Time: 12:32 - May 03, 2006
sbjc23
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?
Categories:
Add Categories
When adding more than one category, separate them with commas.
Advertisement
jgivoni
Date:: May 12, 2006
Time:: 17:10
Have you tried adjusting the margin using CSS?
Time:: 17:33
I'm not using CSS, just normal HTML.
tim
Date:: May 14, 2006
Time:: 05:19
Do you have a link to a page showing the problem? Have you tried setting border=0 ?
Date:: May 15, 2006
Time:: 09:54
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.
Date:: May 17, 2006
Time:: 02:23
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.
john2
Date:: May 22, 2006
Time:: 10:14
This is a freaking great question, I've always had problems with this one.
Time:: 20:01
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>
Date:: May 25, 2006
Time:: 10:28
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.
dbrons
Date:: Jun 12, 2006
Time:: 18:10
Are you serious? That simple? <table> <td> <img src-""></td> </table>
James1
Date:: Jul 03, 2006
Time:: 11:12
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.
Question Answered
This question has been closed, and points have been rewarded to the following experts:
You're welcome however to comment or give additional information or if you wish, you have the ability to write a Tutorial in the Tutorial Area.
Answer 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:
Forgot Your Password?
Enter your email address below and we will resend your login information to you.
Login Information Sent
Date:: Feb 11, 2007
Time:: 12:19
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 tutorial.
Login to rate this tutorial: Good | Bad
Questions
Element width and padding gives different results for IE and FF.
You have 100 characters to use
Rank
Expert
Points
1.
1022
2.
928
3.
875
4.
240
5.
220
6.
125
7.
75
8.
9.
10.
Register today to share your knowledge with the community and be recognized and rewarded for your contributions.
Register Here
"Psst, Quomon is a great site. Pass it on." Tell a Friend | Link To Us | Save to Delicious | Digg it
Language Options
English:
Español:
Sponsors
Questions and Answers Software Real Estate Postcards Marketing Fulfillment