If you're having issues with Internet Explorer not honoring your widths, heights, paddings, and margins on elements in your layout, add this bit of code to your style/override:
* { zoom: 1; }
The
zoom property only works in IE and
* { zoom: 1; } is telling the browser to render every element at 100%. You can play around with giving
zoom other values and it's pretty cool because it will enlarge (values greater than 1) or shrink (values between 0 and 1) the element, BUT it will only render that way in IE. No other browser supports the property. So, basically, it's a hack, but it will save you a lot of headaches if you don't want to sit there figuring out where to add
min-width on each element.
ETA: I've also found that mass setting the
position to relative resolves a lot of issues in IE as well. So, putting them together:
* { position: relative; zoom: 1; }
Make sure you put this one at the TOP of your style/override because if the positioning is already set for some elements, you'll want to keep that in-tact. The only problem with doing this, though, is that it can make certain elements render a little wonky, like they're just floating off to the side. To fix this, go find the rule for the element's type in the style/override (or add a rule for the type if there isn't one) and switch it to
position: static;
which is the default for most elements.