10 May 2010

Overlapping floats

As if it was a continuation to a previous post, I came across a problem in Firefox (and in Chrome and Safari) when I developed a 3-column flexible layout with floats and negative margins:

<div style="border:1px solid blue; width:100px; height:100px; position:relative;">
<div style="border:1px solid red; width:30px; height:80px; float:left;">
<a href="link">link</a>
<div style="width:100%; float:left; margin-left:-34px; border:1px solid green;">
<div style="border:1px solid green; margin-left:40px;">text</div>


In Firefox, the green (second left) float, because of some negative margin, overlaps the red (first left) float, rendering the link unclickable. Interestingly, this does not seem to be an issue in IE8 and Opera. Setting the z-index did not solve the problem.

A solution is to create a new offset container out of the red float. Simply add position:relative to it:


If you look closely, the borders show that the red float is now in front of the green one, although it comes first in the code (this difference is visible both in Firefox and IE), and the link is now clickable.

5 May 2010

Difference between function declarations in JS

After a little (re)search, I couldn't find any mention of this, so I'm including this observation here. It concerns a difference between the two more common ways of declaring a function in JavaScript. While with function myfunc(arg){...}, it is possible to call myfunc before the declaration, when using var myfunc=function(){...}, myfunc is not available before the declaration. In other words, function names are stored during compilation, while variables (not surprisingly) get their values during execution only.

That is, this results in an error:

var myfunc=function(x){ alert(x); }

While this works fine:

function myfunc(x){ alert(x); }

For other aspects of function declarations, objects and prototypes, please see http://www.permadi.com/tutorial/jsFunc/index.html.