Andres Gallo Software Engineer

Coding multi-browser consistency

Internet Explorer is the most popular web browser in the world, and at the same time perhaps also the buggiest of all the popular browsers, making our jobs much harder throughout the creation of a website. In fact IE6 which is three generations behind the current IE, is still immensely popular (stats ). For the last two years, I have been working for a company whose user-base is for the most part IE6 based, and though it may sound like a terrible burden, I have felt forced to learn many tricks that make working with IE6 a breeze…well almost. This rather than a burden, however, has been an educational blessing.

With that said, here is a short list of some of these tricks I have learnt, furthermore I would appreciate feedback.

Multiple IE:

Multiple IE is a freeware software which may be downloaded here. The advantage of having multiple IE is that you will be able to use various versions of IE on one machine. (WARNING: I have had some issues on some computers, in which multiple IE affects the functionality of IE8 input boxes). In spite of the big warning, uninstalling and reinstalling IE can fix the problem. This program is definitely worth a try for the time and pain it can save. I use it only to have a version of IE6 to test sites in, while simultaneously I upgrade the real IE to IE8 which has an IE7 rendering mode. It’s beautiful…It’s like having IE6, IE7 and IE8 in a single machine.

Conditional comments:

I avoid using these as much as I can, the reason being, they make the code look really ugly. These are useful however if the only way to fix something is by adding special content only IE can read. They may also be used for the oppossite, so you can actually use these to add open and close comments within the conditional comments forcing IE to instead ignore the content. I can’t remember the last time I used this. I don’t recommend this method, but I am sure in some cases it could be useful.

Example

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

<!--[if IE]>   Read if this is IE <![endif]--> <!--[if IE 5]>   Read if this is IE 5 <![endif]--> <!--[if lt IE 6]>   Read if this is IE but a previous version to IE 6 <![endif]--> <!-- the last example has an "lt," which may be replaced with "gt," "lte," or "gte" for different scenarios -->   <!-- "lt" is for a version previous to that which the number indicates --> <!-- "gt" is for a version greater to that which the number indicates --> <!-- "lte" is for a version previous to that which the number indicates or that version indicated --> <!-- "gte" is for a version greater to that which the number indicates or that version indicated -->

Example where we make IE ignore content

1 2 3 4 5 6 7 8

<!--[if IE]>   <!-- <![endif]-->     <p> IE will ignore this paragraph      tag while other browsers read it </p> <!--[if IE]>   --> <![endif]-->

HTC Files:

I have a love and hate relationship with these files. I really dislike that using these my CSS won’t validate, as they require the IE only CSS property, “behavior.” If CSS validation is important to you, you can use a separate CSS file just for this, and have it inside conditional comments. The reason I love these, is because they give IE6 and above some of the features it misses that I use the most in modern browsers, while modern browsers which don’t need the fix, completely ignore the fix file. The fixes these files bring include:

• Hover, focus, and active pseudo class abilities up to standars
• Ppng transparency for IE6
• Rounded corners

The HTC files I use on almost everything are this hover fix file for IE and this transparency fix also for IE. There is also an HTC file for rounded corners which I have never used, so I don’t know how well that one works. The benefits these files bring should help developers avoid the need for unnecessary markup.
The hover HTC brings the hover and active pseudo classes up to standards for IE6 and above, furthermore, version 2 also adds focus up to standards. I have to admit however, I noticed a drop in performance using version 2,while using the hover pseudo class in the input fields in large forms; versions 1 and 3 are seamless.
The IEPNGalpha fix HTC brings transparency to PNG images. It works perfectly for the most part. I say for the most part because one time I had a big div to which I applied this fix. I wanted a transparent image in the background, and though it worked it rendered the links nested within it useless as if there was an invisible layer over them. Making the links “position:relative” fixed the problem however. I however recommend using this only, when png transparency is really needed. In many cases a transparent GIF will do and needs no hacks.
When using HTC files, do understand that these work relative to the page, rather than relative to the CSS in which they are called. It is for this reason, that I recommend using root relative paths when using HTC files.

Calling an HTC file example

1 2	selector {       behavior: url(pathToFile.htc);}

Important Hack:

This is my favorite hack, and it is not because it is “important.” The reason I like it, is because it allows us to give IE6 special CSS treatment. In other words, through this, we are exploiting IE6’s inability to understand the !important command. The logic here is targeting different browsers based on what they can see. If you wanted only to understand something for example you could use the CSS pseudo classes only firefox understands which include “first-of-type,” and “last-of-type.” Another great use of the important hack is that it can also be used to mimic “min-height” and “min-width” across the browsers.
IE6 does not support “min-height” or “min-width,” for example. In IE6 parent elements stretch beyond their given height if the child elements don’t fit, while modern browsers in such scenario have their child elements appear beyond the height of the parent element. This poses a problem for pages that have dynamic content, as it is usually impossible to foretell the height of the content. The solution is to not set a height, that way the parent div of the content stretches along with it, but then what if you want a an element to never display shorter than a given height. That’s where “min-height” comes in. IE6 does not understand min height but does stretch its parent elements to accommodate child elements anyways, therefore you can set a “min-height” for modern browsers, a “height” for modern browsers, and a “height” for IE 6.

