Expressing IT

A few months earlier we saw , how we could include a piece of CSS that would be visible to IE6 only(For your IEs Only ). There are other ways to achieve this as well. Simply include a separate CSS, specific to your target IE. this could be achieved with what is called as Conditional Comments.

Conditional Comments is a way to detect the browser type and version. Browser detection is performed to ensure that the content presented to the browser specific. Browser detection can be done using many different techniques. This method has several advantages over earlier methods, that included style switching using javascript. To list important few, would be;

• Scripting is not required
• Cross-browser

How do we do this?

Do something in IE 5 only
<!--[if IE 5]> Welcome to Internet Explorer 5. <![endif]-->

Do something in All IE versions
<!--[if IE]>
<link href="css/ie.css" rel="Stylesheet" type="text/css" />
<![endif]-->

Do something in All IE versions newer that IE 5
<!--[if gte IE 5]>
<script type="text/javascript"><!--
alert("Congratulations! You are running Internet Explorer 5 or greater.");<br />
// --></script>
<![endif]-->

For more conditional vartiations , read this info on MSDN :
About Conditional Comment

If you have been writing CSS for  while, you would have experience those times when you literally pull your hair  when your CSS layouts looked fine in all the new browsers ( I mean browsers later than IE6) , but IE 6 throws a  tantrum. You struggle hard to adjust your CSS but it doesn’t work … Well! Try These  HACKs…

1. Underscore Hack :-
By definition, CSS 2.1 specification allows underscore (“_”) in CSS identifiers. But many browsers still seem to ignore any identifies proceeded with an underscore but IE. This IE’s bug/feature thus becomes a very clear way to set CSS properties for IEs only. so remember, A CSS property written with the underscore on the start is visible for Internet Explorer (all versions but IE 7)

#box {
min-height: 300px;
height: auto;
_height: 300px; /* all IE versions less than version 7 */
...
}

View demonstration of this underscore hack

Also, The min-height hack for IE6 uses the underscore hack, check out

2. Hash(#) Hack :-
Like the underscore hack, this one is too is for IEs oly, with a good difference, property identifiers preceded with # on the start is visible for All IE versions , IE7 included and is invisible for any other standard browser.

.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute; /* For IE only */
#top: 50%; /* For IE only */
#left:50%; /* For IE only */
}

This hack has been used nicely to demonstrate a cross browser vertical align solution, have a look at this article to find our more

3. CSS for IE6 only:-
#my_bad_behaving_div {
/*something for all browsers*/
}
/* Lets use the * html hack so only IE6 reads the rule */
* html #my_bad_behaving_div{
/*something for IE6 only*/
}

These hacks seems heaven sent, when  nothing else works… If any of these hacks saves your life  someday,  dont forget to treat me to a coffee:)

I had this problem  where , if you had a mouseover event on a division (DIV)  and that division , for some good reason had to be transparent(as In my case, where it was required to display some tags over an image on mouseover of this transparent division),  IE failed to trigger the mouseover event ( Worked fine in FireFox).

Tried several options … many of which was just a desperate attempt to get the event to fire in IE. One of the sensible ones, that I thought might work was to set a background color to the division and set the opacity to zero … Well! dint work!

The final solution which seemed  to work and not disturb the functionality I required was to put a one pixel  repeated/transparent background image in that division

… Silly! but now IE seems happy.

Internet Explorer automatically adds padding to buttons in HTML forms.
This space stretches according to the length of the button’s text.

The solution is  add overflow to its style …. i.e.

.button {
overflow:visible;
padding-left:10px !important;
padding-right:10px !important;
… any other style for this button…
}

OR

< input type="submit" value="Internet explorer respects my padding" style="overflow:visible;  padding-left:10px !important; padding-right:10px !important;" >;

Simple … To correct this problem use display:inline.

div {float:left;margin:40px;display:inline;}

If you have a floated element such as a div and you place margin-right or margin-left on that element, Internet Explorer 6.0 will double that margin value, messing up the html/css layout. To fix this simply add display:inline; to your floating element.