IE 8 displays width/height of div differently

[redleaf]

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.

[redleaf]

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

[Author]

Posts