Table Row Height Problems

Discussion in 'HTML' started by stevehayter, Jun 27, 2003.

  1. stevehayter

    stevehayter Guest

    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, Jun 27, 2003
    #1
    1. Advertising

  2. stevehayter

    JabbatheHut Guest

    "stevehayter" <> wrote in message
    news:...
    > 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


    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.
    JabbatheHut, Jun 27, 2003
    #2
    1. Advertising

  3. stevehayter

    Sam Hughes Guest

    (stevehayter) wrote in
    news::

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


    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.]
    Sam Hughes, Jun 29, 2003
    #3
  4. stevehayter

    Paul Taylor Guest


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


    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
    Paul Taylor, Jun 29, 2003
    #4
  5. stevehayter

    brucie Guest

    In post <>
    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/
    brucie, Jun 29, 2003
    #5
  6. On Mon, 30 Jun 2003 20:05:47 +1000, brucie <>
    wrote:

    >In post <>
    >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/
    Stephen Poley, Jun 30, 2003
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Thomas A. Rowe

    Re: Table row height problems

    Thomas A. Rowe, Jun 23, 2003, in forum: HTML
    Replies:
    7
    Views:
    1,277
    Mark Parnell
    Jun 24, 2003
  2. W@cek
    Replies:
    0
    Views:
    1,623
    W@cek
    Mar 31, 2005
  3. phl
    Replies:
    1
    Views:
    4,343
    Martin Jay
    Jun 8, 2006
  4. D
    Replies:
    0
    Views:
    203
  5. john T
    Replies:
    7
    Views:
    224
    Richard Formby
    Feb 19, 2004
Loading...

Share This Page