Image Positioning Inside Table Problem (IE only)

N

Neredbojias

Well bust mah britches and call me cheeky, on Wed, 02 Jan 2008 13:06:31
GMT Tomasz J scribed:
Hello Developers!

I am pulling my hairs out. IE adds extra space below an image when I
align it at the bottom inside a table cell.
Firefox and Opera render as expected.

Simple example available at
http://my-picture-store.com/test/panelboxtest.htm
Any ideas? cellspacing and cellpadding is already set to zero.

Image is inline and thus being located at the baseline. One favored fix is
to display it block.
 
D

dorayme

"Thomas J said:
Thanks!

But why inly in IE?? I guess it is a rethorical question.

Tomasz

You are not explaining your problem properly. How about a real
example with a real image and some real dimensions rather than
the less than clear Xs and teensy cols...?

Please quote what you are referring to before you reply.
 
N

Neredbojias

Well bust mah britches and call me cheeky, on Wed, 02 Jan 2008 23:08:10 GMT
Thomas J scribed:
Thanks!

But why inly in IE?? I guess it is a rethorical question.

Tomasz

Um, I really don't know. Couldn't be IE does something standardized where
the others compensate or ignore it...nah.

I look at html and css specs like rubber bands. They can be stretched and
reshaped, have holes, but they're still what holds things together. No
browser today is perfect or even that close, so flexibility is a required
quality for the happy pagemaker.
 
R

rf

Tomasz J said:
Hello Developers!

I am pulling my hairs out. IE adds extra space below an image when I align
it at the bottom inside a table cell.
Firefox and Opera render as expected.

Simple example available at
http://my-picture-store.com/test/panelboxtest.htm
Any ideas? cellspacing and cellpadding is already set to zero.

Time to stop the guesswork :)

Do it this way:
<TD style="HEIGHT: 1px"><IMG alt="" src="index_files/x.gif"></TD></TR>
instead of
<TD style="HEIGHT: 1px"><IMG alt="" src="index_files/x.gif"> </TD></TR>

and
<TD ...><IMG alt="" src="index_files/x.gif"></TD></TR>
instead of
<TD ...><IMG alt="" src="index_files/x.gif">
</TD></TR> ...

Note the whitespace before the </td> in each case. A space in the first one
and a newline, tab,tab or space,space in the second one.

IE incorrectly *uses* that whitespace. Modern browsers correctly ignore it.
 
T

Thomas J

Hi Richard,

Again, my problem was unwanted space below an image aligned to the bottom of
a table cell.
See: http://my-picture-store.com/test/PanelBoxTest.htm

What I need to accomplish was placing more than one image at the very bottom
of a table cell. I did not specify this initially not knowing that it would
make a difference.

Eliminating whitespace between elements inside the table cell (<td>) solved
the problem!
- see: http://my-picture-store.com/test/PanelBoxTest1.htm.
(tested in IE, Firefox, Opera and Safari)

Thank you for your and others help.

T
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top