CSS Cross Browser Issues

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:

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

Source: dustindiaz.com: Min-Height Fast Hack

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

Source: Fixed: IE 6 min/max-width hack

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

Just make the parent relative as well.

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

The container needs some layout:

width: 100%;

• http://archivist.incutio.com/viewlist/css-discuss/62596
• http://www.satzansatz.de/cssd/onhavinglayout.html

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

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 */
}

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.

Float the checkbox and the label.

• Source: http://stackoverflow.com/questions/306252/how-to-align-checkboxes-and-their-labels-consistently-cross-browsers