Advanced CSS Design Resources - last-child.com » Form Button http://www.last-child.com CSS Toys for Professional Web Developers Mon, 19 Dec 2011 18:30:15 +0000 en hourly 1 http://wordpress.org/?v=3.1.2 Control form button width in IE6 http://www.last-child.com/control-form-button-width-in-ie6/ http://www.last-child.com/control-form-button-width-in-ie6/#comments Wed, 19 Apr 2006 00:03:59 +0000 Ted http://www.last-child.com/control-form-button-width-in-ie6/ I’m working on a project with shiny, happy submit buttons all over the place. To offer more control over the presentation, we are using the form button element and inserting images inside the button tags.

...

Now, you need to over-ride some pretty ugly default presentation styles:


form button {padding:0; margin:0; border:none; background:0;}

This works fine and dandy until you get to IE6. The buttons tend to get really large with IE. So, you need to re-define the width of the buttons and apply overflow:visible. Here’s the entry in your IE6.css file:

form button {width:1%; overflow:visible;}

Resources

Special thanks to Jehiah Czebotar for saving me a bunch of time trying to figure this out.

]]> http://www.last-child.com/control-form-button-width-in-ie6/feed/ 5 Using vertical-align for images and buttons http://www.last-child.com/using-vertical-align-for-images-and-buttons/ http://www.last-child.com/using-vertical-align-for-images-and-buttons/#comments Tue, 28 Feb 2006 04:32:15 +0000 Ted http://www.last-child.com/using-vertical-align-for-images-and-buttons/ I’m working on a basic search form and the visual design requires a graphic button instead of the browser-generated input. I’m using the button tag instead of an input type=”submit”. While putting the page together, I had a nagging issue with the button not aligning with the label and input. I tried various combinations of margins, negative-margins, padding, and even floated the elements. All of these techniques eventually worked, but the were too klunky and I knew there had to be a better way.

I remembered the vertical-align:middle style while working on a footer paragraph that included inline links and RSS buttons. I tried it with the submit button and it also worked perfectly. I’ve tested this in FF 1.5 and IE6. I have not tested it in Safari yet.

Code Examples

CSS:

form#foo button {vertical-align:middle; border:none; padding:0; background:none; cursor:pointer; *cursor:hand; /*alternate cursor for IE*/}

HTML

...

Resources

]]> http://www.last-child.com/using-vertical-align-for-images-and-buttons/feed/ 5