Example

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

.parentDiv {     min-height:400px;     /*Div will always be at least this tall*/               height:auto !important;       /*modern browsers see this because of the !important*/             height:400px;       /*same as the min-height, which is good for IE6 as it     stretches for content.  IE6 ignores !important and     reads the last declaration of height*/     } .childContent {     height:600;}

Giving IE6, 7,and modern browsers special CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

<!--As I mentioned, IE6 will ignore the !important always reading the last declaration of any attribute. Other browsers will read that which has the !important declaration over the other repeated attributes--> <div class="someClassName">   <img id="img1" src="someImage1" alt="" />   <img id="img2" src="someImage2" alt="" />   <img id="img3" src="someImage3" alt="" /> </div> <!-- this 'trick' does not always work as is the case for the image in the middle--> <!--in this example im gonna manipulate #img1, with different css for each browser--> <style type="text/css">   .someClassName #img1{     width:100px !important;     /*IE7 will see 100 because of     important declaration*/         width:200px;     /*IE6 will read 200 as this is the last     width declaration*/     }   .someClassName img:first-of-type{     width:300 !important;     /*the most modern browsers will see this,     as they support these more advanced CSS     pseudo classes, while others like IE     can't make sense of this*/} </style>

Zero space position relative:

This hack is very simple. In many cases you may want to move/position an item to a different place. Position absolute may not be flexible enough in some situations, and position relative still leaves a gap where the object should have been originally. A solution is to make a parent tag with no height. If the parent is positioned relative, the child element can then be positioned absolute with the benefits of both absolute and relative positioning. It is not exactly something I recommend for clean code, but I have found this to be a great solution when time is tight and in some cases it can even make code cleaner.

Example

1 2 3 4 5 6 7 8 9 10 11

<style type="text/css">   .justAddedasParent {position:relative;}   .childElementtobeMoved {       position:absolute;       top:5px;left:5px;}   </style> <div class=”justAddedasParent”>   <input type=”submit” class=”childElementtobeMoved” /> </div>

Transparency:

This one is very popular. I don’t think I need to explain it. Below is what you need to add some transparency to your elements, and accross all popular browsers.

Example

1 2 3 4 5

.selector{   filter: alpha(opacity=50);   -khtml-opacity: 0.5;   -moz-opacity: 0.5;       opacity: 0.5;}

Curvy Corners:

Curvy Corners is an awesome javascript tool which allows you to do rounded corners using CSS3 on IE which has no support for CSS3. This is one tool I use very often, though it is not perfect. It functions perfect for most scenarios, but I have had problems with it not resizing to accommodate for a child element that resizes dynamically; that however, is a rare scenario.

Preload Images:

This is a very useful technique, especially for avoiding those dreadful flickering hover image rollovers. That flicker is due to the time it takes the browser to get the image from the server, however, the dreadful flicker can be avoided if we somehow preload the image before the user “hovers” the element with the rollover image. To preload images, we place a div at the bottom of the homepage that contains all of the images we want to preload. Once the div is added it is hidden so it does not show. Placing the div last in the page means it does not interrupt with the loading of the pages content. Unlike javascript preloaders, this method is quicker and more likely to work as there is no dependency on the user having javascript enabled.

Example

1 2 3 4 5

<div class=”imageContainer” style=”visibility:hidden; height:0px;”>   <img alt=”preloaded Image” src=”pathToImage” />   <img alt=”preloaded Image2” src=”pathToImage2” />   <!--height 0px is placed so the hidden div takes no space--> </div>

Changing input fields from “text” to “password” via Javascript.

If you are wondering why? the reason is simple; it is those times where you don’t want to have labels next to the login textboxes, but instead have the text “username,” and “password” inside the corresponding textbox. In addition to that, I don’t see who would want their password to be displayed in plain text as they type it, and so that’s why the input field type should be dynamically changed from “text” to “password.” The problem here however is that IE will not change the “type” of an input field after it has been loaded, while on the other hand doing so for all modern browser requires only about one line of javascript. In this scenario having two textboxes is the trick towards meeting the goal in all major browsers. By default you have the fake one hidden, and the password one displaying in the case javascript is disabled. In the javascript the fake text input shows by default, while the real password input is hidden. On keypress or click, the fake text input should be switching to the real password input field.

This is the list of tricks I use most often. I recommend avoiding those tricks that involve extra markup, but I know in some cases those tricks are usefull which is why I included some of them here (conditional comments).

All feedback is appreciated.

Share this: