Link to home
Start Free TrialLog in
Avatar of stephaneeybert
stephaneeybert

asked on

Combining IE css hacks ?

Dear all,

I generate some css properties using my home made php cms.

In it I have two hacks to render the css properties.

One is the IE box model hack.

The first property "height:" is for browsers like Firefox, Mozilla and Opera that render correctly as they choke on the escape character (\) and therefore ignore the second and third properties. The second property "\height:" is for IE 5 and 6/quirks mode. The third property "he\ight:" will be read by escape friendly browsers (including IE 6 in non-quirks mode) and set the width back to 100px.

The php variable $value contains the original value of the height.

The php variable $IE6Value contains the same value plus the border value * 2 and the padding value * 2.

$IE6Value = $value plus ($border * 2) plus ($padding * 2);

$cssHeight = 'height: ' . $value . 'px; \height: ' . $IE6Value . 'px; he\ight: ' . $value . 'px';

The equivalent hack exists also for the width.

This box model hack works fine.

Now, the second hack is to have an extensible height.

Have an extensible height with a minimum value. This is so that a container height will extend with its content. It is specially important if the container has a graphical frame of background images. Note that the min-height and height auto important must be rendered before the height.

$cssHeight = 'min-height: ' . $cssHeight . '; height: auto !important; height:' . $cssHeight;

This second hack also works fine.

But what happens, is that these two hacks, combine, with the first one being seen twice in the second one.

For example, the first hack gives something like:

height: 25px; \height: 33px; he\ight: 25px; // for ie6 box model bug

And the second hack, instead of giving something like:

min-height: 25px; height: auto !important; height: 25px;

correctly (by merging the two hacks) gives gives something like:

min-height: 25px; \height: 33px; he\ight: 25px; height: auto !important; height: 25px; \height: 33px; he\ight: 25px;

These two hacks combined seem to work fine and the rendering in the browsers is fine too.

But I wondered if any of you had to deal with the two hacks combined and if there is another way to face the issue, and basically what you think about it.

Thanks
ASKER CERTIFIED SOLUTION
Avatar of David S.
David S.
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial