esn studio

One of the problems we often encounter with front end development is a browser compatibility issue. And Internet Explorer seems to be the biggest offender of all when it comes to rendering CSS properly. Don’t get me wrong; I don’t have anything against Microsoft or Bill Gates specifically, it is just that I find it very frustrating when websites render correctly in Firefox and everything else but not in IE. There are quite a few versions of IE which are being used and therefore, you will need to test your website in various versions of Internet Explorer.

This is when MultipeIE comes in to save your day. MultipleIE is a Windows installer which allows you to install standalone IE3, IE4, IE5, IE5.5 and IE6 on a single computer along side IE 7 (or any IE version) without having to overwrite an existing version.

MutipleIE definitely is a life saver for me!

Note: You might also be interested in installing a standalone Internet Explorer 7 if you have got IE 6 installed with Windows.

Technorati Tags: front end development, css, cross browser compatibility, IE, Internet Explorer

I stumped upon Revised Image Replacement article on mezzoblue and thought I would give my two cents.

According to the article, there are quite a few image replacement methods with CSS.

1. Classic FIR
2. Single-pixel <img> Replacement
3. Radu Method
4. Leahy/Langridge Method
5. Phark Method
6. Phark Revisited
7. Dwyer Method
8. Gilder/Levin Method
9. Lindsay Method
10. Shea Enhancement

What I use:

I usually use a combination of Phark Revisited + Shea Enhancement methods for my headings, which, in my opinion, is the neatest and most semantic of all. I also use Lindsay Method to replace default form buttons with images.

What I don’t use:

I have never used Single-pixel <img> Replacement, Radu Method, Leahy/Langridge Method, Phark Method, Dwyer Method or Gilder/Levin Method of image replacement.

Technorati Tags: css, image replacement, mark-up, xhtml

The following CSS selectors are considered workarounds and hacks for specific web browsers.

IE 6 and below
* html {}
IE 7 and below
*:first-child+html {} * html {}
IE 7 only
*:first-child+html {}
IE 7 and modern browsers only
html>body {}
Modern browsers only (not IE 7)
html>/**/body {}
Recent Opera versions 9 and below
html:first-child {}

Source: CSS Hacks

Usage
If you want to add 5px padding to a div element called #comments specifically for IE 7, then you can use the following hack:

*:first-child+html #comments {
padding: 5px;
}

But if you want to apply the padding just for IE 6, then the following will do the trick:

* html #comments {
padding: 5px;
}

Note that CSS Hacks are not recommended due to their dependence on browser bugs and therefore they should only be used as the last resort.

A more comprehensive article on CSS Hacks can be found here.

Technorati Tags: css hacks, hacks, css, browsers compatibility, design, front-end

You know those tracing dotted lines (see above) which appear when you click on a link? I found out not too long ago that you can get rid of them easily just by adding the following into your stylesheet file.


a {
outline: 0;
}


Technorati Tags: css, stylesheet, tip, www

Has CSS bloomed? Without a doubt! Here’s yet another css showcase site with a clever (and easy-to-remember) domain name.

www.cssbloom.com

Technorati Tags: css, design, designs, web, www, showcase