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

max-width CSS property with IE 6

selector {
  width: expression(document.getElementById('photo_img').clientWidth > 726 ? "727px" : "");
}

Source: Fixed: IE 6 min/max-width 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://allinthehead.com/retro/338/supersleight-jquery-plugin

but

background-position and background-repeat cannot be used with the IE6 png fix - no way around that. If you really NEED to do that, then feeding IE6 either gif or 8-bit png images is about the only way. Source: http://www.webdeveloper.com/forum/showthread.php?t=179330

Targeting IE

Conditional comments:

<!--[if IE]>
  	<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE6]>
  	<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

Hacks:

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

Inline-block

display: inline-block works well (even in IE6) on originally inline elements (span, a, img...)

Otherwise: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

Note: to display a list of thumbnails whose container has a fixed height (like an “img” contained in an “a”), don't forget to set the font-size to the height of the container. It will make it work even in IE6.

Checkbox/label alignment

Float the checkbox and the label.

Feedback

good post. thanks!
mark
Jun 20, 2010
#1
Check this out :
http://www.lyxia.org/blog/developpement/xhtmlcss/css-domptez-ie-et-les-autres-15
Spir
Jul 22, 2010
#2
Excellent site.
www.zapalanna.com
Apr 2, 2011
#3
good post. for more help fixing issues
http://fiverr.com/dosporto/fix-your-css-html-and-cross-browser-issues
dosporto
Aug 16, 2013
#4