Float Issue in IE

Question

Ok I am making a simulated OS type interface. It should open up windows and have a drag handle. This all works perfectly. Then I added a image for an exit button I floated to the right... this made IE mad and IE screwed with the sizing and positioning =[

I've tried a crap load of things. None of which work. Anyone wana help?

website is

http://opentech.durhamcollege.ca/~intn2201/brittains/labs/

Thanks Shelby

Answer 1

It's an issue with IE 6 & 7:
http://blogs.msdn.com/askie/archive/2009/03/23/right-floated-element-in-internet-explorer-8-is-positioned-differently-than-internet-explorer-7.aspx

The only solution I can come up with is something like:

<!--[if lte IE 7]>
    <style type = "text/css">
        #windowExitImage{margin-top:-27px}
    </style>
<![endif]-->

Because it's technically a comment, only IE 7 on back will pay attention to that. So IE 8 and other browsers will display it the way they already do, which does in fact look right.
http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

Answer 2

Another solution would be to not use floats at all.

#dragHandle { 
  position: relative; 
}

#windowExitImage {
  position: absolute;
  top: 4px;
  right: 0px;
}

This will work better cross-browser and remove the need for an IE6/7 specific CSS rule.