Javascript Disabled Detected

You currently have javascript disabled. Several functions may not work. Please re-enable javascript to access full functionality.

Ie Html If Statements

Started by flyingfisch , Jan 16 2013 03:43 PM

website development

Please log in to reply

1 reply to this topic

#1 flyingfisch

Casio Maniac

Deputy
1891 posts

Gender:Male
Location:OH,USA
Interests:Aviation, Skiing, Programming, Mountain Biking.
Calculators:
fx-9860GII
fx-CG10 PRIZM

Posted 16 January 2013 - 03:43 PM

I am trying to get CSS box shadow to work on all browsers. Looking at some tutorials, I find that the way they make it work for IE is by doing this in the HTML:

   <!--[if lt IE 7 ]>   <body class="ie6">          <![endif]-->
   <!--[if IE 7 ]>      <body class="ie7">          <![endif]-->
   <!--[if IE 8 ]>      <body class="ie8">          <![endif]-->
   <!--[if IE 9 ]>      <body class="ie9">          <![endif]-->
   <!--[if (gt IE 9) ]> <body class="modern">       <![endif]-->
   <!--[!(IE)]><!-->    <body class="notIE modern"> <!--<![endif]-->

And then having the CSS look like this:

#box {
    box-shadow: 0 0 15px #cccccc;
   -webkit-box-shadow: 0 0 15px #cccccc;
   -moz-box-shadow: 0 0 15px #cccccc;
}	

body.ie6 #box,
body.ie7 #box,
body.ie8 #box {
   zoom: 1;
   filter: progid:DXImageTransform.Microsoft.Shadow(Color=#eeeeee, Strength=15, Direction=0),
           progid:DXImageTransform.Microsoft.Shadow(Color=#eeeeee, Strength=15, Direction=90),
           progid:DXImageTransform.Microsoft.Shadow(Color=#eeeeee, Strength=15, Direction=180),
           progid:DXImageTransform.Microsoft.Shadow(Color=#eeeeee, Strength=15, Direction=270);
}

Is there a reason that they don't just do this, without any HTML if statements?

#box {
    box-shadow: 0 0 15px #cccccc;
   -webkit-box-shadow: 0 0 15px #cccccc;
   -moz-box-shadow: 0 0 15px #cccccc;
/* IE stuff */
   zoom: 1;
   filter: progid:DXImageTransform.Microsoft.Shadow(Color=#eeeeee, Strength=15, Direction=0),
           progid:DXImageTransform.Microsoft.Shadow(Color=#eeeeee, Strength=15, Direction=90),
           progid:DXImageTransform.Microsoft.Shadow(Color=#eeeeee, Strength=15, Direction=180),
           progid:DXImageTransform.Microsoft.Shadow(Color=#eeeeee, Strength=15, Direction=270);

}

Back to top

#2 MicroPro

Casio Overlord

Deputy
640 posts

Gender:Male
Location:Iran
Calculators:
Casio ClassPad 300

Posted 17 January 2013 - 01:02 PM

I don't remember exactly but I think zoom: 1; causes some problems with the zooming functionality of the browsers and/or overflowing content. The problem is not only with zoom, but various other things such as layouts and the stuff might behave different with other browsers so this is necessary.

In some cases, each distinct version of IE prior to 9 behaves differently!! So even the use of -, _, and * prefixed rules might be necessary.

For `filter`, maybe they want the css be validated so they don't put extra rules there.