15 Replies Latest reply: May 10, 2012 11:25 AM by tamower RSS

    Paragraph alignment problem

    tamower Community Member

      My first mistake was probably using Word to type the long article I wrote for the small website I run.  When I pasted the article into my page, three of the paragraphs in the middle of the article were not padded in that they were flush with the left edge of the content div rather than being offset from the div by 15 px like the other paragraphs.  I'm not very good at CSS even though I've been using it at a really basic level for three years now.  I did everything I knew to do but was unable to fix this so I deleted all the text from the page and removed all the codes from that area of the page.  I then copied the text into Notepad, removed all the formatting and put it back into my page with the same result.  I studied the code closely and could not find any problems.  When I look at the source of the page at http://www.alex.k12.ok.us/ (lines 245-274), I see code that is different from what I see in Dreamweaver.  I eventually caused the text to display correctly (gotta get this published, after all) by deliberately removing a code to cause one of the paragraphs not to display at all, which allowed the entire thing to display correctly.  Can someone tell by looking at the source noted above what is wrong with the text?  I have encountered this problem before when pasting from Word and generally don't use it.  I was in a hurry, though, and when I pasted it, I used the Paste Special, text only without formatting, command to insert it into the page.  

        • 1. Re: Paragraph alignment problem
          hans-g. CommunityMVP

          Hi tamower,

           

          clicking you link I get (translated from my German IE8: "website can not be displayed."

           

          Hans-Günter

          • 2. Re: Paragraph alignment problem
            tamower Community Member

            That's odd.  In response to your comment, I just had several testers open the site.  It displays fine on all my test Windows machines, Linux computers, an android device and even my iPhone.  Maybe the link got garbled in the previous message.  Here it is again:

             

            http://www.alex.k12.ok.us/

            • 3. Re: Paragraph alignment problem
              Nancy O. CommunityMVP

              You have some coding errors to fix.

              http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.alex.k12.ok.us%2F

               

              Starting on Line 245, you have malformed <br> and <p> tags.  Fix those first.

               

               

               

              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: Paragraph alignment problem
                hans-g. CommunityMVP

                Hi tamower,


                sorry, there is no change. Here screenshot of my IE8:

                 

                drIE8.jpg

                 

                Here my FF:

                 

                drFF.jpg

                 

                Hans-Günter

                • 5. Re: Paragraph alignment problem
                  hans-g. CommunityMVP

                  Hi that's interesting: the validation link works, but not the "naked" link!

                  • 6. Re: Paragraph alignment problem
                    tamower Community Member

                    This is what the WC3 validator shows.  The very simple code errors are bolded. 

                     

                    Senior <strong>Dakota Reid</strong> was officially named the 2011-2012 Alex High School Valedictorian during an academic celebration  reception held at Alex on April 30, 2012. Reid's numerous honors included the President's Gold Medal for Academic  Excellence, Oklahoma Honor Society, the Alex Superintendent's Academic Letter and Senior English Student of the Year. He  was awarded a Valedictorian scholarship to Oklahoma State University, an Army Scholar-Athlete award, the Streamline  scholarship and scholarships from the Alex faculty and alumni. </p    <p>Senior <strong>Josh Barrington</strong> was recognized as the 2011-2012 Alex High School Salutatorian. His honors included the President's  Gold Medal for Academic Excellence and Oklahoma Honor Society. Barrington received scholarships from the Alex alumni, the  Alex Class of 1954 (in honor of Joe B. Thurston), the Alex faculty and Streamline. Barrington was also named to the  Canadian Valley Technical Center (CVTC) National Honor Society.  </    <p>Alex Senior<strong> Paige Dunn</strong> also received the President's Gold Medal for Academic Excellence and was named to the Oklahoma  Honor Society. She was recognized as having the highest average in her English class and received the Page Thurston  scholarship and scholarships from the Alex faculty, Alex alumni, Streamline and the Alex Branch of the First National  Bank.</p>    <p>Other Alex Seniors receiving awards included<strong> Alex Helm</strong>, who received scholarships from the Alex Class of 1954 (in honor  of Joe B. Thurston), Cameron University, the Alex faculty and alumni and Streamline. <strong>Cloa Jarman </strong>received the President's  Silver Medal for Outstanding Academic Achievement, the Page Thurston scholarship and scholarships from the Alex faculty,  Alex alumni and Streamline. <strong>Braden Hines</strong> received an achievement award scholarship from Oklahoma State University, and  Kristin Williams was honored with an Army Scholar-Athlete award. <strong>Travis Conrad and Carli Dean</strong> received the President's  Silver Medal for Outstanding Academic Achievement. Conrad was also honored for his outstanding effort at Welding at CVTC.</p <p><strong>Juniors</strong><br>

                        <strong>Kylie Rodriguez</strong> topped the list of Alex Juniors receiving awards for academic and organizational achievement.  Rodriguez  was presented with the following awards from the Chickasha campus of the Canadian Valley Technical Center (CVTC):  National Honor Society for achievement in health careers, CVTC Ambassador and Outstanding Effort in Math award.  For her  work at Alex School, Rodriguez received the President's Gold Medal for Academic Excellence, Oklahoma Honor Society and  the Alex Superintendent's Academic Letter. She was recognized for Highest Class Average in English and received a Future  Career and Community Leaders (FCCLA) award for Most Active Returning Member. </p>

                     

                    But this is what my Dreamweaver code is.  Same code bolded.  Since the codes showed in the uploaded page to be broken, I manually replaced each one but no luck.  And yes, I saved the copy before uploading it and then refreshed the page view.  Even looked at it on another device in another browser.  It's almost like there are characters in the code that aren't showing up in my local copy. ??? I've had this happen before and solved it by manually retyping the entire thing in Dreamweaver.  Don't have time to do that now.  I also cleaned the HTML and Word HTML. 

                     

                    Senior <strong>Dakota Reid</strong> was officially named the 2011-2012 Alex High School Valedictorian during an academic celebration  reception held at Alex on April 30, 2012. Reid's numerous honors included the President's Gold Medal for Academic  Excellence, Oklahoma Honor Society, the Alex Superintendent's Academic Letter and Senior English Student of the Year. He  was awarded a Valedictorian scholarship to Oklahoma State University, an Army Scholar-Athlete award, the Streamline  scholarship and scholarships from the Alex faculty and alumni. </p>

                        <p>Senior <strong>Josh Barrington</strong> was recognized as the 2011-2012 Alex High School Salutatorian. His honors included the President's  Gold Medal for Academic Excellence and Oklahoma Honor Society. Barrington received scholarships from the Alex alumni, the  Alex Class of 1954 (in honor of Joe B. Thurston), the Alex faculty and Streamline. Barrington was also named to the  Canadian Valley Technical Center (CVTC) National Honor Society.  </p>

                        <p>Alex Senior<strong> Paige Dunn</strong> also received the President's Gold Medal for Academic Excellence and was named to the Oklahoma  Honor Society. She was recognized as having the highest average in her English class and received the Page Thurston  scholarship and scholarships from the Alex faculty, Alex alumni, Streamline and the Alex Branch of the First National  Bank.</p>

                        <p>Other Alex Seniors receiving awards included<strong> Alex Helm</strong>, who received scholarships from the Alex Class of 1954 (in honor  of Joe B. Thurston), Cameron University, the Alex faculty and alumni and Streamline. <strong>Cloa Jarman </strong>received the President's  Silver Medal for Outstanding Academic Achievement, the Page Thurston scholarship and scholarships from the Alex faculty,  Alex alumni and Streamline. <strong>Braden Hines</strong> received an achievement award scholarship from Oklahoma State University, and  Kristin Williams was honored with an Army Scholar-Athlete award. <strong>Travis Conrad and Carli Dean</strong> received the President's  Silver Medal for Outstanding Academic Achievement. Conrad was also honored for his outstanding effort at Welding at CVTC.</p>

                        <p><strong>Juniors</strong><br>

                        <strong>Kylie Rodriguez</strong> topped the list of Alex Juniors receiving awards for academic and organizational achievement.  Rodriguez  was presented with the following awards from the Chickasha campus of the Canadian Valley Technical Center (CVTC):  National Honor Society for achievement in health careers, CVTC Ambassador and Outstanding Effort in Math award.  For her  work at Alex School, Rodriguez received the President's Gold Medal for Academic Excellence, Oklahoma Honor Society and  the Alex Superintendent's Academic Letter. She was recognized for Highest Class Average in English and received a Future  Career and Community Leaders (FCCLA) award for Most Active Returning Member. </p>

                     


                    • 7. Re: Paragraph alignment problem
                      Nancy O. CommunityMVP

                      Part of the problem is you're mixing HTML and XHTML syntax.  It might be easier if you switch to an XHTML doc type.

                      Modify > Page properties > Title/Encoding > XHTML transitional.

                       

                      Invalid code:  </p    </        <p>  <br>

                       

                      Valid code:  <p> some text here... </p>     <p><strong>some bold text</strong><br /> 2nd line, same paragraph... </p>

                       

                      That should take care of the paragraph problems.

                       

                       

                      Nancy O.

                      Alt-Web Design & Publishing

                      Web | Graphics | Print | Media  Specialists 

                      http://alt-web.com/

                      http://twitter.com/altweb

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

                      • 8. Re: Paragraph alignment problem
                        hans-g. CommunityMVP

                        Hello Nancy,

                         

                        do you see his website in IE and/or FF?

                         

                        Hans-Günter

                        • 9. Re: Paragraph alignment problem
                          Nancy O. CommunityMVP

                          Hans,

                          I am in California.  No problem in Chrome18, FF12 and IE9.

                           

                          You are in Europe. Maybe your ISP is blocking URL .ok.us

                           

                          Nancy O.

                          • 10. Re: Paragraph alignment problem
                            tamower Community Member

                            I changed the doc type to xhtml.  I used the xhtml code <br />.  Then used <br/> cause I wasn't sure if there was a space.  The error persists and the code erros shown in the validator aren't present in my local code. Example:  </p    </  is not in my code.  I know how to use simple codes like <p> and </p>.  Is something hidden somewhere that I don't know about? I have retyped every singe paragraph break in that section of the page.  On all machines, one entire paragraph remains flush with the div instead of padded correctly.  If I delete that paragraph, the text that appears in that area is improperly aligned.  It's like there's a code turned on somewhere that I can't find.  Everything before and after that area displays fine in all browsers I test.  I guess the answer is to retype the entire article in Notepad like I've had to do before. 

                            • 11. Re: Paragraph alignment problem
                              osgood_ CommunityMVP

                              I've been following this for the past few hours and to be honest I'm none the wiser I keep looking at your page http://www.alex.k12.ok.us/ and don't see any paragraphs that remain flush left????

                               

                              If you have removed that paragraph then no one can trouble shoot why it is being troublesome.

                               

                              Having said that I think you mentioned somewhere you copied everything from Word so I wouldn't be surprised if its messed up somewhere.

                               

                              Have you tried just typing that paragraph in again manually?

                              • 12. Re: Paragraph alignment problem
                                hans-g. CommunityMVP

                                Hello Nancy,

                                 

                                thanks, I made a request there immediately.

                                 

                                Hans-Günter

                                • 13. Re: Paragraph alignment problem
                                  Nancy O. CommunityMVP

                                  When you pasted from MS Word, you no doubt injected some junk code somewhere.   If you copy & paste from Word into Notepad, that will strip the formatting for you.

                                   

                                  To save time, try opening your DW page in Notepad to see if you can locate the junk code.  Save it.  Then preview in browsers.  It might provide all the cleansing you need.

                                   

                                   

                                   

                                  Nancy O.

                                  • 14. Re: Paragraph alignment problem
                                    tamower Community Member

                                    I'm sorry, I failed to include that I moved the page containing the offset paragraph to the following test page:  http://www.alex.k12.ok.us/indextest.html.  This is the page I tried all the suggestions on and, as you can see, that damned paragraph is still out of whack. 

                                     

                                    On the original page, I broke the code intentionally to place a hidden paragraph in the area of the error so the article would display correctly.  It looks just fine but it bugs me cause I know it's not right.  Stupid, huh?  I should just move on but this has happened before and I wanted to know how to avoid it.  I think the answer is to stay away from Word. 

                                     

                                    Nancy, I have removed all formatting from the article text by copying it into Notepad and saving it but this mysterious problem continues.  I have not, however, tried to open up the entire page in Notepad and will do that now.  Let you know what happens...

                                    • 15. Re: Paragraph alignment problem
                                      tamower Community Member

                                      YAY!  Kudos to Nancy for going the extra mile and suggesting something I hadn't thought of!  There WERE mystery characters in my HTML, inserted by Word.  This little bugger here was the culprit: Â. Don't ask me what it means or why it was there but there were about 20 of them, all in the areas of the errors I was getting. Deleted them and everything is fine.  You may look here if you want:  http://www.alex.k12.ok.us/

                                       

                                      I will reiterate for future reference:

                                       

                                      If you write in Word and paste that text into Dreamweaver, even using the paste special command to remove all formatting, you may inadvertently insert junk code into your html document that you will not be able to see in any local view but which may skew the appearance of your text when live.  The most obvious symptom of this will be the return of html validator errors that are not present in your local code. Removing the Word formatting from the text by copying the text only to Notepad and saving will not necessarily remove this hidden code.  My paragraph misalignment issue was solved by opening my entire html document in Notepad, which revealed the mystery formatting that was causing the error.  I was then able to delete it and clear the errors. 

                                       

                                      Thanks, ya'll.  If I can't figure out how to mark this issue solved, could someone make sure that is done?