Help #1: Fixed Positioning Problems with IE
A very happy Easter to all our viewers! Welcome to the first of our weekly help column and this week we'll be answering a query mailed to our support mail by one Fabio Martinez. Don't forget you can send any problems you're having in the world of design or coding by using any of our contact means and we'll help as best we can and publish it on the site for anyone else who's having the same problems!
So without further ado, Fabio asks:
When fixing <div> and other block elements outside my page's wrapper, Internet Explorer struggles greatly. Sometimes the contents will vanish, other times the contents in them isn't clickable or selectable. This is a pain as I'm using them to position social media links. Why is this happening and do you know a fix?
At first I wasn't sure what Fabio meant. But then I remembered coming across the exact same problem in one of my drafts for this site. I saved a copy at the time, thinking it was an annoying bug and I'd like to know a solution. Let's take a look so we understand the problem Fabio is having.
On our demo page scroll down to see the menu on the left is fixed in place. View the source and you'll notice the menu appears inside the wrapper and container <div>. What's peculiar is in every browser it behaves exactly like you'd expect: you can hover over the links and click on them. But in Internet Explorer it's as if they're part of the background image. You can't change their colour by hovering neither can you click on them.
After confirming with Fabio this is the same issue he is having it was time to find a solution.
At the time of encountering this myself I spent an hour fiddling with my stylesheet to try and fix it. Eventually I dismissed it as yet another Internet Explorer bug and an example of their sheer stubbornness to conform to web standards. I tried all sorts of hacks and tricks that I know and not one of them made those links clickable. Considering in both mine and Fabio's situation they were being used for social media links it's a frustrating bug to encounter.
After fiddling and fiddling this morning I could not find a solution. It seems like typical overflow behaviour with previous versions of IE but I'm using IE9 and by now these problems should be eradicated. Unfortunately they're not so there's a couple of ways you can counter this irritating bug.
You can rearrange your source so that the fixed block element containing these links appears outside your container. This will ensure the container behaves appropriately when fixed and the links will remain clickable. Unfortunately this isn't a practical solution in some situations (like mine) because you need to have the social media links within a CMS loop; in order for all the relevant post data to be forwarded to these social media links they have to appear within the WordPress post loop, for example. The only problem is not many structural template tags appear inside a CMS loop so that would require a lot of file editing.
If you're able to rearrange your source this is the simplest fix. When the fixed element appears inside another block element with defined widths it won't be clickable in Internet Explorer if it appears outside of these dimensions.
The next solution, though somewhat fiddly, is to create a psuedo wrapper to contain your page's contents in. All you have to do is place a wrapper around all your content that is 100% wide and high. The fixed <div> will still be displayed in the same position but it will be contained within your wrapper. The problem with fixed objects not being clickable appears to only appear when the fixed object appears somewhere on the page where there isn't already an element; the body doesn't seem to count in Internet Explorer.
Of course, this might not work if you're using specific positioning for your layout.
In the event neither of these fixes work for you then, from my experiments, your last choice is to rearrange the positioning of your fixed element. Unfortunately there isn't no direct way of fixing this issue, short of editing your source entirely when possible. You'll have to move the fixed element inside it's wrapping container if you're not able to move it's location in the source or add a pseudo wrapper.
If anyone else has encountered this problem and found a good solution for it be sure to share it in our comments below!