Float Issue in IE

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

Answers


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/


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.


Need Your Help

Next and previous button using jquery

javascript php jquery html html-parsing

I am using a PHP Simple HTML DOM Parser to save a website as a htm file. I then use jQuery to extract a div from the file and put it into a div. I want to create a

AJAX Control Toolkit Assembly loading error

asp.net ajax ajaxcontroltoolkit

I encounter a problem...error is ....Ajaxcontroltoolkit.dll is in bin folder, but still I get this follwoing error...