By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,384 Members | 1,886 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,384 IT Pros & Developers. It's quick & easy.

Setting <img> height to match <td> height

P: n/a
I've been busting my head trying to figure this out for quite some time.

With IE6 and NS7, no problems. I can simply code the HTML <img
height="100%"> and be done with it.

But NS4 and NS6 (and probably a couple of other IE and NS versions I can't
get to right now) don't want to play nice unless I hard code the image
height.

(Yes, I'm one of those who insists on still coding for NS4.)

The <img> is a decorative border, part of a 3x3 table. The outer cells are
the graphics (GIF in this case) while the center cell is the text. The
amount of text is variable - I'm using some client-side JavaScript to load
up lines of HTML based on today's date versus a calendar of events.

I can't do any server-side stuff - the ISP doesn't allow it on personal web
sites.

Is there a way in client-side JavaScript to determine the height of a <td>
after loading it up with items and then set the two <img>'s on either end of
the row (and optionally the 2 <td>'s) to match the displayed height thereby
generating a solid graphical border?
Jul 20 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a
VK
> But NS4 and NS6 (and probably a couple of other IE and NS versions I
can't
get to right now) don't want to play nice unless I hard code the image
height.


NN4 doesn't allow dynamic size change and it never did. Nothing you can
do about it.

NN5 (aka NN6) has been released in many builds in a unacceptable rush
just to follow MSIE. So the first releases are total crap (not
alpha/beta, but closer to kappa-stage of development), the later ones
are more or less OK and should act mostly like NN7.

If you are really concerned about old NN's, you'll have to be creative.
One solution would be to use your image as cell's background (still a
lot of tech problems, but realizable). Look in archives for
alternatives.

P.S. By the way, how do you suppose to update text in the central cell
for NN4? It doesn't have innerText/HTML methods, nothing but plain
document.write().

Jul 20 '05 #2

P: n/a
MyndPhlyp wrote:
I've been busting my head trying to figure this out for quite some time.

With IE6 and NS7, no problems. I can simply code the HTML <img
height="100%"> and be done with it.

But NS4 and NS6 (and probably a couple of other IE and NS versions I can't
get to right now) don't want to play nice unless I hard code the image
height.

(Yes, I'm one of those who insists on still coding for NS4.)

The <img> is a decorative border, part of a 3x3 table. The outer cells are
the graphics (GIF in this case) while the center cell is the text. The
amount of text is variable - I'm using some client-side JavaScript to load
up lines of HTML based on today's date versus a calendar of events.

I can't do any server-side stuff - the ISP doesn't allow it on personal web
sites.

Is there a way in client-side JavaScript to determine the height of a <td>
after loading it up with items and then set the two <img>'s on either end of
the row (and optionally the 2 <td>'s) to match the displayed height thereby
generating a solid graphical border?


The height of an element is given by its offsetHeight attribute.

This will give you a lot of good info:
http://www.w3.org/TR/2003/REC-DOM-Le...t-binding.html

Jul 20 '05 #3

P: n/a

"VK" <sc**********@yahoo.com> wrote in message
news:3f***********************@news.freenet.de...

If you are really concerned about old NN's, you'll have to be creative.
One solution would be to use your image as cell's background (still a
lot of tech problems, but realizable). Look in archives for
alternatives.

P.S. By the way, how do you suppose to update text in the central cell
for NN4? It doesn't have innerText/HTML methods, nothing but plain
document.write().


[Be not concerned about that thumping sound you hear. It is only my head
pounding the desk repeatedly.]

I keep forgetting about using an image as a cell background. I'll give it a
try. I seem to recall, though, there are a few quirks. With luck, I won't
run into one of them.

document.write() is exactly what I use. Between the </HEAD> and the <BODY>
is the real guts of the scripting - loading up an array of calendar events
and checking them one by one looking for rows that fit the date range
criteria. If it meets the criteria, a document.write() kicks in to generate
the <p>text</p>. Since the whole routine is called from the table cell
inline with the HTML, it gets executed before the </td>. It works great (at
least on the Windows platforms) with NN4 and above, and IE5 and above.
Jul 20 '05 #4

P: n/a

"bagbourne" <no***@noway.com> wrote in message
news:bs**********@hercules.btinternet.com...

The height of an element is given by its offsetHeight attribute.

This will give you a lot of good info:
http://www.w3.org/TR/2003/REC-DOM-Le...t-binding.html


Hmm ... some pretty light reading. <g> I don't recall NN4 supporting DOM,
but I'll plow through the link to see if I can generate a clue or two.
Thanx.
Jul 20 '05 #5

P: n/a

"VK" <sc**********@yahoo.com> wrote in message
news:3f***********************@news.freenet.de...

If you are really concerned about old NN's, you'll have to be creative.
One solution would be to use your image as cell's background (still a
lot of tech problems, but realizable). Look in archives for
alternatives.


Found the quirk(s), and now I'm rethinking the sanity of the idea of using
graphics as a foreground cell image.

Netscape 4 doesn't like to print any graphic that has been resized, whether
larger or smaller, whether one dimension or both, and doesn't print graphics
that are background. No big surprise with respect to the background graphic.

Netscape 6 also doesn't print graphics that are backgrounds. No big surprise
there either.

Netscape 7, where I sized the graphic with <img height="100%"> did just
fine, but doesn't print graphics that are backgrounds.

And then there's that wonderful product from Micro$oft - IE 6 - that doesn't
render text to paper the same as to screen leaving gaps in my vertical lines
and also doesn't print graphics that are backgrounds.

So, what have I learned today?

Be printer friendly and put the graphics in as cell backgrounds. (Or, be
really nice to the dial-up users and eliminate the graphics altogether, but
the audience would be yawning far too much to read the text.)

Sometimes, no matter how hard you try, technology just doesn't let you do
what you really want to do.
Jul 20 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.