breakthrough design

“If a link with display: block and no explicit dimensions is inside a list item, any spaces or linebreaks that follow the list item in the code will cause extra whitespace to appear in the browser.”

Just another in the huge slew of IE browser bugs:

http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&productId=1&postId=824

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!

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';
	}
}