Grow your CSS skills. Land your dream job.

Disappearing borders in IE6/IE7

  • # November 12, 2008 at 4:25 pm

    This is bizarre. I have a containing div that holds three smaller divs floated left (for columns). The HTML looks like this:

    Code:
    Content
    Content
    Content
     

    The empty div at the end is just a clear; I need it because without it, #bottom has no height.

    Anyway, #bottom has a top border. In IE6 and IE7, the border doesn’t appear. I determined that for some reason, the presence of the clearing div causes the border to disappear.

    Does anyone know why this is, or how to get around it? The presence of the clearing div shouldn’t have any effect on the border, right? In Safari and Firefox, the border always displays, regardless of the clear.

    # November 12, 2008 at 4:39 pm

    first of all try to remove the space entity in the clear div.
    Next can you post the css for the floats and bottom div

    # November 12, 2008 at 4:46 pm

    maybe add another div as a container and give that container a bottom-border??

    # November 12, 2008 at 4:57 pm
    "Jonz" wrote:
    first of all try to remove the space entity in the clear div.
    Next can you post the css for the floats and bottom div

    Removing the space doesn’t make any difference. I put it there so the clearing div isn’t completely empty.

    Here’s the CSS:

    Code:
    div#bottom {
    border-top: 1px solid #f0f1f5;
    padding: 8px 0;
    margin: 0 40px;
    }
    div.column {
    border-left: 1px solid #f0f1f5;
    color: #666;
    float: left;
    font: 15px Arial, Helvetica, sans-serif;
    min-height: 316px;
    padding: 0 24px;
    width: 223px;
    }
    .clear {
    clear: both;
    height: 0;
    line-height: 0;
    }
    # November 12, 2008 at 5:15 pm
    "ikthius" wrote:
    maybe add another div as a container and give that container a bottom-border??

    Ha! If I add another containing div, then the border on the original div (#bottom) shows up! What the heck?

    Code:
    Content
    Content
    Content
     

    How could that be? The <div> in the middle doesn’t have any styles, and all it does is hold the three columns and the clear…just like #bottom was doing before.

    I guess that works, but this must be a bug. Adding an element inside of #bottom should have NO effect on the visibility of the border.

    # November 13, 2008 at 5:31 am

    I gave you an idea last night about adding another div, however I never tested it……

    testing just your HTML & CSS and changing the colour of the border to black, it seems to work in IE6 & 8 not got 7 anymore.

    so I think your code was ok, do you have a screenshot of your problem?

    # November 13, 2008 at 2:02 pm

    This is very weird. It’s not just the top border missing, it’s the entire top half of the border. The solution is to apply a background color to the div (what??).

    Here’s a screenshot of the div with a red border applied on all sides, without any background color specified (the white background comes from the containing div that holds the whole page):

    [img]http://img222.imageshack.us/img222/6718/bordermissingbz1.th.jpg[/img]

    And here’s the same thing with a white background applied to the div itself:

    [img]http://img236.imageshack.us/img236/5514/borderfullzt6.th.jpg[/img]

    This is the code – it’s very simple:

    Code:
    Content
    Content
    Content
     
    Code:
    div#bottom {
    background: #fff;
    border: 1px solid red;
    padding: 8px 0;
    margin: 0 40px;
    }
    div.column {
    border-left: 1px solid #f0f1f5;
    color: #666;
    float: left;
    font: 15px Arial, Helvetica, sans-serif;
    min-height: 316px;
    padding: 0 24px;
    width: 223px;
    }

    That’s it! A containing div with a border, and three inner divs floated left with a clear underneath.

    This must be a bug, since it’s not even possible to specify a border that stops halfway in the middle of an element! :lol:

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

You must be logged in to reply to this topic.

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