css, opera and the input button problem :( .....

[Rianna]

OK I've turned green after days of searching I give up.

I've tried to make this code easy if someone wants to try it, but don't spend too long it'll drive you crazy. I hope someone else has had this problem already and figured it out so no one has to do too much work.

Here's some code. css

input { width: 135px;
font-family: arial, sans-serif;
font-size: 14px;
}

and body
<form action=href><input value="This is a submit
button with two lines" type="submit" /></form>

Opera will not recognize the width set in the css or the body for the button width like IE etc. Instead the button does nothing to stop the text and the text appears as one wide line.

I checked a bunch of google threads on this subject with no help, along with opera no help.

I'd rather not bother with it but think I should since so many people use
opera. I tried adding padding all the way around in the css class. That didn't work. If nothing works I can make the button one line only but two lines is
the best way to explain where the button is taking someone with the room I have, because its a side menu button. Hope someone can help. ) Thanks. Ri

[Charles]

<button type="submit">Submit<br>Button</button>

[David Harrison]

Try doing it this way:<form action="#">

<button type="submit">
This is a submit<br>
button with two lines
</button>

</form>Then apply the styles to the button element, it works as you want it to then. But in Firefox the text is on 3 lines, presumably because it applies more padding to the sides of the button and causes the text to wrap.

Also, I'd recommend against setting the font size in pixels, for any element. It prevents users of IE6 (and lower) from increasing the font-size, and users with less than perfect eye sight may not be able to read the text.

[Rianna]

Gee wiz, you guys did it in a matter of seconds even!! You guys need to go into business together as a new sort of new microsoft or something, I can't believe how quickly you know all this stuff. It even works in firefox for me at least. How do I add a href to this?? Then I'll be set.

I know I need to change all my pixels to em's or whatever, I'll miss them though, kind of attached to them by now. Thaaaaaaaaaannnnnnnnnnnnnnnkkkkkkkkkssssssss......you made my week.

[Rianna]

I tried adding an onsubmit="to a url" but that didn't work, onclick not either.

[David Harrison]

That's what the action attribute on the form element is for, to submit the form to a particular page.<form action="/folder/path/page.php">

<p>
<button type="submit">
This is a submit<br>
button with two lines
</button>
</p>

</form>

[Rianna]

YOU GOT IT!!!!! I didn't know that a <button> tag could be used with a form. I thought it had to be an <input> tag only. Very, very good news, thank you very much. ~~~~~~~

[callender]

styling forms is not an easy subject, read: http://www.456bereastreet.com/lab/form_controls/checkboxes/

[jamesmorrish]

You can use button just like input, even passing the name attribute in the post array. This means you can have multiple buttons on a form and figure out which button was pressed in your server site script!