The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

IE 8 displays width/height of div differently

  • # September 1, 2009 at 3:16 pm

    Below is the code for this site ( … lenbr=2974)


    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


    # 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?

    background: url( repeat scroll 0 0;
    width: 200px;
    #content {
    padding:8px 12px;
    font-family: Trebuchet MS,Verdana,Arial,Helvetica,sans-serif;




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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed