I have a website that heavily uses jQuery and CSS to achieve pretty nice effects. Pages work flawlessly in FF and Chrome, however in IE9 (and possibly in other versions of IE) my pages seem to be incorrectly formatted because the browser seems to ignore my position:fixed; properties position:fixed; . I think my question is: what can lead to the fact that this (to a large extent global on my site) will happen? I know this is hard to say without a complete code example, but I was wondering if anyone had seen this before. There is a lot of CSS, so I'm not quite sure what the message refers to and what does not. If more code is required, please let me know.
Example 1: A toolbar simulating the Start button menu
In the example below, you will see that I implemented a toolbar that mimics the behavior of the Windows Start button. It is located in the lower left corner, and when clicked, it expands to show content. This functionality works great in Ch / FF, but as you can see in IE9, the toolbar and its contents are added to the bottom of the page. I quickly cracked JSFiddle using this method in IE9 and it seems to work fine. I'm not sure what might be different from my document what makes this stop working.
The odd thing : if I changed the CSS to position:absolute; , the div will be correctly placed and will function 99% correctly - it just does not scroll the page.
#floatingOptions{ background:#fff; border-right:2px solid #000; border-bottom:2px solid #000; bottom:0px; display:none; left:0px; overflow:hidden; position:fixed; width:250px; z-index:99999; }
Example 2: Modal windows using jQuery overlay tools
Many of my modal windows are created using jQuery Tools Overlay . Again, this works fine in Ch / FF, but IE9 again adds a modal div to the bottom of the page (not to mention apparently ignoring the z-index).
UPDATE
here are my doctype / html instructions
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
Decision
I get it. This was a POBKAC error (a problem arose between the keyboard and the chair).
my <!DOCTYPE....> is called in header.php , and I was dumb and did it on some pages.
<style type="text/css"> @import url(/themes/pn5/jquery.ui.all.css); @import url(/qtip/jquery.qtip.css); </style> <?php include ('header.php'); ?>
therefore, styles were placed in the code before the <!DOCTYPE> declaration. switched and the problem disappeared.
Thanks everyone!