MODX Staff
.cssbox {
width: 255px !important; /* intended total box width - padding-right(next) */
width: 240px; /* IE Win = width - padding */
padding-right: 15px; /* the gap on the right edge of the image (not content padding) */
margin: 20px auto; /* use to position the box */
} 
FYI - I fixed this issue by going back to your sample CSS and restarting changes. The issue seems to start when I try to get the width of the box to appear the same width in IE and FF. Right now I have:
.cssbox { width: 255px !important; /* intended total box width - padding-right(next) */ width: 240px; /* IE Win = width - padding */ padding-right: 15px; /* the gap on the right edge of the image (not content padding) */ margin: 20px auto; /* use to position the box */ }
This works fine, everything lines up, etc, however in IE the box is much narrower than FF. In all honesty I think I can figure it out from here, but I think it would be great if the CSS was explained in more detail to explain what #’s are meant to be edited, which values must stay in sync, and which come from the image itself.
Thanks again for the great technique.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
The interesting thing about including this DOCTYPE in your page, is that it causes IE to render in a more standard, and acceptable way. When it’s not there, IE renders in what is called "quirks" mode. For example, without it, IE counts the width of the DIV as the content, plus the padding and border width! So suddenly, your 500px DIV is no longer 500px, but 500px minus the width of your border (for each side) and minus the width of your padding."
<!--[lte ie 6]> <link href="css/ie6.css" rel="stylesheet" type="text/css" /> <![endif]-->