• Visitors can check out the Forum FAQ by clicking this link. You have to register before you can post: click the REGISTER link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below. View our Forum Privacy Policy.
  • Want to receive the latest contracting news and advice straight to your inbox? Sign up to the ContractorUK newsletter here. Every sign up will also be entered into a draw to WIN £100 Amazon vouchers!

Wierd CCS problem. Part of text outside containing DIVS

Collapse
X
  •  
  • Filter
  • Time
  • Show
Clear All
new posts

    Wierd CCS problem. Part of text outside containing DIVS

    Cut it down a bit to make it clearer but have a four column thing with a background image on an HTML page. I have cut and pasted (three times just to be sure!) the style and HTML from another page that works in all browsers.

    style:
    .content-last {float:left; width:992px; height:175px; margin-left:0px; background-image:url('images/main_lower.png'); background-repeat:no-repeat;}
    .content-lastbox {float:left; width:248px; height:175px;}
    .content-lastbox p {float:none; padding-left:20px; font-size:16px; font-weight:normal; padding-top:5px;}

    HTML:
    <div class="content-last">
    <div class="content-lastbox">
    <p>Line 1<br>garbage</p>
    </div>
    <div class="content-lastbox">
    <p>Line 2<br>tripe here</p>
    </div>
    <div class="content-lastbox">
    <p>Line 3<br>things</p>
    </div>
    <div class="content-lastbox">
    <p>Line 4<br>Rubbish<br>More rubbish</p>
    </div>
    </div>

    This page works in all browsers except IE when the last four letters "bish" also appears below the box. The last column is a line taller but the div and the containing div are of sufficient height so why would just a small part of one line somehow overflow them? Much ta for any brill ideas.
    bloggoth

    If everything isn't black and white, I say, 'Why the hell not?'
    John Wayne (My guru, not to be confused with my beloved prophet Jeremy Clarkson)

    #2
    Cant replicate that here on IE 9, displays ok. What does your DOCTYPE declaration say?

    So does the below display wrong in your IE:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
    <head>
    <style type="text/css">
    .content-last {float:left; width:992px; height:175px; margin-left:0px; background-color:Red; background-repeat:no-repeat;}
     .content-lastbox {float:left; width:248px; height:175px;}
     .content-lastbox p {float:none; padding-left:20px; font-size:16px; font-weight:normal; padding-top:5px;}
    </style>
    </head>
    <body>
    <div class="content-last">
     <div class="content-lastbox">
     <p>Line 1<br>garbage</p>
     </div>
     <div class="content-lastbox">
     <p>Line 2<br>tripe here</p>
     </div>
     <div class="content-lastbox">
     <p>Line 3<br>things</p>
     </div>
     <div class="content-lastbox">
     <p>Line 4<br>Rubbish<br>More rubbish</p>
     </div>
     </div>
    </body>
    <html>

    Comment


      #3
      Cheers durbs. That fragment displays ok. I was trying to illustrate general problem and get general theories rather than post entire long webpage and expect somebody trawl through code. Ran page through a checker and all the previous elements open/close matched ok.

      Sorted problem by sticking totally unecessary div around it. With CSS what's one more unecessary bit of stuff matter?
      Last edited by xoggoth; 24 January 2013, 11:20.
      bloggoth

      If everything isn't black and white, I say, 'Why the hell not?'
      John Wayne (My guru, not to be confused with my beloved prophet Jeremy Clarkson)

      Comment


        #4
        Are there comments, or other non-displayed elements such as hidden <input> fields, in the page? If so it could be one of the old IE duplicate characters bugs: IE6 Duplicate Characters Bug - CSS fixes and workarounds The IE Word Wrap Doppelganger Bug - SitePoint

        Try adding display: inline; to the rules for the two floated elements. This won't break anything else, but will bring older versions of IE to heel.

        Comment


          #5
          Cheers Nick, will do. That certainly looks like the problem even if this is IE9!
          bloggoth

          If everything isn't black and white, I say, 'Why the hell not?'
          John Wayne (My guru, not to be confused with my beloved prophet Jeremy Clarkson)

          Comment

          Working...
          X