10 Fixes that solve IE Issues

Introduction:

Whenever i designed my web page i have found out some issues that issues make my design is  not compatible with a wide range of browsers.So in this article i add some tips for making your website compatible with a wide range of browsers .

1. Solve invisibility problems:

If you face any problems like the image,text component are invisible sometimes, you add the property position:relative for the components to avoid the invisibility problems.

2. Use display: inline for floated elements

Floated elements with a margin can fire the famous IE6 double-margin bug, e.g. you specify a left margin of 5px and actually get 10px. Display:inline will fix the problem and, although it should not be required, your CSS remains valid.

3.  Alternative for colon in components ID:

The IE does not support colon for represents the components ID.If you want to refer the components ID which has colon you

replace the colon with the value \003A

For ex,

<h1 id="formID:titleID">Welcome to My world</h1>

Css for Mozilla:

h1#formID:titleID
{
//some properties
}

For IE:

h1#formID\0003AtitleID
{
//Some properties
}

4. Internet Explorer hacks

While conditional comments are better, you can also target some versions of Internet Explorer using the following syntax:

body
{
Width: 200px; /* All browsers */
*width: 250px; /* IE */
_width:300px; /* IE6 */
.width:200px; /* IE7 */
}

This technique is not W3C compliant (this is why you should use conditional comments instead) but sometimes, it is a real time saver.

5. Avoid percentage dimensions

Percentages confuse IE. Unless you can carefully size every parent element, they are probably best avoided. You can still use percentage values in other browsers with !important, e.g.

Body
{
height: 2%; !important
height: 20px; /*IE6 only*/
}

6. Another box model hack alternative

Box model hack is used to fix a rendering problem in pre-IE 6 browsers on PC, where by the border and padding are included in the width of an element, as opposed to added on. Number of CSS-based solutions has been put forward to remedy this, so here’s another one which we really like:

padding: 2em;
border: 1em solid green;
width: 20em;
width/**/:/**/ 14em;

The first width command is read by all browsers; the second by all browsers except IE5.x on PC. Because the second command comes second it takes precedence over the first – any command that comes second will always override a preceding command. So, how does all this work?

By placing empty comment tags (/**/) before the colons, IE5.0 will ignore the command. Likewise, by placing these empty comment tags after the colon, IE5.5 will ignore the command. By using these two rules in conjunction with each other, we can hide the command from all of IE5.x.

7.  Class

The class selector allows you to set multiple styles to the same element or tag in a document. For example, you might want to have certain sections of your text called out in different colors from the rest of the text in the document. You would assign your paragraphs with classes like this:

P.blue
{
background-color: #0000ff;
}
P.red
{
background-color: #ff0000;
}

Then, when you want to call the various classes you would use the CLASS attribute within the paragraph tag. Any tag that did not have a class attribute would be given the default style for that tag. For example:

<p>Welcome in blue background</p>
<p>Hello world in red background</p>

8. ID

The ID selector allows you to give a name to a specific style without associating it with a tag or other HTML element. You write an ID code like this

h3#indent1 {text-indent: 10px ;}

You associate an ID tag the same way you associate classes, within the element that should have that style:

<h3 id="indent1">This test for ID CSS</h3>

You can give your ID tags any grouping of letters and numbers that you would like.Keep in mind that HTML standards require that the ID must be unique.

Note:

One of the trickiest things about CSS is that it requires the use of formerly optional ending tags (as does XML). For example, if you have a style applied to a paragraph tag <p>, the browser may not know where to end that style if you do not include the ending tag </p>.

9.  Class and ID together

If we need to assign the same style class or id we can assign different style for each one with using classes and ID together. For ex,

<h1 id="blueheaderId" class="blue">Welcome to CSS</h1>
h1#blueheaderId.blue {color: blue ;}

10. Refractor your code

Often, it can take longer to fix than re-think a layout problem. Minor alterations to the HTML and simpler CSS are often more effective. This may mean you abandon perfectly legitimate code, but fewer long-term issues will arise and you know how to handle the problem in future.

Have I missed your favorites IE fix? Comments and suggestions welcome.