IE6 is still relevant to web developers, as we all know. In this brief article, we are going to look at several common problems that IE can throw your way, as well as some recommended hacks to deal with them. Feel free to ask questions if something is not 100% clear.
1. Use DOCTYPE Declarations
It is always better to indicate doctype in the header of each html page:
<! DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 / / EN" "http://www.w3.org/TR/html4/strict.dtd">
<! DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Strict / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Don’t write any other characters before doctype (no gaps, no line breaks). Otherwise you will get strange fields in body and html tags.
Using this hack you can cure the vast number of problems with IE6 (for example, invisible or weird positioned blocks).
display: inline for floating blocks
Floating elements with margin can cause a well known bug in IE6, we mean double margin. For example, indicating the left margin as 5px we get 10px as a result;
display: inline fixes this problem and your CSS becomes valid.
hasLayout in properties
Many rendering bugs in IE6 (and also in IE7) can be corrected by
hasLayout. This is an internal feature of IE, which indicates how content must be aligned and positioned (relatively to other elements). This feature can be also used when you need to transform line item (e.g.,
<a>) into block or when transparency effects are needed. The easiest way to indicate this property is to set height or width (
zoom can also be used, but it’s not a standard CSS). It is recommended to specify the actual size of your block, and if it’s not possible (dynamically changing height or width), you can do this:
5. Fixing the repeated characters bug
This bag appears in lists and duplicates the last 1-3 signs of the last item in the list. There are some ways to fix it:
display: inlinefor floating elements;
margin-right:-3pxfor the last item in the list;
- Use conditional comments;
- Add an empty div in the last item of the list (sometimes, you must set
width: 90%or other appropriate width).
6. Use advanced CSS selectors for other browsers and standard selectors without percentage values for IE
Or you can just use
# element ( min-height: 40em; height: 40em; ) / * Ignored by IE6 * / # element [id] ( height: auto; )
body ( margin: 4% 0! important; margin: 40px 0; / * IE6 only * / )
If you consider these tips strange or too complicated – don’t hesitate to drop us a line. Web development professionals from Oxagile software development company are at your service on 24/7 basis.