02 ноември 2010, вторник

Negative Margin Bug fix in ie6

Developers move a blog from its actual position to higher position using negative margin. (margin-top:-10px;) This renders properly in all the browser except internet explorer 6. When you give negative margin, the position of the block is comeing over the existing block.

Example
.div1 {
width:100px;
float:left;
}
.div2 {
margin-top:-100px;
}

In the above example, .div2 block will be over the .bc block. But in ie6 .div1 block will be over than the .div2 block and .div2 block will get hidden. Here is a simple hack to display the block on top.

How to use:
.div2 {
margin-top:-100px;
position:relative;
}

Add position relative to the style of the div with negative margin. This will work in all the browsers.