Grow your CSS skills. Land your dream job.

IE7 Padding No Wrap Issue

  • # August 9, 2010 at 3:09 pm

    How can I prevent the left padding from being lost in IE7 (IE8 compatibility mode) in the following example once the element jumps to the next line down?

    http://www.andrewherrick.com/spike/ie7paddingwrap.html

    # August 10, 2010 at 4:26 am

    Hi ajcool123,

    here i got it and below is the code for it….
    Cheers :)

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>aj</title>

    <style type="text/css">
    * {
    margin: 0;
    padding: 0;
    }
    iframe {
    display: none
    }
    .wrap {
    width: 210px;
    }
    .box {
    float: left;
    width: 100%;
    }
    .elm {
    float: left;
    background-color: #333;
    color: #fff;
    line-height: 30px;
    font-weight: bold;
    padding: 3px 4px;
    margin: 2px 2px 2px 0px;
    white-space: nowrap;
    }
    .clear {
    display: block;
    clear: both;
    }
    </style>

    </head>
    <body>
    <div class="wrap">
    <div class="box">
    <a href="#" class="elm">test1</a>
    <a href="#" class="elm">test12</a>
    <a href="#" class="elm">test123</a>
    <a href="#" class="elm">test1234</a>
    <a href="#" class="elm">test12345</a>
    <a href="#" class="elm">test1</a>
    <a href="#" class="elm">test12</a>
    <a href="#" class="elm">test123</a>
    <a href="#" class="elm">test1234</a>
    <a href="#" class="elm">test12345</a>
    <a href="#" class="elm">test1</a>
    <a href="#" class="elm">test12</a>
    <a href="#" class="elm">test123</a>
    <a href="#" class="elm">test1234</a>
    <a href="#" class="elm">test12345</a>
    </div>
    <span class="clear"></span>
    </div>
    </body>
    </html>

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".