views:

45

answers:

3

This sounds pretty simple, but I am stuck. I need to set a DIV to be 434 pixels wide in IE8. The following is my code. This works in FF, but IE8 always renders the DIV with a width of 414 pixels. Why does it chop off 20 pixels?

<html>
<head>
    <style type="text/css">
    #box
    {
        width:434px;
        background-color:red;
        margin:0;
        padding:0;
    }

    </style>
</head>
<body>
    <div id="box">&nbsp;</div>
</body>
</html>

I've also tried it in strict mode, with the same result.

A: 

IE does weird things with scroll bars, and accounts those in the width. What happens when you take the   out?

Ryan Ternier
I added overflow:hidden to both BODY and #box, with no change.
elmonty
A: 

Elmonty, please look how not only width but height is shorter in IE8. I think this is a common rendering issue. The canvas in IE8 will show you the objects shorter than the other browsers do. As an example, load this page in both browsers and Alt+Tab between both and you will see what is going on...

Hope that helps,

Ramon Araujo
A: 
loxxy
Could you please explain why IE8 interprets both specifications different?
Ramon Araujo
Ramon, it doesn't differ. I just rechecked the place where this had solved my problem....It was actually in context to one of parent elements where it cancelled out the padding set by the parent. Sorry...my bad, spoke without thinking.
loxxy