8 Replies Latest reply on Oct 15, 2013 8:45 AM by David_Powers

    removing before/after spacing on h tags

    eberhoo

      I have had h1 and h2 tags working fine (that is, with space removed before and after the tags), using this code:

       

      h2 {color: #000000; padding:0px; margin:0px; font-family: century gothic; font-weight:normal; font-size: 17px;}

      h1 {color: #FF0000; padding:0px; margin:0px; font-family: century gothic; font-weight:normal; font-size: 20px;}

       

      But when I added an h3 tag using the same code:

       

      h3 {color: #FF0000; padding:0px; margin:0px; font-family: century gothic; font-weight:normal; font-size: 14px;}

       

      normal H tag spacing re-appeared after the h3 tag.

       

      Code for the table following the h3 tag is as follows (in case this is somehow throwing things off):

       

      <table class="special" width="804" cellpadding="0" cellspacing="0" style="background-image:url(images/flag-exta.jpg )"

       

      Only other change I made to coding since the h1 and 2 tags were working without spacing between them was to add css coding to address a border issue, now resolved:

       

      table.special {border: 3px solid #999; }

      table.special td {border: none; }

       

      Can't see how the code in the table following the h tags or the css coding addition effects the h3 spac issue (if I delete both codes I still have the h3 space problem).

       

      Substituting 'display:inline;' coding for 'padding:0px; margin:0px;' doesn't make any difference either.

       

      Much appreciate any guidance. Thanks.

        • 1. Re: removing before/after spacing on h tags
          John Waller Adobe Community Professional & MVP

          Best if you upload the page in its entirety and post a link so we can take a look in our browsers.

          • 2. Re: removing before/after spacing on h tags
            David_Powers Adobe Community Professional (Moderator)

            Removing the bottom margin from one element doesn't affect the top margin of the following element. If the table that's following the h3 is too far away for your liking, change the value of margin-top in the special class or create a separate rule for the table.

             

            If that doesn't fix the problem, provide a URL for the problem page, as John suggested.

             

            Looking at your styles, you have this for font-family:

             

                font-family: century gothic;

             

            There are two things wrong with this. First, font names that include spaces must be in quotes. Secondly, you should always specify a fallback generic font in case the specified font isn't available on the user's system. This is particularly important in your case, because Century Gothic is a sans-serif font. If you fail to specify a generic fallback, the headings will be displayed in the default serif font. Change your declaration to this:

             

                font-family: "century gothic", sans-serif;

            1 person found this helpful
            • 3. Re: removing before/after spacing on h tags
              eberhoo Level 1

              Here is the url at issue: http://www.hoohobbers.com/index.html.

               

              Since your and David'' emails, in the css for the 'special table'  (the table below the h tags), I just added  { margin-top: 0px; ...}, but this doesn't solve the gap problem. So this must not be the correct coding to solve the problem, or I entered it incorrectly or in the wrong place???

               

              Thanks.

              • 4. Re: removing before/after spacing on h tags
                eberhoo Level 1

                David,

                 

                I just replied to John's email. Don't know if this uploads for you to see, so am sending it to you here:

                 

                Here is the url at issue: http://www.hoohobbers.com/index.html.

                 

                Since your and David'' emails, in the css for the 'special table'  (the table below the h tags), I just added  { margin-top: 0px; ...}, but this doesn't solve the gap problem. So this must not be the correct coding to solve the problem, or I entered it incorrectly or in the wrong place???

                 

                Thanks.

                 

                Also, thanks for the direction on the font situ. I have some work to do.

                 

                Bill

                • 5. Re: removing before/after spacing on h tags
                  eberhoo Level 1

                  DAVID,

                   

                  I changed the code for all the font names which included spaces as you advised (see below). This includes the "Times New Roman", font which is included as you see with other fonts in a given span class. This multi-font nomenclature was set by someone who initially developed our site many years ago. Is this multi-font span declaration legit and executed correctly: {font-family: Georgia, "Times New Roman", Times, serif; ...} ?

                   

                  Thanks again for you input.

                   

                  Bill

                   

                  span.c26

                  span.c25

                  span.c24

                  span.c23

                  span.c22

                  span.c21

                  span.c20

                  span.c19

                  span.c18

                  span.c17

                  span.c16

                  span.c15

                  span.c14

                  span.c13

                  span.c12

                  span.c11

                  span.c10 {font-family: Georgia, "Times New Roman", Times, serif}

                  span.c9

                  span.c8

                  span.c7

                  span.c6 {font-family: Georgia, "Times New Roman", Times, serif; font-size: 90%}

                  span.c5 {font-family: Georgia, "Times New Roman", Times, serif; font-size: 50%}

                  span.c4 {font-family: Georgia, "Times New Roman", Times, serif; font-size: 60%}

                  span.c3 {font-family: Georgia, "Times New Roman", Times, serif; font-size: 80%}

                  span.c2 {font-family: Georgia, "Times New Roman", Times, serif; font-size: 70%}

                  span.c1 {font-family: Georgia, "Times New Roman", Times, serif; font-size: 80%}

                  div.c17

                  div.c16 {font-family: Georgia, "Times New Roman", Times, serif; font-size: 70%}

                  div.c15

                  div.c14 {text-align: center}

                  div.c13 {text-align: center}

                  div.c12 {text-align: center}

                  div.c11 {font-family: Georgia, "Times New Roman", Times, serif; font-size: 80%; text-align: left}

                  div.c10 {font-family: Georgia, "Times New Roman", Times, serif; font-size: 80%; text-align: center}

                  div.c9 {font-family: Georgia, "Times New Roman", Times, serif; font-size: 60%; text-align: center}

                  div.c8

                  div.c7

                  div.c6

                  div.c5

                  div.c4

                  div.c3

                  div.c2

                  div.c1 {text-align: center}

                  table.c7 {background-color: #FFFFFF}

                  table.c5 {background-color: #FFFFFF}

                  table.c4 {background-color: #EEFFFF}

                  h4.c3

                  h4.c2

                  h4.c1

                  h3

                  h2

                  h1

                  tr.c7 {background-color: #FF0000}

                  tr.c6 {background-color: #FF0000}

                  p.c14 {text-align: center}

                  p.c3 {text-align: center}

                  p.c2 {text-align: center}

                  • 6. Re: removing before/after spacing on h tags
                    David_Powers Adobe Community Professional (Moderator)

                    What is happening is that browsers are automatically inserting a line break between two tables. Your h1, h2, and h3 are in one table, and the "special" table is separate.

                     

                    Using tables for layout is not a very good idea, particularly  if only text is involved. The "special" table might be an exception.

                     

                    Without pulling your entire page apart, there are two ways you could solve this.

                    • Remove the table that contains the h1, h2, and h3 headings, and make it the first row in your "special" table.
                    • Change the value of margin-top in the special class to margin-top: -1em; (minus 1em).

                     

                    There's also an error in your CSS on line 79. There's an extra comma after "Times New Roman".

                    • 8. Re: removing before/after spacing on h tags
                      David_Powers Adobe Community Professional (Moderator)

                      If this has fixed the problem, please mark an answer correct to indicate that the thread has been answered.