I have a number of <span> elements which I am using to call a JS function with an onclick event, however it seams that the onclick only works if you click on the actual text not the entire span area, anyone know if there is a way round this?

<span> element is an inline level element, meaning that it wraps arround text and depends on text length (it determines its width and height).
Use <div> element or make <span> element(s) block level by using CSS:

span {display: block;}

Yer I have tried that it doesnt seam to work properly all the span's start overlapping each other.

You could try giving your span or your div a height and width style.

:peace:

Validate your HTML and CSS Philio, there might be something that's left unclosed. Also, if you're using floating spans, make sure you clear the float..

I seem to recall noticing some slightly different behaviour in different browsers (IE vs Firefox). I don't recall exactly what was different off hand.

What browser are you using for testing (more then one browser?)? Which browser are you noticing the problem in?