Positioning apple-themed globalsearch field along with left and right cap images

[qcom]

OK, so if you check out http://www.marioplanet.com you can see that I am trying to mimic the design of apple.com for my menu bar, including my global search bar.Now, I'm trying to mimic Apple's input field for the global search bar, as close as I possibly can, so I need some help here.I would like the left and right cap images and the input field to be centered with the height, but I cannot figure out a way to specify this in CSS to be compatible in all browsers.I also need to have a grayed out placeholder string reading Search but I think I may be able to use JS for that. If can use HTML or CSS, please let me know.OK, you can check out the site, but here is the code as well:index.htm:

<div id="header"> 	<p align="center"><img id="logo" src="/images/logo/logo.png" alt="logo"></p> <script type="text/javascript"> 	var searchSection = 'global';	var searchCountry = 'us';</script> <div id="globalheader" class="apple"> 	<!--googleoff: all--> 	<ul id="globalnav"> 		<li id="gn-home"><a href="index.htm">Home</a></li> 		<li id="gn-catalog"><a href="catalog.asp">Shop!</a></li> 		<li id="gn-about"><a href="about.htm">About</a></li> 		<li id="gn-contact"><a href="contact.htm">Contact</a></li> 		<li id="gn-media"><a href="media.htm">Media</a></li>  	</ul> 	<div id="globalsearch"> 	<form id="searchform"> 		<div> 		<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" /> 		<span class="left"></span> 		<span class="right"></span> 		</div> 		<div id="suggestions"></div>  	</form> 	</div> 	<!--googleon: all--> </div> </div>  /code]nav.css:[code]/* GLOBALHEADER */#globalheader { width: 671px; height: 37px; margin: auto; position: relative; z-index: 100; }#globalheader #globalnav { margin: 0; padding: 0; zoom: 1; width: 100%;}#globalheader #globalnav:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }#globalheader #globalnav li { display: inline; }#globalheader #globalnav li a { float: left; width: 103px; height: 37px; text-indent:-1000em; overflow: hidden; background-image:url(/images/globalnav/wanzart.png); _background-image: url(/images/globalnav/wanzart.png); background-repeat: no-repeat; }#globalheader #globalsearch { background-image: url(/images/globalnav/wanzart.png); _background-image: url(/images/globalnav/wanzart.png); background-repeat: no-repeat; }/* BUTTONS */#globalheader #globalnav li#gn-home a { background-position: 0 0; }#globalheader #globalnav li#gn-catalog a { background-position: -103px 0; }#globalheader #globalnav li#gn-about a { background-position: -206px 0; }#globalheader #globalnav li#gn-contact a { background-position: -309px 0; }#globalheader #globalnav li#gn-media a { background-position: -412px 0; }/* OVER STATES */#globalheader #globalnav li#gn-home a:hover { background-position: 0 -37px; }#globalheader #globalnav li#gn-catalog a:hover { background-position: -103px -37px; }#globalheader #globalnav li#gn-about a:hover { background-position: -206px -37px; }#globalheader #globalnav li#gn-contact a:hover { background-position: -309px -37px; }#globalheader #globalnav li#gn-media a:hover { background-position: -412px -37px; }/* PRESSED STATES */#globalheader #globalnav li#gn-home a:active { background-position: 0 -76px; }#globalheader #globalnav li#gn-catalog a:active { background-position: -103px -76px; }#globalheader #globalnav li#gn-about a:active { background-position: -206px -76px; }#globalheader #globalnav li#gn-contact a:active { background-position: -309px -76px; }#globalheader #globalnav li#gn-media a:active { background-position: -412px -76px; }/* ON STATES */#globalheader.home #globalnav li#gn-home a:hover { background-position: 0 0; cursor: default; }#globalheader.store #globalnav li#gn-catalog a { background-position: -103px -114px !important; }#globalheader.mac #globalnav li#gn-about a { background-position: -206px -114px !important; }#globalheader.ipod #globalnav li#gn-contact a { background-position: -309px -114px !important; }#globalheader.iphone #globalnav li#gn-media a { background-position: -412px -114px !important; }/* GLOBAL SEARCH */#globalsearch {width: 156px; height: 37px; position: absolute; top:0; right: 0; background-position: 100% 0; background-repeat: no-repeat; text-align: center; border-width: 0px; }#searchform .left { display: block; position: absolute; left: 0; top: 0; width: 20px; height: 19px; margin-top: 5px; background: url(/images/globalnav/searchfield_leftcap.png) left top no-repeat; }#searchform .right { display: block; position: absolute; right: 0; top: 0; width: 10px; height: 19px; margin-top: 5px; background: url(/images/globalnav/searchfield_rightcap.png) right top no-repeat; }

globalsearch.css:

