Image not filling a table table (html4 strict)

K

killy971

I am having a problem with the fact that when I insert an image in a
table cell, it won't fill the cell completely when I declare the
document as strict html4. But when using the "loose" html4 doctype, it
works...
The code is the following :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0"
style="background-color: #000000;">
<tr>
<td bgcolor="#DD0000">
<img src="http://img384.imageshack.us/img384/3636/
testbc0.gif"/>
</td>
</tr>
</table>
</body>
</html>


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0"
style="background-color: #000000;">
<tr>
<td bgcolor="#DD0000">
<img src="http://img384.imageshack.us/img384/3636/
testbc0.gif"/>
</td>
</tr>
</table>
</body>
</html>

With the strict one, it seems like I can somehow get over the problem
by using css to modify the bottom margin of the image with a minus
value... solution that is really not good I think, especially because
the display is not the same on firefox and internet explorer,
depending on the value of this margin.

Does anyone know how to solve this problem in a simple way ?
 
D

dorayme

killy971 said:
I am having a problem with the fact that when I insert an image in a
table cell, it won't fill the cell completely
Click to expand...
With the strict one, it seems like I can somehow get over the problem
by using css to modify the bottom margin of the image with a minus
value... solution that is really not good I think, especially because
the display is not the same on firefox and internet explorer,
depending on the value of this margin.

Does anyone know how to solve this problem in a simple way ?
Click to expand...

You are likely getting a space at the bottom that you don't want because
you are using an inline image and the space is reserved for text
descenders. You can fix this by styling the images as display: block;

This sort of thing comes up in various contexts.

<http://netweaver.com.au/floatHouse/appendices/page6_1.html>

or, simpler:

<http://netweaver.com.au/alt/inlineImages/inlinePicWithDescenderSpace.htm
l>

(watch the url for missing bits or breaks in this message as read in
your newsreader)
 
C

Chris F.A. Johnson

I am having a problem with the fact that when I insert an image in a
table cell, it won't fill the cell completely when I declare the
document as strict html4. But when using the "loose" html4 doctype, it
works...
The code is the following :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0"
style="background-color: #000000;">
<tr>
<td bgcolor="#DD0000">
<img src="http://img384.imageshack.us/img384/3636/
testbc0.gif"/>
</td>
</tr>
</table>
</body>
</html>


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0"
style="background-color: #000000;">
<tr>
<td bgcolor="#DD0000">
<img src="http://img384.imageshack.us/img384/3636/
testbc0.gif"/>
</td>
</tr>
</table>
</body>
</html>

With the strict one, it seems like I can somehow get over the problem
by using css to modify the bottom margin of the image with a minus
value... solution that is really not good I think, especially because
the display is not the same on firefox and internet explorer,
depending on the value of this margin.

Does anyone know how to solve this problem in a simple way ?
Click to expand...

Have you tried: td img { display: block; } ?
 
A

Andy

killy971 said:
I am having a problem with the fact that when I insert an image in a
table cell, it won't fill the cell completely when I declare the
document as strict html4. But when using the "loose" html4 doctype, it
works...
The code is the following :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0"
style="background-color: #000000;">
<tr>
<td bgcolor="#DD0000">
<img src="http://img384.imageshack.us/img384/3636/
testbc0.gif"/>
</td>
</tr>
</table>
</body>
</html>


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0"
style="background-color: #000000;">
<tr>
<td bgcolor="#DD0000">
<img src="http://img384.imageshack.us/img384/3636/
testbc0.gif"/>
</td>
</tr>
</table>
</body>
</html>

With the strict one, it seems like I can somehow get over the problem
by using css to modify the bottom margin of the image with a minus
value... solution that is really not good I think, especially because
the display is not the same on firefox and internet explorer,
depending on the value of this margin.

Does anyone know how to solve this problem in a simple way ?
Click to expand...

Hi,

A real easy way to fix your problem is just to ensure that there are no line
breaks between the <td> and the </td>.

With issue...

<td>
<img src="../images/image.gif">
</td>


Without issue...

<td><img src="../images/image.gif"></td>


Hope this helps

Andy
 
G

Gus Richter

dorayme said:
You are likely getting a space at the bottom that you don't want because
you are using an inline image and the space is reserved for text
descenders. You can fix this by styling the images as display: block;
Click to expand...

Just for completeness, vertical-align:bottom; is another.
 
D

dorayme

Gus Richter said:
Just for completeness, vertical-align:bottom; is another.
Click to expand...

vertical-align in the CSS or even valign="bottom" in the HTML for the
cell concerned would get it down in the vicinity wanted but there still
will be the gap for the reason of room being made for descenders in
inline text.

(inline images are treated as sitting on a baseline like an "a" rather
than having a part that descends like a "y". I can think of a few
reasons but they are not completely compelling.

One could say that browsers think inline images are special letters
without descenders but wildly unpredictable ascenders.

I am reminded of a joke - some people will see the relevance, others
will not:

<http://dorayme.890m.com/jokes/kosherRestaurant.html>


)
 
K

killy971

Thank you very much for your answers. Using the style "display: block"
actually made the trick.
But I have another problem : I would like with the following code to
have the image "searchline2sy4.gif" fill the whole cell it is in,
without using it as a background image.
Is there a way to do this ?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<style>
img {
display: block;
border: 0;
}
body {
font-size: 10pt;
margin: 0px;
}
</style>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="background-color: #000000;"><img src="http://
img522.imageshack.us/img522/4941/searchline2sy4.gif" style="height:
100%;"/></td>
<td>&nbsp;<br/>&nbsp;<br/>&nbsp;<br/></td></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="http://img525.imageshack.us/img525/6070/
searchline4wz0.gif"/></td>
</tr>
</table>
</body>
</html>
 
D

dorayme

"Chris F.A. Johnson said:
Tut, tut! A horizontal scrollbar in a narrow window.
Click to expand...

Are you sure? <g>

(Been ages since I looked at the stylesheet for my small collection of
jokes... thanks, I probably need to tweak it even more but this should
now do. I must have made it when I thought everyone had huge screens...)
 
D

dorayme

killy971 said:
Thank you very much for your answers. Using the style "display: block"
actually made the trick.
But I have another problem : I would like with the following code to
have the image "searchline2sy4.gif" fill the whole cell it is in,
without using it as a background image.
Is there a way to do this ?
Click to expand...

Will this do:

<http://dorayme.890m.com/alt/killy.html>
 
D

dorayme

doesn't seem to work well (ie and firefox), especially when you
resize the window.
Click to expand...

