Non javascript multiline control with click event

Hi I have a requirement to have a link which spans multiple lines and has a click event server side. The problem is it has to function without javascript.

I tried using a button and styling it to look like a link. This worked fine as I was using the property

white-space开发者_C百科:normal

which made the text span multiple lines.

However when I checked it in IE6 the text wouldn't wrap.

Does anyone know how to acheive a multi text line control with server side onclick event?

OK, I worked out a solution. It relies on the fact that a <label> element will focus/trigger the form element (inputs, buttons) it's attached to. Turns out, this will trigger buttons to be clicked as well. This means we can use the label as a clickable 'proxy' element for the button itself. The button can then be hidden.

I packed the button inside the label, and made the button invisible, then, the label can be styled to look however you like - it's a true inline element just like a link is.

Here's a demo - grab the code if you like: http://www.spookandpuff.com/examples/buttonText.html

The HTML:

<label for="buttonTest" class="buttonProxy">I'm a clickable proxy <button type="submit" id="buttonTest" class="proxied"></button></label>

The CSS

button.proxied {
        width:0;
        height:0;
        opacity:0;
        position:absolute;
    }

    label.buttonProxy {
        text-decoration:underline;
        cursor:pointer;
        color:blue;
    }

Be aware that older IE's don't allow you to interact with properly 'hidden' form elements: if you display:none or visibility:hidden your button, it won't work. Setting width/height to 0 will work, as will setting the opacity to 0 with an IE specific rule.

I think a button is an inline block, so it will try to avoid wrapping internally if it can. There are a couple of ways of forcing it to wrap, such as putting <br> tags inside the button, or even using <table width="1"> (again, inside the button).