Links and CSS layers used with absolute positioning.

Are you having trouble with links simply not offering you the chance to click on them?

After adding a padding value to a couple of links on a wordpress blog I found that I was no longer able to click the links. The same held true after adding a margin to the same block.

The problem occurred with two elements that were position(ed): absolute(ly);. Since my renewed interest in web design and development I've primarily only worked with relative positioning I got stuck very quickly.

The problem was only in firefox. IE seems to natively support clicking links that are hidden below layers. Checking different versions of IE all worked. Have you tried out IETester? If not, you should.

Luckily because it was in firefox I was able to see clearly when using the firebug plugin that where my links became inoperable was exactly where another padded layer started. If you don't have firebug, please grab that too. It's great for design as well as debugging.

I had a hunch that simply reordering the layers by changing the position of the < div > tags in my html would fix the issue. It did, thankfully. A good note to keep for myself in the never-ending road to implementing more features for web sites.

Maybe I should have tried setting the z-index value too?