CSS position:fixed issues with IE 8

[michaellunsford]

Okay, I've been reading up on this and apparently IE7+ is supposed to support position:fixed if the page has a doctype - which mine does. I have it working in FF and every other browser I checked (except for guess who).

 

the gist: an ad is fixed to the bottom-left corner of the screen. There is a secondary ad that also appears on first load - but I'm not too worried about it at this point. The main problem is the bottom corner ad is not snapping into place (in IE only) when it's inserted in by joomla.

 

If I isolate it to it's own page, it works perfectly. Add it to the ad system and let Joomla deliver it and IE has it appear in the table where you'd expect a non-fixed image to appear.

 

#sitesponsor {
cursor:pointer;
position:fixed;
height:110px;
width:120px;
bottom:0px;
left:0px;
z-index: 5001;
}

> Isolated - Just the ad works fine.

> on the Joomla site appears at the bottom of the page. Why?

 

I've been hacking on this for days, and I'm absolutely stumped. I'm about ready to copy the whole stinking page to an HTML editor and check for all the opening and closing of elements - but that would be my last ditch effort. Especially considering it works fine in other browsers.

 

Certainly I don't expect anyone here to pour over this and diagnose the specific problem. I'm wondering if anyone has run into anything like this and have an idea of what I might have missed?

[haku]

Whatever you are trying to do, your javascript is getting in the way of it. If you load the first page without javascript enabled, it is a blank page. If you load the second page without javascript enabled, the image is on the bottom. With javascript enabled, it's gone altogether. You're going to have to figure out where your javascript is conflicting.

[michaellunsford]

Thanks for that tip - it was just what I needed to figure this out.

 

I don't have access to the main joomla template to add the CSS to the head, so I was using javascript to load the stylesheet (I tried several methods, none seemed to work in IE). It appears that IE just didn't like loading stylesheets that far down on the page (either with javascript or a plain <link> load).

 

Soooo, I inlined all the CSS and it's working fine now. I put a ticket in to the tech folks and asked them to add the stylesheet to the document header - but inline should work in the interim.