IE 8 and Firefox problem

[forum_amnesiac]

This is a 2 part question

1 - I am using the following CSS for a 3 column layout and I need to know how to get it work for both IE 8 and Firefox.

This is the code, I've indicated what line I put in to make it work in IE 8.

 #content {
	height: auto;
	width: 100%;
	overflow: hidden;
	background-color: #F9F9FD;
	border:0;
}

#leftBlock1 {
	width: 5%;
	height: auto;
	background-color: #B3B3D9;
	float: left;
	padding:  0 1em;
}

#leftBlock2 {
	width: 10%;
	height: auto;
	background-color: #9999CC;
	float: left;
	padding: 0 1em;
}

#mainBlock {
	height: auto;
	background-color: #F9F9FD;
	padding: 0 1em;
	float: left;			/* THIS WORKS IN IE 8 * - REMOVE IT AND IT WORKS IN FIREFOX */
  	overflow: hidden;		
}

The attached images show how it appears in the 2 browsers, when the float: left; is not in the #mainBlock section the 'wrong' image is displayed in IE 8 , the 'right' image is displayed in Firefox.

The situation is reversed when float: left; is included.

Is there a way to get this to display correctly in both browsers?

2 - I want to get rid of the space between the 2 image blocks, this is a space between the layout of #leftBlock2 and #mainBlock.

[traq]

Am I correct that: your css works in IE with the float:left line, and in FF without?

If so, remove the line from your stylesheet (so it works in FF) and put it in its own stylesheet:
ieonly.css

#mainblock{ float: left; }

Then, link to the stylesheet like so:

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

IE will follow the link, but all others will ignore it as a comment. I've found this invaluable. Good luck!

[forum_amnesiac]

Nice trick that.

Any ideas how to get rid of that annoying space between the 2 sets of images.

The first set is created by leftBlock1 & leftBlock2, the second set is created by mainBlock.

[traq]

it's probably a result of the "padding: 0 1em;" in the main block. (I couldn't be sure just from the pictures.) Have you tried setting it to 0? Another possible cause would be the default margins used by the browser; try setting "margin: 0;" also.

Something else you might look into is using a css reset. You end up with a little more work (because you have to explicitly set everything in your css), but you have a better starting point to deal with these kinds of issues because you minimize interference from the browser's default settings.