Text changes when I zoom out

Discussion in 'HTML & Website Design' started by chrisj, Nov 12, 2010.

  1. #1
    The web page looks ok in IE8. But when I change the view from 100% to 75% the text shifts down the column and flows over the column bottom border line. How can I remedy this?
     
    chrisj, Nov 12, 2010 IP
  2. workingsmart

    workingsmart Well-Known Member

    Messages:
    411
    Likes Received:
    12
    Best Answers:
    9
    Trophy Points:
    120
    #2
    Can you provide a url?...

    This is usually due to font-size specification in your CSS.....
     
    workingsmart, Nov 12, 2010 IP
  3. chrisj

    chrisj Well-Known Member

    Messages:
    606
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #3
    Thanks for your reply.
    I added font-size to the css, yet the problem remains.

    It's probably my code. Can you offer another suggestion?

    <div class="col_1">
    
     <div id="box1">
       <p>TEXT text TEXT text Text Text Text TEXT
    </p>
     </div>
    <br/><br/>
     <div id="box2">
       <p>TEXT text TEXT text Text Text Text TEXT
    </p>
     </div>
    <br/><br/>
     <div id="box3">
       <p>TEXT text TEXT text Text Text Text TEXT
    </p>
     </div>
     </div>
    Code (markup):
    #box1 {
    width: 200px;
    font-size: 12px;
      margin: 15px 15px 25px 15px;
      padding: 5px;
      background-color: #;
      border:1px solid #;
    } 
    
    #box2 {
    width: 200px;
    font-size: 12px;
      margin: 15px 15px 15px 15px;
      padding: 5px 5px 5px 5px;
      background-color: #;
      border:1px solid #;
    } 
    
    #box3 {
    width: 200px;
    font-size: 12px;
      margin: 15px 15px 15px 15px;
      padding: 5px 5px 5px 5px;
      background-color: #;
      border:1px solid #;
    } 
    
    		.col_1 {
    		float: left;
    		font-size: 12px;
    		width: 224px;
    		height: 599px;
    		margin: 28px 5px 0px 0px;
    		padding: 0px 0px 0px 0px;
    		background:url(../images/Q9.jpg);
    		background-repeat: no-repeat;
    		background: #;
    		}
    Code (markup):
     
    chrisj, Nov 12, 2010 IP
  4. workingsmart

    workingsmart Well-Known Member

    Messages:
    411
    Likes Received:
    12
    Best Answers:
    9
    Trophy Points:
    120
    #4
    You adding the font-size property wasn't was I was stating...

    Can you PM me the URL?...
     
    workingsmart, Nov 12, 2010 IP
  5. chrisj

    chrisj Well-Known Member

    Messages:
    606
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #5
    Thanks again for your reponse.
    I don't know if I'm interested in providing the url at this time.
    Any other suggestions, via this forum, would be appreciated.
     
    chrisj, Nov 12, 2010 IP
  6. workingsmart

    workingsmart Well-Known Member

    Messages:
    411
    Likes Received:
    12
    Best Answers:
    9
    Trophy Points:
    120
    #6
    It's because you have a HEIGHT: property on COL_1 upon zooming +/- the font property is shifting the text out of the height boundary...

    you can add an OVERFLOW property with a proper definition depending on what you want it to do.

    If your font size is not changing appropriately with the size of the screen ( in IE only?? ) then more than likely you have a default font-size specified in your browser settings

    OR

    try changing font ====> px to ====> em

    Cheers!~
     
    workingsmart, Nov 12, 2010 IP