I have to put a stop to this
When I made this design (version 3), I was really into the idea of making a basic search form design that relied on natural, browser-default button styling. Unfortunately, form styling across browsers is poor (especially when it involves the <button> element) and it looks like I will have to go against usability to make something that actually looks reasonable. Figures.
I realized this was a must after I saw the screenshot for my site on Screenalicio.us. Just look at this gem:
I can only guess that this must be Safari or a webkit-based Linux browser. They are the worst when it comes to buttons and there's no way around having something that ugly in the corner of your site. Maybe this explains why the design community hasn't given my new design a positive response. Maybe.
Here's how the same button looks in Firefox 2.0 on WinXP, just so you can be sure that I had good intentions here:
Here's the same one in Opera 9.0 on WinXP, also looking good:
Also, here it is on IE 7.0 on WinXP, half decent even with how poor IE usually performs:
It's a shame that Webkit can't handle something remotely close to this. For all it's CSS support, it really doesn't do a good job of making that CSS look good. Well, I'm off to put together something quick in GIMP and get it up before I sleep… here's to a more pleasing christianmontoya.com for all of you with lousy browsers.
Update (a few moments later): Okay, that's good enough for now. Looks great in FF 2.0, good in the other WinXP flavors. Hopefully it's allright in Webkit. Check it:
Update 2 (a day later): Thanks to nick, I finally have a decent looking search form. At least, it looks good in all the Mac and WinXP browsers I know of. That's enough of that.
… maybe I will have to fix the other buttons around this site… eventually.
Check a screenshot I took on my PC, Winxp Classical theme, FF2.0 default
Aww, I liked the other one better. (I prefer the dark, rounded edges.)
I guess if you wanted it to look decent in more than 2 browsers, then you made a smart move.
Tested it in one of those "Webkit Linux Browsers" and the input field and the button still don't line up (was that supposed to be fixed?).
It's also not so much "browser-default" buttons as "OS" or "Widgeting Library"-default, because those dark rounded corners are just part of Windows. I do remember it looking fine before (and now too) in Linux Firefox.
Sorry Christian, still doesn't work in Safari (2.0.4). The image is sitting about 5 or 6 pixels higher than the input box, plus safari won't let you apply a border to an input like you are doing (it just looks like a normal input). plus you will run into problems using font-size:inherit; in IE - including 7 i think.
Ugh, I was afraid of this. Okay guys, I'm going to try just using an image and removing borders on the button completely… a shame though since the button won't be able to expand with the image.
OK, I tried a different technique… still need to do another WebKit test though… as for IE 7, I have a number of bugs in that browser that need to be dealt with soon.
Looks fine in Safari 2.0.4 now. Also, looks fine in every other OS X browser I can think of (FF 1.5, FF 2.0, Camino, Opera, OmniWeb)
Dean: You don't know how happy I am to hear that!
A big thanks to nick (4 comments up) who sent me the working code. Nick, you are my hero!
good article on button styling:
http://www.digital-web.com/articles/push_my_button/
Johan, thanks so much for that, it really is great!