16 Replies Latest reply on Jul 31, 2008 10:04 AM by computerkitten

    How do I reduce space above and below horizontal line?

    computerkitten Level 1
      I have used the insert Horizontal Line in Dreamweaver to separate the months in a table.
      See this at http://www.dazzlewebstudio.com/testing/falkenstein/special/attractions2.html

      How do I reduce the space that is above and below this horizontal line? The person I am doing this for does not want as much white space above and below this line. But I can not figure out a way to reduce this. I even removed the line at one point just to see if there was a way to style a line with CSS for a table row but couldn't figure that out either.

      Please help.

      CK
        • 1. Re: How do I reduce space above and below horizontal line?
          Level 7
          On Wed, 30 Jul 2008 18:48:35 +0000 (UTC), "computerkitten"
          <webforumsuser@macromedia.com> wrote:

          >I have used the insert Horizontal Line in Dreamweaver to separate the months in
          >a table.
          > See this at
          > http://www.dazzlewebstudio.com/testing/falkenstein/special/attractions2.html.
          >
          > How do I reduce the space that is above and below this horizontal line? The
          >person I am doing this for does not want as much white space above and below
          >this line. But I can not figure out a way to reduce this. I even removed the
          >line at one point just to see if there was a way to style a line with CSS for a
          >table row but couldn't figure that out either.
          >
          > Please help.
          >
          > CK

          style the rows top border by defining the style

          tr.lineAbove td { border-top: medium solid red; }

          and apply it to the row which you want the line above

          <tr class="lineAbove">



          <html>
          <head>
          <title>Dr. Lynda Falkenstein - Coming Attractions</title>
          <meta http-equiv="Content-Type" content="text/html;
          charset=iso-8859-1">
          <link href="css/attractions.css" rel="stylesheet" type="text/css">
          <style type="text/css">
          <!--

          .style3 {
          color: #0472AF;
          font-weight: bold;
          margin: 5px;
          padding: 5px;
          }

          .style5 {
          font-family: Arial, Helvetica, sans-serif;
          font-size: 12px;
          }
          tr {vertical-align:top;}
          tr.lineAbove td { border-top: medium solid red; } /* only if you want
          to modify one or a few rows etc */
          -->
          </style>
          </head>
          <body bgcolor="#ffffff">
          <center>
          <table width="615" border="0" id="table_main">
          <tr>
          <td><table width="615" border="0" cellpadding="0"
          cellspacing="0" id="table_data">
          <tr>
          <th width="46" class="month"><p align="center"
          class="date">Date</p></th>
          <th width="87" > </th>
          <th width="356" >Title</th>
          <th width="126" >Featured Expert<br></th>
          </tr>
          <tr>
          <td><p align="center"
          class="month"><strong>June</strong></p></td>
          <td><div align="left"></div></td>
          <td> </td>
          <td> </td>
          </tr>
          <tr>
          <td><p align="center">24</p></td>
          <td><p align="left">1:30-3:00pm</p></td>
          <td><p>Claim Your Niche&mdash;Nine Steps to a Lucrative
          Business <br>
          in Any Economy!</p></td>
          <td><p>Dr. Lynda Falkenstein</p></td>
          </tr>
          <tr>
          <td><p align="center">26</p></td>
          <td><p align="left">1:30-2:45pm</p></td>
          <td><p>Jon Stewart or Oprah: What's Your Website
          Personality</p></td>
          <td><p>Jason Billingsley</p></td>
          </tr>
          <tr>
          <td colspan="4"></td>
          </tr>
          <tr class="lineAbove">
          <td><p align="center"
          class="month"><strong>July</strong></p></td>
          <td><div align="left"></div></td>
          <td> </td>
          <td> </td>
          </tr>
          <tr>
          <td><p align="center">15</p></td>
          <td><p align="left">11:00-Noon</p></td>
          <td><p>eMarketing&mdash;Standing <strong>Out</strong> in
          the <strong>In-Box</strong></p></td>
          <td><p>Carolyn Gardner</p></td>
          </tr>
          <tr>
          <td colspan="4"></td>
          </tr>
          <tr>
          <td colspan="4"></td>
          </tr>
          </table>
          <p> </p></td>
          </tr>
          </table>
          <br>
          <p>  </p>
          </center>
          </body>
          </html>
          --

          ~Malcolm~*...
          ~*
          • 2. Re: How do I reduce space above and below horizontal line?
            Level 7
            hr { margin:0;padding:0; } in your CSS might work, but you'll have to also
            control the bottom margin on the top element, and the top margin on the
            bottom element, since those margins collapse.

            --
            Murray --- ICQ 71997575
            Adobe Community Expert
            (If you *MUST* email me, don't LAUGH when you do so!)
            ==================
            http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
            http://www.dwfaq.com - DW FAQs, Tutorials & Resources
            ==================


            "computerkitten" <webforumsuser@macromedia.com> wrote in message
            news:g6qd23$g98$1@forums.macromedia.com...
            >I have used the insert Horizontal Line in Dreamweaver to separate the
            >months in
            > a table.
            > See this at
            > http://www.dazzlewebstudio.com/testing/falkenstein/special/attractions2.html.
            >
            > How do I reduce the space that is above and below this horizontal line?
            > The
            > person I am doing this for does not want as much white space above and
            > below
            > this line. But I can not figure out a way to reduce this. I even removed
            > the
            > line at one point just to see if there was a way to style a line with CSS
            > for a
            > table row but couldn't figure that out either.
            >
            > Please help.
            >
            > CK
            >

            • 3. Re: How do I reduce space above and below horizontal line?
              computerkitten Level 1
              Malcolm, can you please walk me through doing this. I am somewhat a newbie but can't seem to get this defined and working.

              Thanks
              • 4. Re: How do I reduce space above and below horizontal line?
                Level 7
                On Wed, 30 Jul 2008 20:02:46 +0000 (UTC), "computerkitten"
                <webforumsuser@macromedia.com> wrote:

                >Malcolm, can you please walk me through doing this. I am somewhat a newbie but can't seem to get this defined and working.
                >
                >Thanks

                OK - you don't need to put a horizontal line <hr> in a tables row, as
                you imply - it is possible to use one rows border to give a line.

                Obviously you can either use the bottom border or top - I just chose
                the top.

                So in the code for the row below where you want the line I put this
                the class="lineabove" :-
                <tr class="lineAbove">

                in the css I styled it with

                tr.lineAbove td { border-top: medium solid red; }

                what this is saying is:

                in the row ( tr ) that is styled with .lineAbove - style the cells
                ( td ) top border - in the case I chose a medium thickness solid red
                line

                <table width="615" border="0" cellpadding="0" cellspacing="0"
                id="table_data">
                <tr class="lineAbove">
                <td>class="month"><strong>July - This row will have a red
                line above it</strong></td>
                <td>&nbsp</td>
                <td> </td>
                <td> </td>
                </tr>
                <tr>
                <td>This row will have no line above it</td>
                <td> </td>
                <td> </td>
                <td> </td>
                </tr>
                </table>

                does that help ?
                --

                ~Malcolm~*...
                ~*
                • 5. Re: How do I reduce space above and below horizontal line?
                  computerkitten Level 1
                  Well I was able to get one red line to work above a month but then when I applied the same class to another row it wouldn't work. So I gave up :-(. Is there any easier way? No way to style just the horizontal line I have is there?
                  • 6. Re: How do I reduce space above and below horizontal line?
                    Level 7
                    On Wed, 30 Jul 2008 21:19:10 +0000 (UTC), "computerkitten"
                    <webforumsuser@macromedia.com> wrote:

                    >Well I was able to get one red line to work above a month but then when I
                    >applied the same class to another row it wouldn't work. So I gave up :-(. Is
                    >there any easier way? No way to style just the horizontal line I have is there?


                    Post the code - or url

                    --

                    ~Malcolm~*...
                    ~*
                    • 8. Re: How do I reduce space above and below horizontal line?
                      Level 7
                      On Wed, 30 Jul 2008 22:24:18 +0000 (UTC), "computerkitten"
                      <webforumsuser@macromedia.com> wrote:

                      >Okay here is the link...thanks for looking at it.
                      >
                      > http://www.dazzlewebstudio.com/testing/falkenstein/special/attractions2.html


                      That's the same as before - none of the code I suggested ?
                      --

                      ~Malcolm~*...
                      ~*
                      • 9. Re: How do I reduce space above and below horizontal line?
                        computerkitten Level 1
                        Well I had tried creating a new style sheet and got it to work for one row but not others I tried to style with it.
                        • 10. Re: How do I reduce space above and below horizontal line?
                          Level 7
                          On Wed, 30 Jul 2008 23:17:01 +0000 (UTC), "computerkitten"
                          <webforumsuser@macromedia.com> wrote:

                          >Well I had tried creating a new style sheet and got it to work for one row but not others I tried to style with it.


                          If it works on one table row, and you apply it in the same way to
                          another, then I fail to see how it wouldn't work - UNLESS you have
                          made a typo mistake.

                          But we are guessing unless you upload the test file to the server.

                          and for some reason the links you gave don't result in a normal html
                          file being sent.


                          --

                          ~Malcolm~*...
                          ~*
                          • 11. Re: How do I reduce space above and below horizontal line?
                            computerkitten Level 1
                            Okay so my test page is here.

                            http://www.dazzlewebstudio.com/testing/falkenstein/special/attractions.htm

                            What I did prior is I went into dreamweaver, created a class called .horizontal_line. Then I selected a row in the dreamweaver table, appied the style called horizontal_line to it, and it did put a top line across all columns. But when I went to select another row, and select Style for that of horizontal_line, it would not apply the colored line, even though it says the style existed on that row.

                            Did I do something wrong? I could try all over again but that is all the steps I did.

                            Thanks
                            • 12. Re: How do I reduce space above and below horizontal line?
                              Level 7
                              On Wed, 30 Jul 2008 23:40:55 +0000 (UTC), "computerkitten"
                              <webforumsuser@macromedia.com> wrote:

                              >Okay so my test page is here.
                              >
                              > http://www.dazzlewebstudio.com/testing/falkenstein/special/attractions.htm
                              >
                              > What I did prior is I went into dreamweaver, created a class called
                              >.horizontal_line. Then I selected a row in the dreamweaver table, appied the
                              >style called horizontal_line to it, and it did put a top line across all
                              >columns. But when I went to select another row, and select Style for that of
                              >horizontal_line, it would not apply the colored line, even though it says the
                              >style existed on that row.
                              >
                              > Did I do something wrong? I could try all over again but that is all the
                              >steps I did.
                              >
                              > Thanks

                              The html had a minor discrepancy - and empty cell ( or span of cells
                              as below:
                              <tr valign="top" class="underline_table_row">
                              <td><p align="center">26</p></td>
                              <td valign="top"><p align="left">1:30-2:45pm</p></td>
                              <td valign="top"><p>Jon Stewart or Oprah: What's Your
                              Website Personality</p></td>
                              <td valign="top"><p>Jason Billingsley</p></td>
                              </tr>
                              <tr valign="top" class="underline_table_row">
                              <td colspan="4">This td span was empty it  - should at
                              least have &amp;nbsp;
                              in it</td>
                              </tr>


                              You didn't upload the amended style sheet so I put this into it.

                              tr.underline_table_row td { border-bottom: medium solid red; } /* only
                              if you want to modify one or a few rows etc */


                              hope this helps - ok ?
                              - I'm off now - it's late here.
                              --

                              ~Malcolm~*...
                              ~*
                              • 13. Re: How do I reduce space above and below horizontal line?
                                Level 7
                                On Wed, 30 Jul 2008 23:40:55 +0000 (UTC), "computerkitten"
                                <webforumsuser@macromedia.com> wrote:

                                >Okay so my test page is here.
                                >
                                > http://www.dazzlewebstudio.com/testing/falkenstein/special/attractions.htm
                                >


                                One other thing - you can remove the <hr> tags if you want
                                --

                                ~Malcolm~*...
                                ~*
                                • 14. Re: How do I reduce space above and below horizontal line?
                                  computerkitten Level 1
                                  Thank you Malcolm for all your help. So the lady I am working with for this site changed her mind and decided the default space will work just fine....hahaha oh geez. I am sorry for bothering you with this. I guess its just the way this business goes. I am learning more and more.
                                  Thank you very much for taking the time to help.
                                  • 15. Re: How do I reduce space above and below horizontal line?
                                    Level 7
                                    On Thu, 31 Jul 2008 06:05:54 +0000 (UTC), "computerkitten"
                                    <webforumsuser@macromedia.com> wrote:

                                    >Thank you Malcolm for all your help. So the lady I am working with for this
                                    >site changed her mind and decided the default space will work just
                                    >fine....hahaha oh geez. I am sorry for bothering you with this. I guess its
                                    >just the way this business goes. I am learning more and more.
                                    > Thank you very much for taking the time to help.

                                    No problem, hope you now know a little more how to control tables with
                                    css, so you can make tables cleaner in future :-) - you have a lot of
                                    redundant code - in those tables.:-))
                                    --

                                    ~Malcolm~*...
                                    ~*
                                    • 16. Re: How do I reduce space above and below horizontal line?
                                      computerkitten Level 1
                                      Hey thanks... I am still somewhat a newbie. Can you please tell me though where the redundant code is and tell me how I did that too?! Want to try to keep from doing that again for sure! Thanks.