OK, I just saw it in Safari quickly before posting. You might know that
width is not a problem if you do not specify a width for the cell it is
in because a table cell (unless outside considerations dictate otherwise
- in other words, there's a complication) will shrink to fit the
content. So if there is only an image in one cell in a one row/ one cell
table that is not dictated to in terms of width, the cell will be as
wide as the content. In special case of just image, it will also be as
high as the image. Magic of tables.

<style type="text/css" media="screen">
table {border-collapse: collapse; }
td {border: 1px solid;}
td.img {padding: 0;}
.img img {display:block;}
</style>
</head>
<body>
<table>
<tr>
<td class="img"><img src="pics/crimson.png" alt=""></td>
</tr>
</table>
</body>


should show a cell just the right size of the natural image, width and
height.

Your problem, presumably is to get the image to stretch if the height of
the cell is pushed high by the need to match an adjoining cell:

Browsers have leeway in responding to

<img src="pics/crimson.png" height="100%" width="100%" alt="">

and in Safari and iCab but not FF,

<http://dorayme.890m.com/alt/killy1.html>

does what I imagine you want. But it does not get you the height stretch
in FF.

But before going on, why do you want this as foreground pic (that might
well distort) and why in a table?
 
G

Gus Richter

dorayme said:
vertical-align in the CSS or even valign="bottom" in the HTML for the
cell concerned would get it down in the vicinity wanted but there still
will be the gap for the reason of room being made for descenders in
inline text.
Click to expand...

Please actually try replacing display: block; with
vertical-align:bottom; in the example you provided in this thread and
then respond.
Ref: <http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align>

<snipped refresher material and joke>

valign is another kettle of fish (or should I say a can of worms) which
I'm going to stay away from.
 
D

dorayme

Gus Richter said:
Please actually try replacing display: block; with
vertical-align:bottom; in the example you provided in this thread and
then respond.
Click to expand...

Let's distinguish the request from the OP for stretch to fit from the
simpler one about the gap.


table {border-collapse: collapse; width: 400px;}
td {border: 1px solid;}
td.img {padding: 0;}
.img img {vertical-align:bottom;}

<table>
<tr>
<td>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Pellentesque augue.Suspendisse consectetuer velit nec neque. Duis
nec orci quis nulla egestas fermentum. Ut quis eros.</td>
<td class="img"><img src="pics/crimson.png" alt=""></td>
</tr>
</table>


does not get the image on the bottom in FF or Safari or Opera. Of
course, not surprising. But just hang on a moment.

Neither does:

table {border-collapse: collapse; width: 400px;}
td {border: 1px solid;}
td.img {padding: 0; vertical-align:bottom;}

<table>
<tr>
<td>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Pellentesque augue.Suspendisse consectetuer velit nec neque. Duis
nec orci quis nulla egestas fermentum. Ut quis eros.</td>
<td class="img"><img src="pics/crimson.png" alt=""></td>
</tr>
</table>

But it gets it close, in the vicinity.

However, the double whammy of:

table {border-collapse: collapse; width: 400px;}
td {border: 1px solid; .img img {vertical-align:bottom;}
td.img {padding: 0; vertical-align:bottom;}

<table>
<tr>
<td>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Pellentesque augue.Suspendisse consectetuer velit nec neque. Duis
nec orci quis nulla egestas fermentum. Ut quis eros.</td>
<td class="img"><img src="pics/crimson.png" alt=""></td>
</tr>
</table>

does do the trick of removing the gap completely!

It is for interesting reasons. The vertical-align on the inline image
gets it to its "normal" below baseline (which could be toward the top of
the cell, the middle or the bottom depending on what is set for td's
vertical-align), vertical-align on the relevant table cell gets the
relevant baseline of the image (think text) down to the bottom.

To see this, take a look at:

<http://dorayme.890m.com/alt/killy_gus3.html>

Gus, I hope you are not thinking I am disputing what you said flat out.
I was rushed earlier today. Now its evening but I am wanting to go and
see if any of those Polish volley ball or Georgian beach ball girls are
competing at the Olympics as they were last night, they delayed the
start of my watching not a bad movie about Franklin Roosevelt (called
Warm Springs. It got to the edge of maudlin at a few points, but you
know what the Americans are like when they get going on affairs to do
with the heart). Fancy a martian taking an interest in Polish volley
ball. <g>

And no time now to respond to an interesting looking post from Ben. You
have taken up all my time!
 
G

Gus Richter

dorayme said:
Let's distinguish the request from the OP for stretch to fit from the
simpler one about the gap.
Click to expand...

I don't understand how "stretch to fit" relates in this problem. Gap, yes.

<http://dorayme.890m.com/alt/killy_gus3.html>
Click to expand...

The OP only asked about an image within a cell. There was no mention of
any text associated, least of all its quantity. Your first example
killy.html used display:block; to remove the white space below the
image. On my screen, the text in the first cell is on one line (one line
of text). I simply mentioned that vertical-align:bottom; will also do
the job. You then talked much about descender and I wondered why since
it should be understood that both display:block; and
vertical-align:bottom; bring the image from its baseline down to the
bottom. (On reducing the window size, the text is expanded to several
lines and the image is centered and off the bottom of the cell -
applying vertical-align:bottom; to the cell resolves this).

You presented killy_gus3.html with three cells and plenty of text
spanning several lines. You've expanded the problem with the multiple
text lines in the first two cells and resolved it by applying
vertical-align:bottom; also to the image's cell.

So, I was talking about .img img "only" and you were talking about
td.img "as well" am I correct?

..img img takes vertical-align:bottom;

td.img may take either display:block; or vertical-align:bottom;
This is all that I was saying.
And no time now to respond to an interesting looking post from Ben. You
have taken up all my time!
Click to expand...

My sincerest apologies, madam.
 
D

dorayme

Let's distinguish the request from the OP for stretch to fit from the
simpler one about the gap.
Click to expand...

I don't understand how "stretch to fit" relates in this problem. Gap, yes.
[/QUOTE]

Since the thread veered into this other matter, I was just making sure
we were on the same wave length, that's all. I am saying what you are
saying, that the stretch to fit problem has nothing to do with this one,
so let's concentrate on this one. And just as a reminder to the possibly
three other people on this planet who might read this now or in the
future.
The OP only asked about an image within a cell. There was no mention of
any text associated, least of all its quantity.
Click to expand...

In general, in these matters about cells, what is in adjoining cells is
quite important because these other cells are a major determinate of the
size of the cell which we might be focussing on. But in this particular
case of the URL you quote I was exampling the application of
vertical-align to the image itself as distinguished from its application
to the cell itself. At least in its effect practically in the browsers I
have. In this latter capacity it acts on text too.

Perhaps I should have given further URLS to the code I typed up in the
post that demonstrates the difference. I was hoping you would not need
me to do that but I will if you are still not quite gathering my meaning.

Perhaps you missed the significance of my "does not get the image on the
bottom in FF or Safari or Opera." in my last post? Your suggestion to
remove display:block; earlier and replace with vertical:align; is
slightly ambiguous. But taken literally, it does not work in all good
modern browsers. Nor does it work when not taken literally - namely to
remove display: block; and put vertical:align; on the cell itself rather
the image element. Not on my tests.

But, all not being lost, putting your vertical-align on both elements
did the trick. At least it seemed to.

Is that not an interesting matter Gus. We should be cracking out the
champagne.

(I think display: block on the image is by far the simplest thing to do
to get rid of the cause of the gap in this matter of inline image. It
attacks the problem at the joint of its reality without entering the
kingdom of worms - to adapt (in my flowery way) - your expression. <g>)
 
D

dorayme

Ben C said:
The problem here is that a replaced element's intrinsic height is
considered too important.

For most things if you set top and bottom but not height you get
whatever height is needed to stretch between the positions you've given
for top and bottom.

But images refuse to stretch like that. You set top and bottom, and
bottom gets ignored and the image keeps its intrinsic height (or
some function of its aspect ratio and any width you set).

The only way to stretch an image is to set width and/or height. Nothing
else will do.

As you found height: 100% of a table row meaning the height the row got
because of the other cells in it is unspecified and unreliable. It works
in quirks mode in some browsers, but we don't want to get involved with
that.

But you have solved the other problem that Firefox doesn't allow
table-cells to be containing blocks for positioned descendents
(technically allowed by the spec some would argue although against the
spirit), by using a div outside the table as the container.

So you can do a hybrid approach.

Based on kill2_FF_only.html, put another div around the img:

<td class="img">
<div>
<img src="killy3_files/crimson.png" alt="" width="137">
</div>
</td>

Then style it like this:

.img div {

position: absolute;
top: 1px;
bottom: 1px;
}

(You had those styles on .img img)

.img img
{
height: 100%;
width: 100%;
}

We stretch the div into the space made by the row, and then fit the img
into the div with width and height of 100%. Technically the div is still
height: auto so some browsers could still ignore those percentages, but
most of them don't.
Click to expand...

I did played about with an internal cell div wrapper before, but now, I
have looked at your double whammy approach. (That's two double whammy
approaches to two different problems in the same thread!). Interesting.

But enlightenment has turned darker as I watch it under different
browsers and different conditions. A can of worms! I am sure all this is
of academic interest, I know I would not dare to employ such for a
paying client. There is always a simpler approach to life (hint to OP).

Where to begin?

But here is URL with one interpretation of your suggestion to double up
the divs:

http://dorayme.890m.com/alt/killy2_ben.html

Now this makes things work in Safari and Opera but all hell breaks loose
in FF so I call it:

<http://dorayme.890m.com/alt/killy2_except_in_FF.html>

(I have slightly altered the absolute coordinates to make the borders
aropund the cell that holds the img appear under this new suggestion).

Different browsers take different approaches to the real dimensions and
aspect - proportion of width to height - of images. plus there might be
other things going on for how FF is calculating width here.

Since we are fixing the td that holds the image to a width of 137px, we
might fix this problem in FF by adding an explicit width to the div that
immediately wraps the image.

<http://dorayme.890m.com/alt/killy2_not_too_bad.html>

Now *this* looks close to what might be wanted in Safari and Opera. The
only niggle (to be optimistic for a moment) is that the FF would prefer
a 2px coordinate for top and bottom so the border shines through.

I wonder if this is a demo of the difficulty of keeping all the browsers
happy while yet going for gold in pixel perfect layout? Could it become
an Olympic event, pixel perfect layouts. Teams have 40 mins to design
according to some set crieria for content and it must look *exactly* the
same for all browsers after IE 5. <g>
 
D

dorayme

I'm sorry but I have completely mucked up that last post in reply to
you. Please don't read it, I was working on the urls in the middle of it
and the names of the URLs got changed as I went and hell... The main
problem was I renamed killy2_ben.html as killy2_except_in_FF.html. But
never mind...

Lets go again with the essentials:

I played about with an internal cell div wrapper before, but now, I
have looked at your double whammy approach.

But enlightenment has turned darker as I watch it under different
browsers and different conditions. A can of worms!

Here is URL with one interpretation of your suggestion to double up
the divs. Now this makes things work in Safari and Opera but all hell
breaks loose in FF so I call it:

<http://dorayme.890m.com/alt/killy2_except_in_FF.html>

Different browsers take different approaches to the real dimensions and
aspect - proportion of width to height - of images. Plus there might be
other things going on for how FF is calculating width here. In this URL,
FF overflows the image wide and right outside the cell

Since we are fixing the td that holds the image to a width of 137px, we
might fix this problem in FF by adding an explicit width to the div that
immediately wraps the image. And this should not affect the other
browsers too much:

<http://dorayme.890m.com/alt/killy2_not_too_bad.html>

Now *this* looks close to what might be wanted in Safari and Opera.

(I am sorry about the muck up! I am only a partially spent force.)
 

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

Similar Threads

Image shifts to the right when export the page to pdf 4
Only one table shows up with the information 2
Background image not showing up on html page 3
validated html 5 table 19
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
Can't make table the size of the screen 12
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0

Members online

Total: 30 (members: 2, guests: 28)
Robots: 450

Forum statistics

Threads
473,769
Messages
2,569,579
Members
45,053
Latest member
BrodieSola

Latest Threads

Top