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>


Enjoy!

UPDATE: The Final Code

The final CSS we used looked like this:

.dropdown {position:absolute; _width:250px; min-width:248px; z-index:9;}

.dropdown ul {margin:0px; padding:0px;}

.dropdown li {margin:0px;  _padding-bottom:1px;     /** This prevents the extra padding **/ display:block; position:relative /** This allows for block layout **/}

.dropdown a {display:block;position:relative;margin:0px;padding:4px 20px 4px 20px;}

.dropdown a:hover {background-color:#6c0125;}

We can’t tell you how much we love wrestling with CSS bugs/oversights. There’s not a time when we wouldn’t want to kick back, relax, and fumble through 10-odd google pages, looking for a simple solution for giving an element 100% height.

So far, this is one of the best – 100% height solutions out there – looks like the handy work of ppk.

If you’re looking for a quick javascript fix, you’re at the right place! This function below will take in 3 parameters: The Content Object, the Container Object, and the amount of offset you’ll need.

• The Content object will contain your variable content (e.g. a <div> object), and the
• Container object will then be resized by the amount of
• Offset you have defined

Javascript Max-height Solution:

/*****************************
	name:	makeFullHeight
	desc:	gets the height of the content div, and resizes
                   the container to an exact px so that it's child
                   elements will fill 100% height
	param:	contentobj - the content object (e.g. a div)
		   containerobj - the container object that
                        is being resized
		   offsetpx(integer) - integer amount of px to
                   offset, this will change depending on your
                   application
	note:	MUST BE CALLED AFTER ELEMENTS HAVE
                   LOADED (or before the </body> tag)
*****************************/

function makeFullHeight(contentobj,containerobj,offsetpx){
	if(contentobj && containerobj){
		var contentHeight = contentobj.offsetHeight;
		var newHeight = contentHeight + offsetpx;
		containerobj.style.height = newHeight + 'px';
	}
}

If you are floating elements and attempting to apply a padding to their container, you may notice that Internet Explorer is doubling your padding. So:

This is what you want:

This is what’s happening:

The solution:

PositionIsEverything.net deserves the credit

To solve it, simply apply a display:inline to your floated element:

display:inline;

UPDATE: If this is not possible, applying a zoom will also correct this IE Bug:

zoom:1