Menu
I have a site that heavily utilizes jQuery and CSS to achieve some pretty nice effects. The pages work flawlessly in FF and Chrome - however in IE9 (and possibly other versions of IE) my pages seem to be mis-formatted due to the browser seemingly ignoring my position:fixed; properties. I guess my question is: What could cause this (pretty much globally across my site) to happen? I know it's hard to say without a full code example, but I was wondering if anyone has seen this before. There is a lot of CSS so I'm not really sure what is relevant to post and what not. If more code is needed, please let me know.
Example 1: Toolbar which mimics Window Start Button Menu
In the example below, you will see I've implemented a toolbar which mimics the behavior of the Windows Start button. It sits in the bottom-left and when clicked, it expands to show content. This functionality is working great in Ch/FF, but as you can see in IE9 the toolbar and its content are being appended to the bottom of the page. I whipped up a quick JSFiddle using this method in IE9 and it seems to work OK.. I'm not sure what might be different about my document which causes this to stop working.
The Odd Thing: if I change the CSS to position:absolute;, the div gets placed correctly and function's 99% correctly - it just doesn't scroll with the page.
#floatingOptions{
background:#fff;
border-right:2px solid #000;
border-bottom:2px solid #000;
bottom:0px;
display:none; /*this gets shown via javascript */
left:0px;
overflow:hidden;
position:fixed;
width:250px;
z-index:99999;
}
Example 2: Modal Windows Via jQuery Tools Overlay
Many of my modal windows are generated using jQuery Tools Overlay. Again, this works fine in Ch/FF but IE9 again appends the modal div to the bottom of the page (not to mention seemingly disregarding the z-index).
UPDATE
here is my doctype/html statements
<!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">
SOLUTION
I figured it out. It was a POBKAC error (Problem occurred between keyboard and chair).
my <!DOCTYPE....> is being called in header.php and I was being dumb and doing this 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'); ?>
so the styles were being placed into the code before the <!DOCTYPE> was declared. switched it around and problem goes away.
Thanks everyone!
545
The most likely cause is that your page is being displayed in Quirks Mode.
Internet Explorer, more than any other browser, will screw up your page in Quirks Mode.
Press F12 to open the Developer Tools to find out which mode is being used.
If it is indeed Quirks Mode, the most likely reason is that you've forgotten to add a doctype as the very first line:
<!DOCTYPE html>
If you already have a doctype, there are other possible causes.
159
If it works in other browsers and doesn't work at all in IE I would suspect at first that IE doesn't render your pages in strict mode.
Fixed positioning in IE works only for strict mode.
See details on MSDN.
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
