CSS Cross Browser Issues

CSS Cross Browser Issues

Inner DIV is cut when it goes outside of its parent (negative margin)

The code

<div style="width: 640px; border: 1px solid black; margin-left: 100px;">	
	container
 
	<div style="border: 1px solid red; margin-left: -50px; background-color: orange;">	
		inside
	</div>
 
</div>

In Firefox:

But in IE 6:

Fix: the inside div should have a fixed width and position set to relative:

<div style="width: 640px; border: 1px solid black; margin-left: 100px;">	
	container
 
	<div style="border: 1px solid red; margin-left: -50px; background-color: orange; width: 689px; position: relative;">	
		inside
	</div>
 
</div>

Now in IE 6:

min-height CSS property with IE 6

selector {
  min-height:500px;
  height:auto !important;
  height:500px;
}

Source: dustindiaz.com: Min-Height Fast Hack

CSS selector with multiple classes in IE6

Not supported: The CSS selector li.class1.class2 will be interpreted as li.class2.

Relative/absolute positioning in IE 6 : overflow pb

Just make the parent relative as well.

Ref: http://snook.ca/archives/html_and_css/position_relative_overflow_ie/

h1 bottom border not displayed in IE 6

The container needs some layout:

width: 100%;

Transparent PNG in IE 6

http://bjorkoy.com/past/2007/4/8/the_easiest_way_to_png/

Created: January 02, 2008 Last modified: July 30, 2008