473,381 Members | 1,445 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,381 software developers and data experts.

Setting <img> height to match <td> height

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
5 2814
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
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

"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

"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

"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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

14
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 -...
10
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...
1
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...
2
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...
6
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...
7
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,...
1
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>...
3
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...
4
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...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
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
1
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...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.