3 Replies Latest reply: Oct 5, 2013 11:38 PM by John Waller RSS

    How do I prevent the first line of text in a link from becoming indented?

    Noradc Community Member

      Hello.  In a div are two sentences.  They look fine until I change the second sentence into a link.  I tried adding a <span> tag, but doing so changed the class.  I tried placing the text of the second sentence into a separate div tag, but that didn't work either.  I tried applying a negative value in the text indent field but that moved that first sentence instead of the second sentence.  I am having trouble getting the div containing the second sentence to move into location beneath the first sentence, so I decided to work with all of the text inside of one div tag.  I would appreciate it if someone would let me know how to have both sentences be in a flush left position.  Thank you.

        • 1. Re: How do I prevent the first line of text in a link from becoming indented?
          John Waller CommunityMVP

          Can you upload the page and post a link so we can view it in our browsers?

           

          Much easier to diagnose the issue and offer a useful answer that way.

           

          Otherwise we're all making assumptions and guessing.

          • 2. Re: How do I prevent the first line of text in a link from becoming indented?
            Noradc Community Member

            Hello.  Yes, I have uploaded the page.  I notice that the second div that contains  the sentence that I would like to have as a link is aligned the way I want it to, but I am having trouble applying the url to the div tag to create a link.  I tried including a span tag, but it didn't work.  I would still like to know why, in the first div tag that contains both sentences, an indent has occurred and how to correct it.  Thank you very much. 

             

            The page can be seen at www.norachristians.com

            • 3. Re: How do I prevent the first line of text in a link from becoming indented?
              John Waller CommunityMVP

              The indent comes from the padding-left: 7px; in the CSS rule for the <a> tag

               

              a:link {

                        color: #FFF;

                        background-color: #000;

                        text-align: center;

                        padding-top: 8px;

                        padding-right: 8px;

                        padding-bottom: 8px;

                        padding-left: 7px; /* CREATES UNWANTED LEFT INDENT IN FOOTER LINKS */

                        text-decoration: none;

              }

               

              That rule is good for your menu but not your footer links so create a new set of rules for links in the footer.

               

              .footer_cc_license a:link { 

                        color: #FFF;

                        background-color: #000;

              }

              .footer_cc_license a:visited {

                color: #FFF;

                background-color: #000;

              }

              .footer_cc_license a:hover {

                color: #FFF;

                background-color: #000;

                 text-decoration: underline;

              }

              .footer_cc_license a:active {

                color: #FFF;

                background-color: #000;

                text-decoration: underline;

              }