Combining IE css hacks ?

Posted on 2009-04-29
Last Modified: 2012-05-06
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.

Question by:stephaneeybert
    1 Comment
    LVL 42

    Accepted Solution

    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;


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Why You Should Analyze Threat Actor TTPs

    After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

    Suggested Solutions

    Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
    When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
    In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
    In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…

    779 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now