/* BASIC RESET */body, div, img, p { padding:0; margin:0; }a img { border:0 }/* HTML ELEMENTS */body { font-family:"Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; }/* COMMON CLASSES */.break { clear:both; }/* SEARCH FORM */#searchform { margin:auto auto; font-size:18px; }#searchform div { color:#eeeeee; }#searchform div input { font-size:10px; width:133px; }#suggestions{ position: relative; left:235px; width:320px; display:none; }/* SEARCHRESULTS */#searchresults { border-width:1px; border-color:#919191; border-style:solid; width:320px; background-color:#a0a0a0; font-size:10px; line-height:14px; margin-top: auto; }#searchresults a { display:block; background-color:#e4e4e4; clear:left; height:56px; text-decoration:none; }#searchresults a:hover { background-color:#b7b7b7; color:#ffffff; }#searchresults a img { float:left; padding:5px 10px; }#searchresults a span.searchheading { display:block; font-weight:bold; padding-top:5px; color:#191919; }#searchresults a:hover span.searchheading { color:#ffffff; }#searchresults a span { color:#555555; }#searchresults a:hover span { color:#f1f1f1; }#searchresults span.category { font-size:11px; margin:5px; display:block; color:#ffffff; }#searchresults span.seperator { float:right; padding-right:15px; margin-right:5px;			background-image:url(../images/shortcuts_arrow.gif); background-repeat:no-repeat; background-position:right; }#searchresults span.seperator a { background-color:transparent; display:block; margin:5px; height:auto; color:#ffffff; }

Any help is much appreciated!Thanks!

[ApocalypeX]

How about creating 1 images for the whole search bar and just use padding-left & right to move the text away from each end?Also nice site, it's hawt.

[qcom]

How about creating 1 images for the whole search bar and just use padding-left & right to move the text away from each end?Also nice site, it's hawt.

Hey thanks! I personally agree 100% haha :)Like the idea a LOT, I've been having problems with this now.Hmm, that sounds pretty good, now, could I just specify the input's background as that entire image?What would happen when they type more text on the right side? I guess it would be fine?

[ApocalypeX]

Hey thanks! I personally agree 100% haha :)Like the idea a LOT, I've been having problems with this now.Hmm, that sounds pretty good, now, could I just specify the input's background as that entire image?What would happen when they type more text on the right side? I guess it would be fine?

Imagine your search bar as a box.Inside that box is another box. The innerbox cannot move nor can its contents leave the box. so when text is written in it just displays as many as can fit in the innerbox.

[qcom]

Imagine your search bar as a box.Inside that box is another box. The innerbox cannot move nor can its contents leave the box. so when text is written in it just displays as many as can fit in the innerbox.

I'm still quite n00by, but your simpleton terms are helping :)But the innerbox is where the padding will be applied, so that it is the actual <form type="text"> whereas the box which nests the innerbox contains the background image, correct? And the innerbox will have a higher z-index to be placed on top, and with the outerbox's full image, it will give the impression that it is one <form> tag with some really fancy CSS3 magic going on!Tell me if I'm way off..What's the best way to code this in your opinion?

[ApocalypeX]

I'm still quite n00by, but your simpleton terms are helping :)But the innerbox is where the padding will be applied, so that it is the actual <form type="text"> whereas the box which nests the innerbox contains the background image, correct? And the innerbox will have a higher z-index to be placed on top, and with the outerbox's full image, it will give the impression that it is one <form> tag with some really fancy CSS3 magic going on!Tell me if I'm way off..What's the best way to code this in your opinion?

<input type="text" id="search" />#search{background:url(searchbar.png); padding:0 20px 0 20px;}The whole search bar will have the image, the text inside it will have the padding.

[qcom]

<input type="text" id="search" />#search{background:url(searchbar.png); padding:0 20px 0 20px;}The whole search bar will have the image, the text inside it will have the padding.

Haha! Thank you so so much!!That was such a good idea. Check it out again, it looks pretty beast.OK, so a few things I'm trying to research as of right now due to some semi-cross-browser-compatibility-issues.Here's the browser statuses:Firefox 3.6.8:- Great except for when an end-user places his/her cursor in the input field, for some reason the cursor is kind of large, but then upon the end-user beginning to type, the font-size is normal.. A little strange.- Can't tell if the cursor should be bumped down 1 pixel also, not so sure yet.Chrome 5.0.375.126:- Great except just like FF 3.6.8 this definitely needs the cursor to be bumped down by 1 pixel.Safari 5.0.1:- Same cursor placement as FF and ChromeIE 7:- Great, same cursor placement problem, except this one appears to perhaps need a bump slightly more than 1 pixel down, perhaps not though.IE 8:- Same as IE 7 except this actually has a spacing problem in between the media button and the globalsearch <div> intersting! Good 'ol IE!I have yet to test on IE 6.. Oh GAWD!! :)Thanks again, this has been a great help, the image was a heck of a lot easier and the only downside I've seen so far is the highlight upon entering your cursor I believe in webkit browsers perhaps, which highlights the curves. I have the highlight set off so it doesn't look odd having a rounded image with a rectangular highlight!