Box Model Hack?

[jwalker80]

Hi

#button
{
width:80px;
height:48px;
float:left;
background-image:url(..images/blank.gif);
}

I have this code that needs to be modified for IE to work, the width has to be reduced for the button divs to fit in IE. I think this has to do with the "box model" but im not sure how to implement it, anyone help?

[karinne]

a simple search will find you all the answers you need

[ukgeoff]

Don't use any 'hacks'. They are not necessary and will only give you problems later.

The correct way to achieve the sort of adjustments you are after for IE in any situation is to use the conditional statement that only IE understands and load in an IE specific css file. You do this after your default css file so that any IE requirements are over written.

The method takes the form:

Code: Select all

<!--[if IE]>
<link rel="StyleSheet" type="text/css" href="ieonly.css" />
<![endif]-->

Note that you can place things like 'lte', less than equal, between the 'if' and 'IE' and you can have version numbers after the 'IE'

[Ryan Fait]

I agree. I do my absolute best to avoid using hacks.

[mreine]

Hard to say, for sure, without a working example, but I think you can solve the issue by adding another wrapper div and assigning padding or margin or a width to that div instead of the button div. It's not really a hack in the true sense of what hacks are. It's just a workaround that will function even if IE decides to translate the box model correctly. If anyone complains about the extra "unnecessary" div, they can get a life. Again, I'd have to play with this to remember exactly how it went, but in the meantime you can give it a shot.