PDA

View Full Version : search box



BubikolRamios
Dec 24th, 2008, 04:32 PM
top right corner:
http://firefox.erweiterungen.de/

can't figure out how is this done, how cursor comes infront of image ?
I think the image is a background of input ?

EDIT: magnifying glass does not show up in IE6

abduraooft
Dec 24th, 2008, 04:44 PM
They have a background image aligned left and a left padding to avoid text coming over that background.


#sitesearch input[type="text"] {rahmen.css (line 437)
background:#FFFFFF url(../img/icons/ico_lupe16.png) no-repeat scroll left center;
color:inherit;
margin:2px 2px 2px 0pt;
padding-left:20px;
vertical-align:middle;
}

BubikolRamios
Dec 31st, 2008, 08:56 AM
the same link: http://firefox.erweiterungen.de/

if I test that search box in IE7 and type enough text, the magnifying glass image gets pushed out of sight. Any idea(other than putting image in as <img>) how to trick that ?

general css for that:


input
{
background:url(mcSearch.png) no-repeat scroll left center;
padding-left:20px;
}

abduraooft
Dec 31st, 2008, 09:32 AM
if I test that search box in IE7 and type enough text, the magnifying glass image gets pushed out of sight. Any idea(other than putting image in not as background) how to trick that ?
Can we have a link to your page?

BubikolRamios
Dec 31st, 2008, 10:10 AM
the test link:
http://agrozoo.net/AgroZoo10/a.html

Majoracle
Dec 31st, 2008, 10:26 AM
CSS:

.mystyle
{
background:url(mcSearch.png) no-repeat scroll left center;
border:solid 1px lightgray;
padding:1px 1px 1px 20px;
width:100px;
}
.mystyle input
{
width:100px;
border:none;
background:none;
}

(X)HTML:

<div class="mystyle"><input type="text" /></div>

Edit the borders how you want them.

abduraooft
Dec 31st, 2008, 10:41 AM
Um.. you'd need to wrap your input element inside another element (say span/div) and then set the background for this wrap, while setting transparent background for your input element. Check http://blogs.creative-jar.com/post/Input-backgrounds-scrolling-in-IE.aspx
Stupid IE :(

too late :)

BubikolRamios
Dec 31st, 2008, 11:05 AM
did it that way, hence had to produce a bunch of additionl css around the real stuff, grrrrr:mad:
Edit: cant wait to get home to see what will IE6 do with it.

jerry62704
Dec 31st, 2008, 04:41 PM
Don't wait. Find out now.

How?

Go to http://browsershots.org/