Skip navigation
Currently Being Moderated

Text Rendition

Jun 14, 2012 6:12 AM

I am building a rather text heavy site. When viewed live or in the four most popular browsers the text appears far shorter in height than in design view (I'm the Arial family in CS6. I can enter a full page of text (900px) but when seen in a browser it appears to be only 75% of the page depth. How can I get the text to appear exactly the same as I have inputted into Dreamweaver?

 
Replies
  • Currently Being Moderated
    Jun 14, 2012 6:54 AM   in reply to wittonend

    So what you are saying is the browser is NOT showing all of your text height wise? Maybe that's because you have attached a height to something in your code?

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 14, 2012 7:44 AM   in reply to wittonend

    wittonend wrote:

     

    Thanks for the reply, I've solved the problem by inserting line breaks rather than paragraphs. My inexperience showing through but if you know why inserting paragraphs had this effect it might be useful to share.

     

    Something is wrong with your code as <p></p> paragraph tags would not cause the problem you are describing. Without seeing the page and the code its difficult to give you a definitive answer.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 14, 2012 2:20 PM   in reply to wittonend

    wittonend wrote:

     

    All the text is showing but finishes short of the end of the page, so there's gap between the last line and the

    bottom of the page.

     

    Hit Ctrl+++ in browsers to increase text size. 

     

    Line breaks are not a good choice and should never be used in place of <h1, h2, h3> and <p> tags.

     

    Use CSS to style your paragraphs.

     

        p {

         font-size: 18px; /**adjust font-size as required**/

         line-height: 1.5;

         }

     

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 15, 2012 4:10 AM   in reply to wittonend

    Are you just copying from Word and pasting into Dreamweaver because that could be the issue. Word never really transfers correctly over to Dreamweaver if you do that. Even if the code looks ok I have experienced strange things happening.

     

    I usually dump the text in simple-text(Mac) or notepad (PC) to get rid of the formating and then start from that point.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 15, 2012 5:42 AM   in reply to wittonend

    This just doesn't make any sense. Can you post the complete page code here and any css you might be using?

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 15, 2012 6:25 AM   in reply to wittonend

    It shrinks because you have line-height set at 1. Delete the line height.

     

     

    p {

    font-size: 12px;

    line-height: 1;

    }

     

     

    or set the line-height at something greater that the font-size like 20px

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 15, 2012 6:26 AM   in reply to osgood_

    Also don't set the height of the container, let the content set the height. This is not desk-top-publishing.

     

     

    #container {

     

              background-color: #FF6;

     

              height: 800px;

     

              width: 800px;

     

              margin-right: auto;

     

              margin-left: auto;

     

              position: relative;

     

              text-align: left;

     

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 17, 2012 9:53 AM   in reply to wittonend

    Try using a bigger font.  12px fonts are rarely used anymore because they are too small to be viewed comfortably on average displays.

     

    p {

    font-size: 18px;

    line-height: 28px;

    }

     

     

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points