Display block with “a” hyperlinks in IE Internet Explorer
July 11th, 2008
Oftentimes, you find yourself creating dynamic CSS driven menus, embedded within lists. (See every site in our portfolio). The key to this is usually the following structure (simplified):
<ul>
<li><a href="somepage.html">Home</a><li>
<>ul>
The Problem
The problem is found when setting your <a> link as
display:block
, you’ll see that although it visually renders properly within IE, and mozilla firefox, opera, etc - you will notice that IE doesn’t allow you to click anywhere within the link? What? You say?
The solution
The solution is to set a position:relative on the <a>. Like so:
<style>
a {display:block; position:relative}
</style>
&html>
Enjoy!
Leave a Reply