Grow your CSS skills. Land your dream job.

IE 7 Float Bug (missing bottom border)

  • # October 22, 2008 at 8:30 am

    Looking through the posted IE7 Float related bugs on the internet, I haven’t found one that applies to the issue I am seeing with floats and IE7.

    I have a few places where I am floating 2 DIVS, and in one case, the left most, and the other case, the last DIV(furthest right) gets pushed 1 px down in IE 7. It is working fine in FireFox 3. It doesn’t matter what I change to the margin, padding, div height..ect.

    Ultimately it looses the bottom border of the link. Below is the code of the parent divs and the CSS of the "a link"

    Below is the code and website for viewing.

    Code:
    {SESSION}
    {SHOPPING_CART}

    CSS

    Code:

    #rightside {
    width: 150px;
    position: relative;
    float: right;
    text-align:center;
    }

    #leftside {
    width:250px;
    position:relative;
    float:left;
    text-align: center;
    padding:0px 0px 0px 20px;
    }

    Inside the div "rightside" is an nested div that has link <a href> with the following CSS:

    Code:
    color: #573457;
    background-color: #F5E3F5;
    border: 1px solid #F5E3F5;
    font-family:”Lucida Sans”, “Lucida Sans Unicode”, Verdana;
    padding: 2px;
    line-height: 20px;
    text-align: center;
    text-decoration: none;
    # October 22, 2008 at 2:52 pm

    No one knows why?

    # October 23, 2008 at 6:07 pm

    Wow, no one has come across this?

    # October 23, 2008 at 7:50 pm

    The nearest I’ve seen is when whitespace between <a> and </a> tags causes issues like that. For instance:

    This can result in a pixel line between elements before and after it:

    Code:

    whereas, this takes care of it:

    Code:
    ...

    I don’t expect that will help directly with your problem but maybe it will trigger something :)

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

You must be logged in to reply to this topic.

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