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

CSS: negative margins using in Hx

Expand Messages
  • Mike Breiding - Morgantown WV
    Greetings, I am trying to close the gap between H2 and H3 content. I have tried changing the CSS file but have not been successful. I tried using negative
    Message 1 of 14 , May 2, 2014
    • 0 Attachment
      Greetings,
      I am trying to close the gap between H2 and H3 content.
      I have tried changing the CSS file but have not been successful.
      I tried using negative margin in-line and nothing changes.

      Any suggestions appreciated.
      -mb
      ~~~~~~~~~~~~~~~~~
      HTML
      http://epicroadtrips.us/dad/journals/travel/usa/1981-Southeastern-US/index.php

      CSS
      http://epicroadtrips.us/dad/journals/travel/usa/1981-Southeastern-US/ert_index_style.css

      Header CSS:

      h1{color:#ddd;margin:0px;padding:10px 0 0 0;font-size:180%;}

      h2{background:transparent;font: 150% "Times New Roman", Times,
      serif;color:#FFF;margin:10px 0 -10px 0;padding:0;}

      h3{text-align:center;background:transparent;color:#330000;font-size:120%;font-weight:200;margin:-30px
      0px 0px 0px;padding:0px 0 15px 0;clear:both;}

      Inline style:
      <h2 style="margin-bottom:-30px";>His Writings, Photos and Memorabilia</h2>

      ---
      This email is free from viruses and malware because avast! Antivirus protection is active.
      http://www.avast.com
    • Greg Chapman
      Hi Mike, On 02 May 14 12:29 Mike Breiding - Morgantown WV ... Remove clear:both; It is that which sends the h3 block below the two images. Greg
      Message 2 of 14 , May 2, 2014
      • 0 Attachment
        Hi Mike,

        On 02 May 14 12:29 Mike Breiding - Morgantown WV
        <mike@...> said:
        >
        >
        > h3{text-align:center;background:transparent;color:#330000;font-size:120%;font-weight:200;margin:-30px
        > 0px 0px 0px;padding:0px 0 15px 0;clear:both;}

        Remove

        clear:both;

        It is that which sends the h3 block below the two images.

        Greg
      • Margaret Peloquin
        If I understand correctly, you are trying to bring the content below the header closer to the header. Since what you have done doesn t seem to work, could you
        Message 3 of 14 , May 2, 2014
        • 0 Attachment
          If I understand correctly, you are trying to bring the content below the header closer to the header.  Since what you have done doesn't seem to work, could you try applying a style to the content below the header instead.  For example:

          <h1>Some header ..</h1>
          <p style="margin-top:-10px">content goes here</p>


          On Fri, May 2, 2014 at 6:29 AM, Mike Breiding - Morgantown WV <mike@...> wrote:
           

          Greetings,
          I am trying to close the gap between H2 and H3 content.
          I have tried changing the CSS file but have not been successful.
          I tried using negative margin in-line and nothing changes.

          Any suggestions appreciated.
          -mb
          ~~~~~~~~~~~~~~~~~
          HTML
          http://epicroadtrips.us/dad/journals/travel/usa/1981-Southeastern-US/index.php

          CSS
          http://epicroadtrips.us/dad/journals/travel/usa/1981-Southeastern-US/ert_index_style.css

          Header CSS:

          h1{color:#ddd;margin:0px;padding:10px 0 0 0;font-size:180%;}

          h2{background:transparent;font: 150% "Times New Roman", Times,
          serif;color:#FFF;margin:10px 0 -10px 0;padding:0;}

          h3{text-align:center;background:transparent;color:#330000;font-size:120%;font-weight:200;margin:-30px
          0px 0px 0px;padding:0px 0 15px 0;clear:both;}

          Inline style:
          <h2 style="margin-bottom:-30px";>His Writings, Photos and Memorabilia</h2>

          ---
          This email is free from viruses and malware because avast! Antivirus protection is active.
          http://www.avast.com




          --
          ++++++++++++++++++++++++++++++++++++++++++++++++++++
          Margaret Peloquin, Head Librarian, Professor - EVC
          Austin Community College
          3401 Webberville Rd, Austin, Texas 78702
          512.223.5117) || Fax: 512.223.5111
          peloquin@... || http://library.austincc.edu
        • Mike Breiding - Morgantown WV
          ... Hi Margaret, I tried this and no change. I am starting to get suspicious something else is going on. His Writings, Photos
          Message 4 of 14 , May 2, 2014
          • 0 Attachment
            On 5/2/2014 8:21 AM, Margaret Peloquin wrote:
            > If I understand correctly, you are trying to bring the content below the
            > header closer to the header. Since what you have done doesn't seem to
            > work, could you try applying a style to the content below the header
            > instead. For example:
            >
            > <h1>Some header ..</h1>
            > <p style="margin-top:-10px">content goes here</p>

            Hi Margaret,
            I tried this and no change.
            I am starting to get suspicious something else is going on.

            <h2 style="margin-bottom:-30px";>His Writings, Photos and Memorabilia</h2>

            <h3 style="margin-top:-30px";>Southeastern U.S.<br />

            -Mike

            >
            >
            > On Fri, May 2, 2014 at 6:29 AM, Mike Breiding - Morgantown WV
            > <mike@... <mailto:mike@...>> wrote:
            >
            > __
            >
            > Greetings,
            > I am trying to close the gap between H2 and H3 content.
            > I have tried changing the CSS file but have not been successful.
            > I tried using negative margin in-line and nothing changes.
            >
            > Any suggestions appreciated.
            > -mb
            > ~~~~~~~~~~~~~~~~~
            > HTML
            > http://epicroadtrips.us/dad/journals/travel/usa/1981-Southeastern-US/index.php
            >
            > CSS
            > http://epicroadtrips.us/dad/journals/travel/usa/1981-Southeastern-US/ert_index_style.css
            >
            > Header CSS:
            >
            > h1{color:#ddd;margin:0px;padding:10px 0 0 0;font-size:180%;}
            >
            > h2{background:transparent;font: 150% "Times New Roman", Times,
            > serif;color:#FFF;margin:10px 0 -10px 0;padding:0;}
            >
            > h3{text-align:center;background:transparent;color:#330000;font-size:120%;font-weight:200;margin:-30px
            >
            > 0px 0px 0px;padding:0px 0 15px 0;clear:both;}
            >
            > Inline style:
            > <h2 style="margin-bottom:-30px";>His Writings, Photos and
            > Memorabilia</h2>

            ---
            This email is free from viruses and malware because avast! Antivirus protection is active.
            http://www.avast.com
          • Mike Breiding - Morgantown WV
            ... Ah, yes. This has worked in the past with other pages. But, for some reason not this one/ I removed and it and no change occurred. Thanks, -Mike ... This
            Message 5 of 14 , May 2, 2014
            • 0 Attachment
              On 5/2/2014 8:19 AM, Greg Chapman wrote:
              > Hi Mike,>
              > On 02 May 14 12:29 Mike Breiding - Morgantown WV
              > <mike@...> said:

              > >
              > h3{text-align:center;background:transparent;color:#330000;font-size:120%;font-weight:200;margin:-30px
              > > 0px 0px 0px;padding:0px 0 15px 0;clear:both;}

              > Remove
              > clear:both;
              > It is that which sends the h3 block below the two images.

              Ah, yes. This has worked in the past with other pages.
              But, for some reason not this one/
              I removed and it and no change occurred.
              Thanks,
              -Mike
              ====

              > Greg
              >
              >

              ---
              This email is free from viruses and malware because avast! Antivirus protection is active.
              http://www.avast.com
            • John Shotsky
              You might try using different browsers. I have been fooled by using only one browser, when others looked fine. Regards, John RecipeTools Web Site:
              Message 6 of 14 , May 2, 2014
              • 0 Attachment

                You might try using different browsers. I have been fooled by using only one browser, when others looked fine.

                 

                Regards,
                John
                RecipeTools Web Site: http://recipetools.gotdns.com/recipetools/
                John's Mags Yahoo Group:  http://groups.yahoo.com/group/johnsmags/

                 

                From: ntb-html@yahoogroups.com [mailto:ntb-html@yahoogroups.com] On Behalf Of Mike Breiding - Morgantown WV
                Sent: Friday, May 02, 2014 05:44
                To: ntb-html@yahoogroups.com
                Subject: Re: [NH] CSS: negative margins using in Hx

                 

                 

                On 5/2/2014 8:21 AM, Margaret Peloquin wrote:

                > If I understand correctly, you are trying to bring the content below the
                > header closer to the header. Since what you have done doesn't seem to
                > work, could you try applying a style to the content below the header
                > instead. For example:
                >
                > <h1>Some header ..</h1>
                > <p style="margin-top:-10px">content goes here</p>

                Hi Margaret,
                I tried this and no change.
                I am starting to get suspicious something else is going on.

                <h2 style="margin-bottom:-30px";>His Writings, Photos and Memorabilia</h2>

                <h3 style="margin-top:-30px";>Southeastern U.S.<br />

                -Mike

                >
                >
                > On Fri, May 2, 2014 at 6:29 AM, Mike Breiding - Morgantown WV
                > <mike@... <mailto:mike@...>> wrote:
                >
                > __
                >
                > Greetings,
                > I am trying to close the gap between H2 and H3 content.
                > I have tried changing the CSS file but have not been successful.
                > I tried using negative margin in-line and nothing changes.
                >
                > Any suggestions appreciated.
                > -mb
                > ~~~~~~~~~~~~~~~~~
                > HTML
                > http://epicroadtrips.us/dad/journals/travel/usa/1981-Southeastern-US/index.php
                >
                > CSS
                > http://epicroadtrips.us/dad/journals/travel/usa/1981-Southeastern-US/ert_index_style.css
                >
                > Header CSS:
                >
                > h1{color:#ddd;margin:0px;padding:10px 0 0 0;font-size:180%;}
                >
                > h2{background:transparent;font: 150% "Times New Roman", Times,
                > serif;color:#FFF;margin:10px 0 -10px 0;padding:0;}
                >
                > h3{text-align:center;background:transparent;color:#330000;font-size:120%;font-weight:200;margin:-30px
                >
                > 0px 0px 0px;padding:0px 0 15px 0;clear:both;}
                >
                > Inline style:
                > <h2 style="margin-bottom:-30px";>His Writings, Photos and
                > Memorabilia</h2>

                ---
                This email is free from viruses and malware because avast! Antivirus protection is active.
                http://www.avast.com

              • Mike Breiding - Morgantown WV
                ... I removed the clear:both; in the CSS file but I missed the clear:both; that was in-line. I removed it and that solved the problem. Does anyone see any
                Message 7 of 14 , May 2, 2014
                • 0 Attachment
                  On 5/2/2014 8:19 AM, Greg Chapman wrote:
                  > Hi Mike,
                  > Remove
                  > clear:both;
                  > It is that which sends the h3 block below the two images.

                  I removed the "clear:both;" in the CSS file but I missed the
                  "clear:both;" that was in-line.
                  I removed it and that solved the problem.

                  Does anyone see any unintended consequences by removing "clear:both;" ?
                  Someone else wrote that in years ago.
                  -Mike

                  ---
                  This email is free from viruses and malware because avast! Antivirus protection is active.
                  http://www.avast.com
                • Mike Breiding - Morgantown WV
                  ... The final editing in the index and CSS file look fine across FF IE and CM - latest versions. Much of the CSS and hacks were written in the days if IE 6. I
                  Message 8 of 14 , May 2, 2014
                  • 0 Attachment
                    On 5/2/2014 8:47 AM, John Shotsky wrote:
                    > You might try using different browsers. I have been fooled by using only
                    > one browser, when others looked fine.

                    The final editing in the index and CSS file look fine across FF IE and
                    CM - latest versions.

                    Much of the CSS and hacks were written in the days if IE 6.

                    I have been away from all this too long and my brain has leaked in the
                    interim.

                    Thanks,
                    -Mike


                    ---
                    This email is free from viruses and malware because avast! Antivirus protection is active.
                    http://www.avast.com
                  • Greg Chapman
                    Hi Mike, On 02 May 14 13:52 Mike Breiding - Morgantown WV ... Glad you sorted it! ... The only unitended consequence will be if you have used the h3 styling
                    Message 9 of 14 , May 2, 2014
                    • 0 Attachment
                      Hi Mike,

                      On 02 May 14 13:52 Mike Breiding - Morgantown WV
                      <mike@...> said:
                      > > Remove
                      > > clear:both;
                      > > It is that which sends the h3 block below the two images.
                      >
                      > I removed the "clear:both;" in the CSS file but I missed the
                      > "clear:both;" that was in-line.
                      > I removed it and that solved the problem.

                      Glad you sorted it!

                      > Does anyone see any unintended consequences by removing
                      > "clear:both;" ?
                      > Someone else wrote that in years ago.

                      The only unitended consequence will be if you have used the h3 styling
                      rule in circumstances where the clear:both was needed.

                      For example, do you have h3 tags in the main body of pages where there
                      might be images immediately above.

                      If you are not sure it could be wise to leave the h3 rule as it was
                      and create a new one that is likely only to apply to this particular
                      h3, e.g.

                      div#header h3

                      Greg
                    • Axel Berger
                      ... Depends on what you intend. Often floating parts like images belong to one section and you want the next one only to start after them. Mostly I encounter
                      Message 10 of 14 , May 2, 2014
                      • 0 Attachment
                        Mike Breiding - Morgantown WV wrote:
                        > Does anyone see any unintended consequences by removing "clear:both;" ?

                        Depends on what you intend. Often floating parts like images belong to one
                        section and you want the next one only to start after them. Mostly I
                        encounter that, when the text to go with one or more images is rather
                        short.
                        If you don't mind the next headline being pulled up, like when images do
                        not strictly belong to sections, then there's no need to clear.

                        Axel
                      • Mike Breiding - Morgantown WV
                        ... I can t think of an instance where I have used H3 in this way but I will have to keep that in minds. Thanks, -Mike ... This email is free from viruses and
                        Message 11 of 14 , May 2, 2014
                        • 0 Attachment
                          On 5/2/2014 9:06 AM, Greg Chapman wrote:
                          > Hi Mike,
                          > > Does anyone see any unintended consequences by removing
                          > > "clear:both;" ?
                          > > Someone else wrote that in years ago.
                          >
                          > The only unitended consequence will be if you have used the h3 styling
                          > rule in circumstances where the clear:both was needed.
                          >
                          > For example, do you have h3 tags in the main body of pages where there
                          > might be images immediately above.

                          I can't think of an instance where I have used H3 in this way but I will
                          have to keep that in minds.

                          Thanks,
                          -Mike


                          >
                          > If you are not sure it could be wise to leave the h3 rule as it was
                          > and create a new one that is likely only to apply to this particular
                          > h3, e.g.
                          >
                          > div#header h3
                          >
                          > Greg
                          >
                          >

                          ---
                          This email is free from viruses and malware because avast! Antivirus protection is active.
                          http://www.avast.com
                        • Axel Berger
                          ... This can happen and often did in old times during the browser wars, but with clean valid code it ought to have become extremely rare now. With non-valid
                          Message 12 of 14 , May 7, 2014
                          • 0 Attachment
                            > John Shotsky wrote:
                            > I have been fooled by using only
                            > one browser, when others looked fine.

                            This can happen and often did in old times during the browser wars, but
                            with clean valid code it ought to have become extremely rare now.
                            With non-valid code anything goes.

                            Axel
                          • John Shotsky
                            It is still possible to trigger quirks mode with valid code. I have had code pass verification but still not look the same on all three browsers. It has to
                            Message 13 of 14 , May 7, 2014
                            • 0 Attachment

                              It is still possible to trigger quirks mode with valid code. I have had code pass verification but still not look the same on all three browsers. It has to verify AND not trigger quirks mode in any browser.

                               

                              Regards,
                              John
                              RecipeTools Web Site: http://recipetools.gotdns.com/recipetools/
                              John's Mags Yahoo Group:  http://groups.yahoo.com/group/johnsmags/

                               

                              From: ntb-html@yahoogroups.com [mailto:ntb-html@yahoogroups.com] On Behalf Of Axel Berger
                              Sent: Wednesday, May 07, 2014 07:57
                              To: ntb-html@yahoogroups.com
                              Subject: Re: [NH] CSS: negative margins using in Hx

                               

                               

                              > John Shotsky wrote:

                              > I have been fooled by using only
                              > one browser, when others looked fine.

                              This can happen and often did in old times during the browser wars, but
                              with clean valid code it ought to have become extremely rare now.
                              With non-valid code anything goes.

                              Axel

                            • Greg Chapman
                              Hi John, ... What browser are you talking about? What doctype? What verifier did you use? I hope you re talking about a very old/broken browser if valid code
                              Message 14 of 14 , May 7, 2014
                              • 0 Attachment
                                Hi John,

                                On 07 May 14 16:00 "John Shotsky" <jshotsky@...> said:
                                > It has to verify AND not trigger quirks mode in any browser.

                                What browser are you talking about? What doctype? What verifier did
                                you use?

                                I hope you're talking about a very old/broken browser if valid code
                                places it in quirks mode.

                                Greg
                              Your message has been successfully submitted and would be delivered to recipients shortly.