Table Row Height Problems

  • Thread starter Thread starter stevehayter
  • Start date Start date
S

stevehayter

Wonder if anyone can help me solve this problem!

I have a 3x3 table which i'm using to create a table with a rounded
edge using images in the top left, top right, bottom left, and bottom
right cells and lines in the top/left/right and bottom cells (sounds
odd, you'll see what i mean when you see the site). It works fine,
except the top and bottom rows are a lot bigger than i've specified
when they should be flush with the centre cell as the left and right
columns are. I know it's nothing to do with the graphic being too
large because that is the size i have set the height to. Can anyone
shed any light on this!?

The site can be viewed at
http://homepage.ntlworld.com/hayterfamily/borderprob.html

I have left borders on so you can see the cell layout - turning them
off makes no difference.

Many thanks
Steve
 
stevehayter said:
Wonder if anyone can help me solve this problem!

I have a 3x3 table which i'm using to create a table with a rounded
edge using images in the top left, top right, bottom left, and bottom
right cells and lines in the top/left/right and bottom cells (sounds
odd, you'll see what i mean when you see the site). It works fine,
except the top and bottom rows are a lot bigger than i've specified
when they should be flush with the centre cell as the left and right
columns are. I know it's nothing to do with the graphic being too
large because that is the size i have set the height to. Can anyone
shed any light on this!?

The site can be viewed at
http://homepage.ntlworld.com/hayterfamily/borderprob.html

I have left borders on so you can see the cell layout - turning them
off makes no difference.

Many thanks
Steve
Click to expand...

Well, not easy to tell for sure, but here's what I would do:

- remove all height specifications from cells
- replace with pixel specifications for height

That may reveal your problem.

Next:

- rebuild the table, and in any case you have an image sized with percentage
(not always a good idea) replace it with a new table inside the table cell
with the image as a tiled background and the table itself set to 100% to
fill the space.

Failing that, I would get rid of the stripe in the image and use cell bg
colors for all be the corners.

Some things just do not plain work in HTML, you might be trying to do one of
them.
 
(e-mail address removed) (stevehayter) wrote in
Wonder if anyone can help me solve this problem!

I have a 3x3 table which i'm using to create a table with a rounded
edge using images in the top left, top right, bottom left, and bottom
right cells and lines in the top/left/right and bottom cells (sounds
odd, you'll see what i mean when you see the site). It works fine,
except the top and bottom rows are a lot bigger than i've specified
when they should be flush with the centre cell as the left and right
columns are. I know it's nothing to do with the graphic being too
large because that is the size i have set the height to. Can anyone
shed any light on this!?

The site can be viewed at
http://homepage.ntlworld.com/hayterfamily/borderprob.html

I have left borders on so you can see the cell layout - turning them
off makes no difference.
Click to expand...

When trying to perfectly fit images into table cells, you need to leave
no space between the <img> tag and the <td> tags. Browsers think that
you want a space in there.

For example, one of your table cells, in your source code, used this:

<td align=right valign=bottom width=6 height=5>
<img src=./images/corner_red_bottomright.gif>
</td>

Instead, it should use this, with spaces between the tags removed:

<td align=right valign=bottom width=6 height=5><img
src="./images/corner_red_bottomright.gif"></td>

Note that I quoted the path to the file name. This is because the
attribute value included a slash. As the HTML specification says:

"In certain cases, authors may specify the value of an attribute
without any quotation marks. The attribute value may only contain
letters (a-z and A-Z), digits (0-9), hyphens (ASCII decimal 45),
periods (ASCII decimal 46), underscores (ASCII decimal 95), and
colons (ASCII decimal 58). We recommend using quotation marks even
when it is possible to eliminate them."

[from <http://www.w3.org/TR/html4/intro/sgmltut.html#attributes>,
read more there.]
 
Instead, it should use this, with spaces between the tags removed:

<td align=right valign=bottom width=6 height=5><img
src="./images/corner_red_bottomright.gif"></td>

Note that I quoted the path to the file name. This is because the
attribute value included a slash. As the HTML specification says:

"In certain cases, authors may specify the value of an attribute
without any quotation marks. The attribute value may only contain
letters (a-z and A-Z), digits (0-9), hyphens (ASCII decimal 45),
periods (ASCII decimal 46), underscores (ASCII decimal 95), and
colons (ASCII decimal 58). We recommend using quotation marks even
when it is possible to eliminate them."

[from <http://www.w3.org/TR/html4/intro/sgmltut.html#attributes>,
read more there.]
Click to expand...

If you read more about attributes, you will find that, although height
is a valid attribute for an image, it is NOT a valid attribute for the
td tag, so you shouldn't use it.

You should also use alt="" for these corner images, to make sure that
screenreaders pass over them.

Paul Taylor
 
If you read more about attributes, you will find that, although height
is a valid attribute for an image, it is NOT a valid attribute for the
td tag,
Click to expand...

yes it is although it depends on the DTD
http://www.w3.org/TR/html401/struct/tables.html#edef-TD
You should also use alt="" for these corner images, to make sure that
screenreaders pass over them.
Click to expand...

that doesn't ensure anything. a screen reader may say "image without
alt text image name dot PNG". the same with alt=" "

if you want an image ignored don't put it on the page, stick it in as
a background on something.
 
REPOST - due to server problems

What you are trying to do is possible, but not well supported by all browsers, especially the 100% height for tables or cells
(and your images are not correct so you need to correct them)

IE & NN level 4+ browsers support table cell background images, which is probably the better way to do it, but NN4x will leave white
space for the scroll bar (even if you don't need one), and NN6+ will not expand the table at all

For a Sample of how to redo your page from
http://homepage.ntlworld.com/hayterfamily/borderprob.html
See
http://www.sbrenjoy.bizland.com/test/borderprob.htm
(save a copy from there to get corrected images)

The key is to remove all whitespace from the <td>..</td> html, set all table, cell, and image attributes, and use transparent spacer
cells (larger than the border cell sizes) with cell background images for the actual borders

PS

Please do not Cross Post - especially to Unrelated newsgroups
--
SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
"Warning - Using the F1 Key will not break anything!" (-;

To find the best Newsgroup for FrontPage support see:
http://www.net-sites.com/sitebuilder/newsgroups.asp
___________________________________________



| Wonder if anyone can help me solve this problem!
|
| I have a 3x3 table which i'm using to create a table with a rounded
| edge using images in the top left, top right, bottom left, and bottom
| right cells and lines in the top/left/right and bottom cells (sounds
| odd, you'll see what i mean when you see the site). It works fine,
| except the top and bottom rows are a lot bigger than i've specified
| when they should be flush with the centre cell as the left and right
| columns are. I know it's nothing to do with the graphic being too
| large because that is the size i have set the height to. Can anyone
| shed any light on this!?
|
| The site can be viewed at
| http://homepage.ntlworld.com/hayterfamily/borderprob.html
|
| I have left borders on so you can see the cell layout - turning them
| off makes no difference.
|
| Many thanks
| Steve
 
there is no might. ibm home page reader is one audio browser that
*does*


why is a browser broken if it has the option to identify images
without alt text and notify the user?
Click to expand...

The HTML spec says: "User agents must render alternate text when they
cannot support images, they cannot support a certain image type or when
they are configured not to display images." So if alt=" " is specified,
then the correct behaviour is for the browser to render a space. (If alt
is erroneously omitted, then the behaviour you mention is fairly common
and quite reasonable.)
if the user wants that why cant
they have it?
Click to expand...

If the users really want that, of course they can have it. My statement
was that web-authors should not have to worry about that situation, and
that statement still stands. (On reflection, perhaps I should withdraw
the word "broken" and substitute "non-standard").
this is just another example of the author thinking they know better
than the visitor what they want or should have.
Click to expand...

What point do you actually want to make? You originally said "if you
want an image ignored don't put it on the page, stick it in as a
background on something" - but now you seem to be saying that an author
shouldn't want to do anything of the sort.

Normally speaking, if an author considers an image decorative, he
specifies alt="" or alt=" ", and expects text browsers / screen readers
to render an empty string or space respectively. If however the reader's
preferred browser behaviour is for it to start playing Chopin's
Fantaisie-Impromptu every time it encounters an image with alt="", that
doesn't come under the heading of things an author should worry about.
 
Back
Top