Difference IE/FF when specifying width for a <div>

[Komikio]

Consider the following code:

<style>#test {        width: 600px;border: 3px solid red;}</style><div id="test">	<p>Nunc eu dui vel mi semper dictum. Nulla sed risus. Nullam posuere velit ut nibh. Cras at lacus vel lacus iaculis vehicula. Nullam tellus arcu, pulvinar id, ultricies non, lacinia eget, urna. Morbi eu dolor vitae ligula consectetuer fringilla. Nam vehicula consectetuer lectus. Duis laoreet, turpis id pharetra aliquet, nunc risus feugiat diam, quis ornare risus mauris a magna. Nullam augue. Sed nec enim.</p></div>

As can be seen IE removes the white space at the top and the bottom of the div container. This seems to have something to do with the width-property specified in the css. If you remove it, you will see that both IE and FireFox add space to the top and bottom. Both however will add no space when the contents of <p> span just 1 row instead of multiple rows. Setting padding or margin to zero does not work, since these are already zero. Anybody familiar with this problem and knows a solution?

[ThePsion5]

I'm not positive, but I believe that there is a difference in the way that IE and Firefox interpret the default margin or padding...I THINK that if you explicitly specify padding and margins it should be identical. Don't quote me on that, though...

[S@m]

I would use 2 style sheets. One for IE and one for everyone else. That way everything will validate.Put this in your head:

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

You can call the style sheet anything you want obviously.Then edit that sheet for IE. Now IE and FF will be happy....stupid IE.

[Komikio]

Thanks for your reactions. Actually I was hoping for a solution other than using 2 stylesheets, but probably it has to be this way But I still wonder if anyone knows where this difference comes from?

[S@m]

It's because IE is a junk pile and doesn't care what standards are.There has been times a margin is + or - 10px just to make IE look the same as everything else.You can use one style sheet and hack it up so IE will work. But, IE 7 comes out soon and it may have problems with the hacks. Then you are back at square one. (again)I'd go with the 2 style sheets. It's easier than you think and you will be glad you did in the long run.

[Komikio]

Haha, IE is such a wonderful browser... Let's do it this way then. At least we can close this topic then.