4 Replies Latest reply on Apr 25, 2012 1:27 PM by John Waller

    Text indents for no reason on h3 and h1 tags

    klpe237

      I don't remember changing any CSS styles or code that would affect the h1 and h3 tag, however it now indents while the paragraph tag does not. I've tried looking all throughout my code and I am not able to fix it! I want all the text to align left like my paragraph text does. Here is a link to a page where you can see the issue: http://ukneurology.com/html/clinicInfo/stroke.html

        • 1. Re: Text indents for no reason on h3 and h1 tags
          osgood_ Level 8

          You have 40px left padding set on those tags via the css in the head section of the page.

           

          .container .bgdImage #right-sidebar p, h1, h2, h3, h3, h5, h6 {

              padding-left: 40px;

              padding-right: 15px;

              text-align:left;

          }

          • 2. Re: Text indents for no reason on h3 and h1 tags
            klpe237 Level 1

            Correct me if I'm wrong, but that shouldn't be what is causing my problem. That style should only be affecting the text in my sidebar because of the #right-sidebar. Besides,  if that style is what is causing my problem then why isn't it working on my p text also? What is confusing me is that only certain text styles are affected.... The style you pointed out affects every type of text

            • 3. Re: Text indents for no reason on h3 and h1 tags
              Nancy OShea Adobe Community Professional & MVP

              The following CSS rule effects only the headings and paragraphs inside the #sidebar div.

               

              #sidebar h1,

              #sidebar h2,

              #sidebar h3,

              #sidebar h4,

              #sidebar p {padding:left: 40px}

               

              This CSS rule effects all headings & paragraphs throughout your document.

               

              h1, h2, h3, h4, p  {font-size: 25px}

               

              Make sense?

               

               

              Nancy O.

              Alt-Web Design & Publishing

              Web | Graphics | Print | Media  Specialists 

              http://alt-web.com/

              http://twitter.com/altweb

              http://alt-web.blogspot.com/

              • 4. Re: Text indents for no reason on h3 and h1 tags
                John Waller Adobe Community Professional & MVP

                klpe237 wrote:

                 

                Correct me if I'm wrong, but that shouldn't be what is causing my problem. That style should only be affecting the text in my sidebar because of the #right-sidebar. Besides,  if that style is what is causing my problem then why isn't it working on my p text also?

                 

                CSS rules separated by commas are all treated independently and must each be defined in full after every comma.

                 

                You're interpreting

                 

                .container .bgdImage #right-sidebar p, h1, h2, h3, h3, h5, h6 {

                }

                 

                as

                 

                .container .bgdImage #right-sidebar p,

                .container .bgdImage #right-sidebar h1,

                .container .bgdImage #right-sidebar h2,

                .container .bgdImage #right-sidebar h3,

                .container .bgdImage #right-sidebar h3,

                .container .bgdImage #right-sidebar h5,

                .container .bgdImage #right-sidebar h6 {

                }

                 

                when in fact it's shorthand for

                 

                .container .bgdImage #right-sidebar p {

                 

                }

                h1, h2, h3, h3, h5, h6 {

                 

                }

                 

                Download a copy of the Firebug extension for the Firefox browser and edit CSS rules live in the browser window so you can immediately see the effect of tweaking CSS rules and troubleshoot them yourself.