2 CSS issues in IE – div wrapping & div positioning

As usual I'm spending a lot of time trying to fix my css for Internet Explorer. The site looks fine in FF / Chrome but unfortunately not in IE. There were several issues which I have found fixes for the majority of them by I'm not exactly the most CSS savvy person so help would be greatly appreciated.

Issue 1 fixed!

Issue2 – Div positioning

I have noticed that the margins on all of my pages look larger in IE but they are for the most part acceptable. However, on a couple of pages I’m getting this issue:

This is how the site looks in FF / Chrome:


And Internet Explorer:


Here is the Css:

#play{
position: relative;
background:url(images/ptbg.png) no-repeat;
width:830px;
left: 50%;
margin-left: -415px;
height: 630px;
padding-top: 15px;
}

Code (markup):

And the HTML:

<div id="play">
<iframe style='border:0px solid blue' WIDTH='800' HEIGHT='600'SRC='link_to_flash_game" target="_blank"><a href="link'></iframe>
</div>

Code (markup):

 

1) position:relative for that element is PROBABLY the wrong approach - I'd have to see the rest of the page to be sure.

2) It's probably a haslayout issue, throw haslayout at it's parent... though the parent could also not be reporting it's width properly for that left:50%, so throw position:relative at it's parent too - either that or don't use what appears to be a positioning 'trick' to center something that looks like it should be centered using margin:0 auto;

I really do have to ask why you aren't just using:

#play{
  width:830px;
  height: 630px;
  margin:0 auto;
  padding-top: 15px;
  background:url(images/ptbg.png) no-repeat;
}

Code (markup):

3) This is 2010, what are you doing using an iFrame?

 

Isn't there a bug in IE that doubles the margin?

If so, use a reset css stylesheet. In fact, always use one.

 

Only on floats - this does not appear to be floating... and a reset doesn't do dick about margin doubling, though setting display:inline on a float will.

Also if it was a margin doubling issue, given his code it would be off to the left, not to the right.

 

Thanks for the response. I managed to fix this by getting rid of the 50% and neg margin and setting a fixed left (and right) margin which IE seems to work with.
I'm not a fan of iframes but in this instance I'm calling an affiliate flash casino game. To save the rest of the page from hanging, the code is loaded in an iframe so that delays on the casino servers don't affect the rest of the page from loading quickly.
Thanks again for the responses.