Grow your CSS skills. Land your dream job.

IE 8 displays width/height of div differently

  • # September 1, 2009 at 3:16 pm

    Below is the code for this site (http://netimpact.org/displaycommon.cfm? … lenbr=2974)

    Code:

    The size of the div box (with the transparent background) atop the image has a completely different width/height in IE 8 than it does in FF or Chrome. I know that IE does funky things with padding and margins, but thought that IE8 solved the box model problem. Can’t figure this out for the life of me.

    Any insights into why the box would have a different width/height in IE8

    Cheers.

    # September 1, 2009 at 5:54 pm

    Well I found a solution to the problem, though it seems to be a bloated solution. I just wrapped the content div in a container, and applied the padding to the inside div and the width to the container. It now displays the exact same size in IE, Firefox and Chrome. Thoughts? Is this an OK solution?

    Code:
    #container{
    background: url(http://www.netimpact.org/associations/4342/files/membership/transpBlack.png) repeat scroll 0 0;
    width: 200px;
    left:496px;
    top:19px;
    position:relative;
    }
    #content {
    padding:8px 12px;
    font-family: Trebuchet MS,Verdana,Arial,Helvetica,sans-serif;
    font-size:13px;
    }
    Code:

    CONTENT

    Thanks,

    Redleaf

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".