Setting <img> height to match <td> height

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?

Jul 20 '05 #1

Subscribe Post Reply

2816

> 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

bagbourne

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

MyndPhlyp

"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

MyndPhlyp

"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

MyndPhlyp

"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

by: Gregory | last post by:

Hello, I'm trying to do the above in order to process an image and return the result to an html image control. It fails and my key suspects are either the variable that I'm passing in -...

PHP

Strange <img> tag behaviour when encapsulated in IF

by: Gianpiero Colagiacomo | last post by:

VBScript: Can anyone help me figure out why the image within this IF statement shows as a place holder rather than the image itself when the statement is returning true? If I remove the IF...

ASP / Active Server Pages

GetRows Random <td></td> Output

by: Jim | last post by:

Hey all, I am trying to generate a random image output that will appear like this - http://wd-santabarbara.com/atex/ . I am not sure of where to start on this or even if I am using the right...

ASP / Active Server Pages

can a <TD> tag have a percentage width?

by: Andre | last post by:

My website at http://www.oregonsae.org/2004mbw/ is a simple three column table. There is only one table, and one row. The menu on the left side is one <TD>, the content in the center is another...

HTML / CSS

<TD>, CSS and Firefox

by: matt cook | last post by:

I have having two problems with the <TD>, CSS, Firefox combination. I would greatly appreciate any information on fixing them. Firstly, none of the padding or margin values I apply to a <TD> have...

HTML / CSS

put a block element into a line, makes it behave like <img>?

by: Zhang Weiwu | last post by:

Hello. This is problem puzzled me a long time. I wish to organize some block elements and let them flow one after each other like text. Think about a album, I wish the album have 12 thumbnails,...

HTML / CSS

weird white space being introduced into <td>

by: neverstill | last post by:

hi- I have a table on a page there is 1 row and 2 cells cell 1 has a user control that is basically just a DataList nested in a table o fit's own. then, below that user control I have some <p>...

ASP.NET

<a... <img..>> in a <td> from code-behind... this can't be that hard

by: Henry Johnson | last post by:

Okay - I'm spinning my wheels on this one... can someone help me figure out how to programmatically populate a table cell as follows (from C# code-behind)? I've tried using a Literal control in the...

ASP.NET

Centering an two images concentrically in a <TD> or a <DIV>?

by: harryusa | last post by:

I am trying to center 2 images concentrically which are z-indexed to lay on top of each other making an image with a border from another image that has a transparent center. I need the images to be...

HTML / CSS

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Setting <img> height to match <td> height

Similar topics