Saturday, April 7, 2007

bug in IE

It's known that Microsoft Internet Explorer usually shows pages in a different way than good web programmers expect. Luckily those differences diminish when using XHTML Strict and CSS, but sometimes we are surprised for some huge bugs.

This is the case when trying to create an empty layer, something like that:
our_style {
height: 1px;
width: 100px;
background-color: black;
}
[...]
<div class="our_style"></div>

Obviously we expect something like a horizontal line, but IE increases our layer height to 10px 18px or whatever...

This time there is a easy solution for solving the bug, that is just adding a zero font size for the layer:

our_style {
font-size: 0px
height: 1px;
width: 100px;
background-color: black;
}

2 comments:

  1. Error:
    our_style {
    height: 1px;
    width: 100px;
    background-color: black;
    }


    Right:

    .our_style { font-size: 1px; background-color: #ffffff; width: 80%; height: 1px; margin-top: 5px; margin-bottom: 5px; padding-top: 0px; padding-bottom: 0px; border: 1px; border-bottom-style: solid; border-color: #dededf; border-width: 1px; }
    /* Bug in IE 6.0: the "background-color" (if diferent of color page) force the apparition of a "extra pixel" */

    ReplyDelete