Some simple CSS tips to overcome IE6/IE7 bugs
If you are a web designer or developer , you know how these two browsers causes one headache. When you are almost done with a website, you realize it’s look awful in IE6 or IE7 but looks okay in all other browsers. One is forced to start debugging , search the web etc etc for some quick fix or hacks. But I have come to realize, they are some basic things we tend to ignore in our CSS or HTML code that can fight most common IE6/IE7 bugs. The most common one are:
Valid XHTML
While Firefox and Safari renders non-valid XHTML correctly, IE6/IE7 doesn’t! Sometime you may forget to close a tag or declare a doc type, this causes mayhem in IE6/IE7. Always make sure your XHTML is valid, you can validate it over here.
Margins
IE6/IE7 interprets margins differently and it add it own margins to an element, in what is commonly known as the double margin bug in IE. This makes an element to display in an incorrect position etc To overcome this, always make sure you define margins for your elements in your CSS. Use the shorthand margin:0px 0px 0px 0px;
Another great way to overcome the margin issues is to declare *(margin:0px; padding:0px;} on top of your CSS.
Repetitive IDs
IE6/IE7 interprets repetitive IDs in a page as invalid. IDs should be unique in a specific page or page unlike classes where you can repeat them in a page.
For example:
#widget{
margin:0px 4px 3px 0px;
width:100px;
border:1px solid #ff0000;
}And in our HTML page we call id widget maybe twice, this return invalid markup and calls trouble in IE.To overcome the scenario,simply declare id widget as a class.
Clear
Clear, is to clear any float elements so that they will not overlap on each other. If you have nested div’s and you don’t want them to overlap each other , it’s good to use clear after each
div definition. You could write a clear class, for example:
.clear {
clear:both;
height:1px;
overflow:hidden;
}I know this is not much, but I hope it helps.