Loading ...
Sorry, an error occurred while loading the content.

table trick / ROWSPAN dilemma

Expand Messages
  • Patrick Smith
    Hey gang, Got an HTML difficulty... I m using this cool table trick ( http://diveintomark.org/public/tabletrick.html ) so that my content appears first to
    Message 1 of 6 , Jul 5, 2002
    View Source
    • 0 Attachment
      Hey gang,

      Got an HTML difficulty...

      I'm using this cool table trick (
      http://diveintomark.org/public/tabletrick.html ) so that my content appears
      first to search engines and text browsers. See (1) at the end for sample
      code if you're interested.

      Visually, the trick looks like this (beware ASCII art!):

      |-----------|--------------------------------------|
      | TD #1 | TD #2 ROWSPAN="2" |
      |-----------| |
      | TD #3 | Content Cell |
      | Nav Cell | |
      | | |
      | | |
      | | |
      | | |
      | | |

      You can see that that it relies on ROWSPAN, which is what's causing my
      problems.

      The problem is that the longer the text in the main content cell (TD #2
      above), the taller the TD (TD #1) above my Nav Cell (TD #3).

      This is _BAD_ because it causes my nav to move up and down from one page to
      the next: not the desired behavior :-)

      Any ideas on how I could fix this?

      I'm sorry that I can't point anyone to any pages to look at, as all of this
      is on my dev box right now.

      Thanks for any ideas!

      cheers,
      Patrick


      (1) from the site:
      ----------------------------------------------------------------
      Here's the basic concept. Instead of the obvious table layout:

      <table>
      <tr>
      <td valign="top" align="left" width="25%">
      ... navigation bar ...
      </td>
      <td valign="top" align="left">
      ... main content ...
      </td>
      </tr>
      </table>

      Do this instead:

      <table>
      <tr>
      <!-- spacer GIF in upper-left cell -->
      <td><img src="/images/1.gif" width="1" height="1" alt=""></td>
      <!-- main content cell first, with rowspan=2 -->
      <td valign="top" align="left" rowspan="2">
      ... main content ...
      </td>
      </tr>
      <tr>
      <td valign="top" align="left" width="25%">
      ... navigation bar ...
      </td>
      </tr>
      </table>
      ----------------------------------------------------------------
    • Patrick Smith
      Just wanted to clarify: - All the TD s are VALIGN= TOP . - I see the same behavior no matter what s in TD #1: whether I m using a spacer gif or a non-breaking
      Message 2 of 6 , Jul 5, 2002
      View Source
      • 0 Attachment
        Just wanted to clarify:
        - All the TD's are VALIGN="TOP".
        - I see the same behavior no matter what's in TD #1: whether I'm using a
        spacer gif or a non-breaking space or nothing at all...

        P.

        I wrote:
        > Visually, the trick looks like this (beware ASCII art!):
        >
        > |-----------|--------------------------------------|
        > | TD #1 | TD #2 ROWSPAN="2" |
        > |-----------| |
        > | TD #3 | Content Cell |
        > | Nav Cell | |
        > | | |
        > | | |
        > | | |
        > | | |
        > | | |
        >
        > You can see that that it relies on ROWSPAN, which is what's causing my
        > problems.
        >
        > The problem is that the longer the text in the main content cell (TD #2
        > above), the taller the TD (TD #1) above my Nav Cell (TD #3).
      • Joe Crawford
        You can try specifying a height of TD #1 (height= 1 ) and no whitespace in it , and a blank gif of absolute height. Many browsers
        Message 3 of 6 , Jul 5, 2002
        View Source
        • 0 Attachment
          You can try specifying a height of TD #1 (height="1") and no whitespace
          in it <td height="1"><img...></td>, and a blank gif of absolute height.

          Many browsers will respect that.

          Netscape and certain IEs will ALWAYS have trouble as you describe. (How
          I look at it) they are trying to accomodate what the full height of the
          content (TD #2) will be, and they are guessing wrong, and in so doing
          stretching out that TD #1. Thus, the problem.

          I've tried MANY things in the past to get around this - like specifying
          a height in the TD #1 -- by putting a VERY VERY tall spacer in TD#3 to
          "grommet" the height to a specific value, so the content is NEVER bigger
          than you hope. But these have side-effects as well.

          Helpful?

          Joe
          --
          Joe Crawford: Senior Web Developer / Designer
          AVENCOM: San Diego, California USA
          e: mailto:jcrawford@...
          vox: 619.230.0241
          www: http://www.avencom.com/

          Patrick Smith wrote:
          > Just wanted to clarify:
          > - All the TD's are VALIGN="TOP".
          > - I see the same behavior no matter what's in TD #1: whether I'm using a
          > spacer gif or a non-breaking space or nothing at all...
          >
          > P.
          >
          > I wrote:
          >
          >>Visually, the trick looks like this (beware ASCII art!):
          >>
          >> |-----------|--------------------------------------|
          >> | TD #1 | TD #2 ROWSPAN="2" |
          >> |-----------| |
          >> | TD #3 | Content Cell |
          >> | Nav Cell | |
          >> | | |
          >> | | |
          >> | | |
          >> | | |
          >> | | |
          >>
          >>You can see that that it relies on ROWSPAN, which is what's causing my
          >>problems.
          >>
          >>The problem is that the longer the text in the main content cell (TD #2
          >>above), the taller the TD (TD #1) above my Nav Cell (TD #3).
          >
        • Nestor
          Can you find out how much Content you will have and then automtically set the COLSPAN ofr both TD1 and TD2? Nestor :-) ... From: Patrick Smith
          Message 4 of 6 , Jul 5, 2002
          View Source
          • 0 Attachment
            Can you find out how much Content you will have and then automtically set
            the COLSPAN ofr both TD1 and TD2?

            Nestor :-)
            -----Original Message-----
            From: Patrick Smith [mailto:joehumanist@...]

            Hey gang,

            Got an HTML difficulty...

            I'm using this cool table trick (
            http://diveintomark.org/public/tabletrick.html ) so that my content appears
            first to search engines and text browsers. See (1) at the end for sample
            code if you're interested.

            Visually, the trick looks like this (beware ASCII art!):

            |-----------|--------------------------------------|
            | TD #1 | TD #2 ROWSPAN="2" |
            |-----------| |
            | TD #3 | Content Cell |
            | Nav Cell | |
            | | |
            | | |
            | | |
            | | |
            | | |

            You can see that that it relies on ROWSPAN, which is what's causing my
            problems.

            The problem is that the longer the text in the main content cell (TD #2
            above), the taller the TD (TD #1) above my Nav Cell (TD #3).

            This is _BAD_ because it causes my nav to move up and down from one page to
            the next: not the desired behavior :-)

            Any ideas on how I could fix this?

            I'm sorry that I can't point anyone to any pages to look at, as all of this
            is on my dev box right now.

            Thanks for any ideas!

            cheers,
            Patrick


            (1) from the site:
            ----------------------------------------------------------------




            ---
            Outgoing mail is certified Virus Free.
            Checked by AVG anti-virus system (http://www.grisoft.com).
            Version: 6.0.373 / Virus Database: 208 - Release Date: 7/1/2002
          • Patrick Smith
            ... ... Very, thanks. The combo of the absolute height in TD #1 and a shim in TD #3 that s HEIGHT is just larger than the contents in TD #2, seems to
            Message 5 of 6 , Jul 5, 2002
            View Source
            • 0 Attachment
              Joe Crawford wrote:
              >
              > You can try specifying a height of TD #1 (height="1") and no whitespace
              > in it <td height="1"><img...></td>, and a blank gif of absolute height.
              >
              <snip>
              >
              > I've tried MANY things in the past to get around this - like specifying
              > a height in the TD #1 -- by putting a VERY VERY tall spacer in TD#3 to
              > "grommet" the height to a specific value, so the content is NEVER bigger
              > than you hope. But these have side-effects as well.
              >
              > Helpful?

              Very, thanks.

              The combo of the absolute height in TD #1 and a shim in TD #3 that's HEIGHT
              is just larger than the contents in TD #2, seems to work in most
              circumstances.

              "Most" being the operative word, of course.

              But thanks Joe, for confirming the problem and suggesting some workable
              "better-is-the-enemy-of-good-enough" solutions.

              cheers,
              P.
            • Patrick Smith
              ... Nestor, Did you mean ROWSPAN? COLSPAN s not an issue here... But you were right, the solution (see my other message in response to Joe s suggestion) was
              Message 6 of 6 , Jul 5, 2002
              View Source
              • 0 Attachment
                Nestor wrote:
                >
                > Can you find out how much Content you will have and then automtically set
                > the COLSPAN ofr both TD1 and TD2?

                Nestor,

                Did you mean ROWSPAN? COLSPAN's not an issue here...

                But you were right, the solution (see my other message in response to Joe's
                suggestion) was dependent on the amount of content in TD #2.

                cheers,
                Patrick
              Your message has been successfully submitted and would be delivered to recipients shortly.