Why does styling a button interfere with onclick?

[rantanp]

When I move a button to the left of the screen by applying a style, clicking it no longer calls the function specified in onclick.

My CSS looks like this:

.nButton {

border-radius: 100%;

}

.L {

float: left;

order:1}

.R {

float: right;

order:3

}

If the HTML is like this:

<button class = "nButton" onclick = "myFn()"><</button>

myFn() runs

But if the HTML is like this:

<button class = "nButton L" onclick = "myFn()"><</button>

clicking the button does nothing.

What am I missing? I’m on 2.1.54 by the way.

[Rumo]

This isn’t valid HTML. There is an extraneous <.

[rantanp]

That’s supposed to be a left arrow (and there’s a second button with > for a right arrow). The buttons move a carousel. I don’t think that’s is the problem because as long as I don’t move the buttons they work as expected. I can change the text to L and R to double check though. I have already tried changing float left to absolute positioning and it sort of worked but you had to click a bit off the button itself and even then only about half the clicks were picked up. I now have them centred with a lot of &nbsps between them to push them to the L and R sides - that works perfectly but it can’t be the right way to position them. I just don’t understand the link between the styling / positioning and the button functionality. I wondered if the styling was being applied to the button graphic but not the clickable layer, but clicking where the button would have been doesn’t work, so that doesn’t seem to be it.

[Rumo]

You never know how browsers interpret broken HTML, so it might just happen to work, but break if you add another class. Anyway, you should fix this, either by replacing the ‘arrows’ with HTML entities < and > or other Unicode symbols like ►, ◄, → and ←.

[rantanp]

OK that makes sense., thanks I replaced them with &lt and &gt so should now have valid HTML but it hasn’t fixed the original problem.