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

CSS QUERIE

Expand Messages
  • ARTIS
    Has anyone got some suggestions regarding the following style types for CSS. They look just how I want them BUT, much of my work is within table cells and if I
    Message 1 of 5 , Feb 1, 2002
    • 0 Attachment
      Has anyone got some suggestions regarding the following style types for
      CSS. They look just how I want them BUT, much of my work is within table
      cells and if I use
      "td class=head2" I have the space below that I haven't been able to
      eliminate. If I use the body head (eg, body class="head2") with a
      closing body tag within TD tags, it works fine, BUT html tidy wants to
      eliminate it. Is there a problem with that?
      -----------------------------
      body {font-family: verdana, arial, san-serif; font-size: 75%;}
      td {font-family: verdana, arial, san-serif; font-size: 75%;}

      body.head1 {font-family: arial, garamond, arial, san-serif; font-size:
      150%;}
      body.head2 {font-family: garamond, arial, san-serif; font-size: 100%;}
      td.head1 { font-family: garamond, arial, san-serif; font-size: 150%;}
      td.head2 { font-family: garamond, arial, san-serif; font-size: 100%;}
      ---------------------------------
      ...any suggestions greatfully received.
      Niam



      [Non-text portions of this message have been removed]
    • Grant
      ... An html document can only contain one body element. A table can contain one or more tbody
      Message 2 of 5 , Feb 2, 2002
      • 0 Attachment
        > Has anyone got some suggestions regarding the following style types for
        > CSS. They look just how I want them BUT, much of my work is within table
        > cells and if I use
        > "td class=head2" I have the space below that I haven't been able to
        > eliminate. If I use the body head (eg, body class="head2") with a
        > closing body tag within TD tags, it works fine, BUT html tidy wants to
        > eliminate it. Is there a problem with that?

        An html document can only contain one body element.
        <html>
        <head>
        <title></title>
        </head>
        <body>

        </body>
        </html>

        A table can contain one or more tbody elements which can be given separate
        classes.

        <table>
        <tbody>
        <tr>
        <td>
        </td>
        <td>
        </td>
        </tr>
        <tr>
        <td>
        </td>
        <td>
        </td>
        </tr>
        </tbody>
        <tbody>
        <tr>
        <td>
        </td>
        <td>
        </td>
        </tr>
        <tr>
        <td>
        </td>
        <td>
        </td>
        </tr>
        </tbody>
        </table>
      • ARTIS
        Thank you Grant, if the tbody is the way to go I m onto it!! And thank you too John - more insites... ... [Non-text portions of this message have been
        Message 3 of 5 , Feb 2, 2002
        • 0 Attachment
          Thank you Grant, if the tbody is the way to go I'm onto it!! And thank you too
          John - more insites...


          >


          [Non-text portions of this message have been removed]
        • john041650
          Hi Artis, I used to use class tags in my individual TD elements, but changed to using DIVs instead to eliminate the clutter of excess code. For example, my
          Message 4 of 5 , Feb 2, 2002
          • 0 Attachment
            Hi Artis,

            I used to use class tags in my individual TD elements, but changed
            to using DIVs instead to eliminate the clutter of excess code. For
            example, my tables used to look like this:

            <table>
            <tr>
            <td class="head2">First Row, First Column</td>
            <td class="head2">First Row, Second Column</td>
            </tr>
            <tr>
            <td class="head2">Second Row, First Column</td>
            <td class="head2">Second Row, Second Column</td>
            </tr>
            </table>

            With my stylesheet looking something like this:

            td.head2 {
            background: #d1d1ad;
            color: #000000;
            font-size: 12px
            }

            ********************************

            Now if I want all my information in the table to be formatted the
            same, I'll do this:

            <div class="head2">
            <table>
            <tr>
            <td>first row, first column</td>
            <td>first row, second column</td>
            </tr>
            <tr>
            <td>second row, first column</td>
            <td>second row, second column</td>
            </tr>
            </table>
            </div>
            With the stylesheet looking something like this:

            .head2 {
            background: #D1D1AD;
            color: #000000;
            font-size: 12px
            }


            Note that there are no carriage returns between the <TD> and </TD>
            tags, this eliminates the spaces you may be talking about..

            If my table has information in it that I want to format in different
            ways, and it usually does, I'll use contextual selectors in my
            stylesheet..

            Best Regards,

            John







            --- In ntb-html@y..., ARTIS <artis@a...> wrote:
            > Has anyone got some suggestions regarding the following style types
            for
            > CSS. They look just how I want them BUT, much of my work is within
            table
            > cells and if I use
            > "td class=head2" I have the space below that I haven't been able to
            > eliminate. If I use the body head (eg, body class="head2") with a
            > closing body tag within TD tags, it works fine, BUT html tidy wants
            to
            > eliminate it. Is there a problem with that?
            > -----------------------------
            > body {font-family: verdana, arial, san-serif; font-size: 75%;}
            > td {font-family: verdana, arial, san-serif; font-size: 75%;}
            >
            > body.head1 {font-family: arial, garamond, arial, san-serif;
            font-size:
            > 150%;}
            > body.head2 {font-family: garamond, arial, san-serif; font-size:
            100%;}
            > td.head1 { font-family: garamond, arial, san-serif; font-size:
            150%;}
            > td.head2 { font-family: garamond, arial, san-serif; font-size:
            100%;}
            > ---------------------------------
            > ...any suggestions greatfully received.
            > Niam
            >
            >
            >
            > [Non-text portions of this message have been removed]
          • hpaulissen
            Niam, You can set the style-attributes for your HTML-elements once... If you need to refer to certain classes, they can be called by .ClassName, they do not
            Message 5 of 5 , Feb 3, 2002
            • 0 Attachment
              Niam,

              You can set the style-attributes for your HTML-elements once...

              If you need to refer to certain classes, they can be called
              by .ClassName, they do not have to belong to a certain element. I'm
              not sure what you meant with the space below; I guess you can check
              for two things: the vertical alignment of your text is not identical
              for all your td's or there is some space because of the tr. What I
              regularly do is define a background color to a certain element or
              class, just to make clear what really is defined. When I'm finished I
              just remove (or change) the background-color.

              Please note: it should be sans-serif.

              Hope this helps you further,

              Hugo

              What follows is my proposal...

              <html><head>
              <STYLE TYPE="text/css">
              <!--
              body {
              font-family: verdana, arial, sans-serif;
              font-size: 75%;
              }
              td {
              font-size: 75%;
              vertical-align : baseline;
              border: 1px solid black;
              }
              .head1 {
              font-family: arial, garamond, arial, sans-serif;
              font-size: 150%;
              background: gray;
              }
              .head2 {
              font-family: garamond, arial, sans-serif;
              font-size: 100%;
              background: yellow;
              }
              -->
              </STYLE>
              <title>My Homepage</title></head>
              <body>
              My homepage
              <table>
              <tr>
              <td class="head1">
              This is td class head1
              </td>
              <td class="head2">
              This is td class head2
              </td>
              <td>
              This is td without a class
              </td>
              </tr>
              <tr>
              <td>
              This is td without a class
              </td>
              <td class="head1">
              This is td class head1
              </td>
              <td class="head2">
              This is td class head2
              </td>
              </tr>
              </table>
              </body>
              </html>
            Your message has been successfully submitted and would be delivered to recipients shortly.