Setting <img> height to match <td> height

M

MyndPhlyp

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?
 
V

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.
Click to expand...

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().
 
B

bagbourne

MyndPhlyp said:
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?
Click to expand...

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-Level-2-HTML-20030109/ecma-script-binding.html
 
M

MyndPhlyp

VK said:
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().
Click to expand...

[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.
 
M

MyndPhlyp

VK said:
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.
Click to expand...

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.
 

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

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
Setting height = 100% for iframes 0
<img> width height 10
<td> height problem 4
Help with Visual Lightbox: Scripts 2
Div Height = Image height. help 1
How to get actual <td> height after displaying (rendering) 8
Unsetting an IMG height/width 5

Members online

No members online now.
Total: 29 (members: 1, guests: 28)
Robots: 230

Forum statistics

Threads
473,774
Messages
2,569,598
Members
45,160
Latest member
CollinStri

Latest Threads

Top