SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    825
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    IE: padding-bottom ignored..

    I have a div with a a few paragr's inside, very simple stuff.. div has padding:12px; but IE is ignoring the padding-bottom...

    (even if I gave bottom paragr mgn-btm:0 )

    code:

    Code:
    #privacy {height:164px; width:882px; overflow:auto; border:solid 3px #ccc; background:#FFF; color:#666;  
    					padding: 12px; line-height:normal; position:relative; }
    
            <div id="privacy">	
    	       <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa. Integer ut purus ac augue commodo commodo. Nunc nec mi eu justo tempor consectetuer.</p>
               
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa. Integer ut purus ac augue commodo commodo. Nunc nec mi eu justo tempor consectetuer.</p>
                
               <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa. Integer ut purus ac augue commodo commodo. Nunc nec mi eu justo tempor consectetuer.</p>
             </div>
    (why is the gray box for the code so narrow? surely it can be made wider.. and it would be good if text in it wrapped...;-)

    would appreciate suggestions..

    thank you..

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi maya,

    I am seeing the issue you described in IE8, unable to test in IE9 at the moment.

    I believe this is going to be a variant of the many overflow:auto bugs that are found in IE8. If you remove the fixed height and overflow:auto from the parent then the bug is not present.

    Looking through James Hopkins' site I was not able to find the exact bug (I may have overlooked it) but this one seems similar.

    http://jhop.me/ie8-bugs#verticalpercentagepadding

    To fix IE8 and make it work the same in all other browsers you would need to set a bottom-padding or border on the last child element. You will have to set a class on it since IE8 does not understand :last-child

    Here is your code with and without the fix.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Test Page</title>
    
    <style type="text/css">
    .privacy, .privacy2 {
        width: 600px;/*882px;*/
        height: 164px;
        overflow: auto;
        border: solid 3px #ccc;
        background: #FFF;
        color: #666;
        margin:10px;/*added for test case*/
        padding: 12px;
        line-height: normal;
        position: relative;
    }
    p {margin:0 0 12px; background:lime}
    
    /*--- Fix the IE8 Bug ---*/
    .privacy2 {
        padding: 12px 12px 0;/*removed bottom padding for test case*/
    }
    p.last {
        margin-bottom:0;
        border-bottom:12px solid #FFF;/*or padding-bottom*/
        background:cyan;
    }
    </style>
    
    </head>
    <body>
    
    <div class="privacy">    
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa. Integer ut purus ac augue commodo commodo. Nunc nec mi eu justo tempor consectetuer.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa. Integer ut purus ac augue commodo commodo. Nunc nec mi eu justo tempor consectetuer.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa. Integer ut purus ac augue commodo commodo. Nunc nec mi eu justo tempor consectetuer.</p>
    </div>
    
    <div class="privacy2">    
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa. Integer ut purus ac augue commodo commodo. Nunc nec mi eu justo tempor consectetuer.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa. Integer ut purus ac augue commodo commodo. Nunc nec mi eu justo tempor consectetuer.</p>
        <p class="last">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa. Integer ut purus ac augue commodo commodo. Nunc nec mi eu justo tempor consectetuer.</p>
    </div>
    
    </body>
    </html>

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hey maya,

    There is another way to fix this without needing a class on the last child element.

    My example above required the extra class because of the background colors I was using on the <p> tags. I was using margins to create visual separation with BG colors.

    You can do this with padding only by removing the bottom padding from the parent and setting bottom paddings on the <p>.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Test Page</title>
    
    <style type="text/css">
    #privacy {
        width: 600px;/*882px;*/
        height: 164px;
        overflow: auto;
        padding: 12px 12px 0;/*fix IE8*/
        background: #FFF;
        border: solid 3px #ccc;
    }
    #privacy p {
        margin: 0;
        padding: 0 0 12px;/*fix IE8*/
        color: #666;
    }
    </style>
    
    </head>
    <body>
    
    <div id="privacy">    
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. 
        Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa. Integer ut purus 
        ac augue commodo commodo. Nunc nec mi eu justo tempor consectetuer.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. 
        Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa. Integer ut purus 
        ac augue commodo commodo. Nunc nec mi eu justo tempor consectetuer.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. 
        Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa. Integer ut purus 
        ac augue commodo commodo. Nunc nec mi eu justo tempor consectetuer.</p>
    </div>
    
    </body>
    </html>

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi Ray.

    I have that bug in my personal list of IE8 bugs which came from a similar question in this thread last year. (I'll add it it to the tips in the reference.)

  5. #5
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    I knew I had seen that bug once before. Now that you pointed it out, I remember following along with that thread when it was active.

    >>I'll add it it to the tips in the reference

    Good idea

    I see that James got tied up on the CSS3 project and hasn't had time to keep the IE8 bug-list updated. He does mention that he will carry on with the IE8 bug updates (even after IE9's release) so it will be a solid reference.

    http://jhop.me/browsers/ie8/an-apology

    .

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Rayzur View Post

    I see that James got tied up on the CSS3 project and hasn't had time to keep the IE8 bug-list updated. He does mention that he will carry on with the IE8 bug updates (even after IE9's release) so it will be a solid reference.

    James Hopkins An apology

    .
    I wondered where James got to as he always seemed to pop up when an IE8 bug was mentioned


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •