473,714 Members | 2,527 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Table Row Height Problems

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/hayterf...orderprob.html

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

Many thanks
Steve
Jul 20 '05 #1
6 45084

"stevehayte r" <st*********@nt lworld.com> wrote in message
news:37******** *************** ***@posting.goo gle.com...
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/hayterf...orderprob.html

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

Many thanks
Steve


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.
Jul 20 '05 #2
st*********@ntl world.com (stevehayter) wrote in
news:37******** *************** ***@posting.goo gle.com:
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/hayterf...orderprob.html

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


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_bott omright.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_bott omright.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#at tributes>,
read more there.]
Jul 20 '05 #3

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_bott omright.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#at tributes>,
read more there.]


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
Jul 20 '05 #4
In post <vi************ *************** *****@4ax.com>
Paul Taylor said...
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,
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.


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.

--
brucie a. blackford. 29/June/2003 06:52:22 pm kilo.
http://loser.brucies.com/
Jul 20 '05 #5
On Mon, 30 Jun 2003 20:05:47 +1000, brucie <br****@loser.b rucies.com>
wrote:
In post <h9************ *************** *****@4ax.com>
Stephen Poley said...
You should also use alt="" for these corner images, to make sure that
screenreaders pass over them.that doesn't ensure anything. a screen reader may say "image without
alt text image name dot PNG". the same with alt=" "
Well it *might*,


there is no might. ibm home page reader is one audio browser that
*does*
but web-authors surely need not be worried about browsers that are so broken
as that -


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


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


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.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/
Jul 20 '05 #6
On Mon, Jun 30, Stephen Poley inscribed on the eternal scroll:
why is a browser broken if it has the option to identify images
without alt text and notify the user?
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."


Yes, they must at least do that.
So if alt=" " is specified, then the correct behaviour is for the
browser to render a space.
It's not in dispute that this is a good default choice for normal
circumstances. Jim will be along shortly to present some special
requirements...
if the user wants that why cant they have it?
I'd say that the WAI guidelines for client agents indeed encourage
client agents to support a rich repertoire of configuration options.
Start at http://www.w3.org/TR/UAAG10/guidelin...content-access
and read on.
If the users really want that, of course they can have it.
I must say I found it rather annoying that IBM HPR (at least, the
version I tried) didn't seem to have the option: if it encountered
alt="", then it insisted on announcing the relative URL
(foobar-dot-PNG etc.) of the image.
My statement was that web-authors should not have to worry about
that situation, and that statement still stands.


Agreed. Web authors ought to be able to follow _their_ part of the
guidelines, and rely on users selecting user agents which sufficiently
follow _their_ part of the guidelines to meet with their own
satisfaction.

Unfortuantely, reality is messier than that...
this is just another example of the author thinking they know better
than the visitor what they want or should have.


I couldn't exactly agree with that. The author knows whether they
intend an image to be a substantive part of the content, or a mere
decoration. True, they can't know what their users want, but they
nevertheless need a markup convention which describes their _content_
in order to give the client agent a chance of doing something
sensible with it.

And up till now, alt="" has been accepted as a convention for marking
up their content (i.e as being insignificant to text mode or
non-visual browsing). If you're now saying that images that are only
for visual presentational purposes ought to be supplied via CSS since
they aren't part of the substantive content, then you'd have a fair
debating point.

best
Jul 20 '05 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

14
2146
by: Carl Gilbert | last post by:
Hi I am currently writing a site that utilises tables. I have one page that links to a second page. The only problem is that when I link to the second page, the table loads up with a different height than was set in the code. However, when I use the navigation buttons in IE to go back and then forward again to the second page, the table is displayed as expected.
61
24484
by: Toby Austin | last post by:
I'm trying to replace <table>s with <div>s as much as possible. However, I can't figure out how to do the following… <table> <tr> <td valign="top" width="100%">some data that will 'stretch'</td> <td valign="top" width="300">some data that won't 'stetch'</td> </tr> </table>
19
13379
by: Logix | last post by:
Hello! I'm trying to make a sort of online page building system. In order to do this, I represent my page using a HTML table. One of the most basic templates would be a page divided in six equally proportioned rectangles: <table border="1" cellspacing="0" cellpadding="0" width="200" height="200"> <tr>
10
26874
by: john T | last post by:
Is there anyway to vertically center a html table using css in such a way it does not alter the html table. When I tryied it just screws up.
3
5282
by: T | last post by:
I am attempting to create a menu using <div> and <span> tags within a table cell. When the page loads, some of the classes don't seem to be applied. If I hover over the menu everything is fine from that point on. If I remove the table everything renders correctly, and I have no problems. Unfortunately, I need to nest this menu within a table. I am currently having this problem in IE 6. Thanks in advance for the help! <html>...
4
16875
by: Bernd Goldschmidt | last post by:
Hi. I've got a somewhat wired problems with an extra space between table rows in Mozilla and Opera (IE works fine). With the code below, cells within a row align seamlessly, but there is a space of about 5px between table rows. Any Idea?
2
15905
by: Marek Mänd | last post by:
I have problems with table row height by Internet Explorer6 in xhtml1 css1compat mode document. The table has fixed height and on one TFOOT row the height is set to 'auto' to make it have flexible height, which will shrink if there are more rows in TBODY and which will grow if there are fewer rows in TBODY. However IE6 has huge troubles with this simple concept and doesnt seem want to make the auto-heighted row to behave as auto...
1
12275
by: Jeronimo Bertran | last post by:
I am creating a table and inserting an iframe inside a cell for which the width depends on the screen size. The table has 7 columns and the fourth column is resized depeding on the screen size... here is my complete definition. <table style="HEIGHT: 472px" cellSpacing="0" cellPadding="0" width="100%" border="0"> <tr height="1">
0
2154
by: Markus Olderdissen | last post by:
i want to create my page with 100% height. <table height="100%"works but is not correct by default. i saw various information how to do it with stylesheet. i really have problems to create my page. i want to have header on top and footer on bottom. content should be on top of the middle part. i always got scrollbars, even if my page isn't too large. perhaps, someone can show me to do it right. the following code describes my wish. ...
3
4832
by: DigitalWallfare | last post by:
Hi all, This is my first post here, but i've lurked for a while. I'm working on a website but have come across a major stumbling block in the code: I've managed to structure the search query but have 2 problems: I dont know how to code the results into the table, and make the table repeat itself 5 times per page (and recognise it needs a new page)
0
8704
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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9307
Oralloy
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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9170
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
9071
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 Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
7946
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
5943
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
1
3155
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2514
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2105
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.