[Last Call] Learn how to a build a cloud-first strategyRegister Now

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 428
  • Last Modified:

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.

1 Solution
David S.Commented:
Are you really using IE in quirks mode? IE8 is out now and most people have stopped supporting IE5.x.  (I still fix things for IE5.5 if it's not much extra work.)

Firefox, Mozilla, and all but extremely old versions of Opera (e.g. version 5) handle the escape fine. Old versions of IE are the only browsers that anybody still supports that have trouble with it.

This should be sufficient:

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

Reference: http://css-discuss.incutio.com/?page=BoxModelHack

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now