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 (http://meyerweb.com/eric/tools/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.