Hey guys. I'm a CSS newbie and I was wondering how websites like bing.com or wolframalpha.com create their search buttons inside of of the text field? If you go to each website, you can see clearly what I mean.
A:
Simple: the submit button (with transparent background) is above the input field.. :)
TiuTalk
2010-04-01 00:55:34
+1
A:
Get yourself Firebug as a plugin for Firefox. You can click on elements on the screen and see their CSS. It'll teach you LOADS of info about CSS. They actually use a negative margin to get that sucker to float over on Bing.com.
dscher
2010-04-01 00:58:43
ThunderStrike
2010-04-01 03:29:52
Hmmm...can't comment specifically. Can you paste some of your CSS into your original post and I'll have a look. Just paste the selectors that are in the immediate area to the search field.
dscher
2010-04-01 13:13:31
A:
@dscher -
Here's the code, it works fine in Opera, but no other browser.
submit_form {
background:transparent url(submit.png) no-repeat;
border:0 none;
width:16px;
height:16px;
overflow:hidden;
font-size:0px;
text-decoration:none;
cursor: pointer;
margin-top: 0px;
margin-left: -25px;
margin-right: 0px;
margin-bottom: 0px;
padding-top: 25px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
}
Just a suggestion: This should be put back into the original post. You should be able to edit it, then delete this post when it's there.
bradlis7
2010-04-01 19:35:26