My Drupal Blog - Theming The Search Submit Button - A CSS Cross-Browser Compatible Solution - Comments

HI i need your help i really

Free Submission — Fri, 04 Jul 2008 14:17:31 -0700

HI i need your help i really want to create my own website/web page but i dont know how to go about doing it so can you please help me out

css Cursor examples ,

hazır kayan yazı — Fri, 20 Jun 2008 07:12:18 -0700

css Cursor examples , Properties , Attribute - - http://css-lessons.ucoz.com/cursor-css-examples.htm

Thanks a load mate, really

Eglen — Thu, 19 Jun 2008 09:24:06 -0700

Thanks a load mate, really helped my css-uneducated ass out! I should probably stop obsessing over little details, though; tis unhealthy.

Worked like a charm! Thanks!

Kyle — Wed, 04 Jun 2008 07:47:06 -0700

Worked like a charm! Thanks!

If you cant add a div for IE

Tom Taylor — Wed, 04 Jun 2008 02:09:11 -0700

If you cant add a div for IE and use conditional tags, just use the underscore hack for IE Only:

_font-size: 0;
_color: #fff
_text-align: right;
_padding-right:2px;

Mozilla, Opera and Safari will ignore any CSS dec's with an underscore before them! ;)

This rollover image submit

Mike — Thu, 24 Apr 2008 02:17:01 -0700

This rollover image submit button would probably serve 'most' peoples needs..

Simple :)

Nice trick - although, I

Kyle — Sun, 13 Apr 2008 21:25:12 -0700

Nice trick - although, I should point out: No need for the additional div - just add that CSS you'd like for IE-only in between the comments (where you have the div). This will overwrite your "real" css file, and avoids extra markup! (You just have to make sure that the commented CSS comes after the link to your stylesheet).

Thanks a load mate, really

Secret Owl — Thu, 03 Apr 2008 17:48:04 -0700

Thanks a load mate, really helped my css-uneducated ass out! I should probably stop obsessing over little details, though; tis unhealthy.

Laurence, Thanks for the

Rene Hache — Thu, 01 Nov 2007 15:32:14 -0700

Laurence,

Thanks for the tip. I have a few of questions about your tip and I'm wondering if you could answer them:

-- The IE width is 10px more than the regular (ie 34px vs 24px). Why 10px? Is it always 10px more than whatever works in FF? Basically, how did you figure out that difference?

-- Can you get rid of the conditional IE DIV if you use conditional IE CSS?

Thanks,
Rene

Fiasst, you probably found

Adam — Thu, 04 Oct 2007 03:09:26 -0700

Fiasst, you probably found that bit of code here, and I couldn't agree more it is very handy!

Ive used a custom search

Fiasst — Tue, 02 Oct 2007 09:22:22 -0700

Clean CSS solutions are

ragaskar — Thu, 02 Aug 2007 15:52:01 -0700

Clean CSS solutions are loads better than wacky template hacks that subvert the form api. Great bit of code! Thanks!

I'm not sure I'd use the

Laurence — Tue, 19 Jun 2007 08:00:47 -0700

I'm not sure I'd use the word fun ;-)

Nice trick, I mean

themegarden.org — Tue, 19 Jun 2007 07:03:28 -0700

Nice trick, I mean hack.
It's always a fun to fight with IE

Theming The Search Submit Button - A CSS Cross-Browser Compatible Solution

Laurence — Mon, 18 Jun 2007 07:16:32 -0700

More sites these days are using a custom image like a magnifying glass, or the word 'GO' in a circle, instead of the default search submit button. Here's a way that you can do the same thing with the Drupal search function, and only have to use CSS - no PHP and no editing template files (well, almost).

The image on the left shows the default search submit button, and the image on the right shows the new search submit button that we'll replace it with.

It's really just a simple three step process:

Step 1: Create your image
Step 2: Add a conditional comment to your page.tpl.php file
Step 3: Add your CSS

Step 1: Create your image

The image can be of whatever you like, and is probably best in .jpg format.

Just make sure you save it into your theme's normal images folder.

For instance, if I am going to use an image of a magnifying glass called 'mag_glass.jpg' I would save it to '/sites/all/themes/mydrupalblog/images/mag_glass.jpg'

Step 2: Add a conditional comment to your page.tpl.php file

A conditional comment is just a small bit of code which we add to the page.tpl.php file in order to allow us to specifically target Internet Explorer with different CSS rules.

As you'll see in a second, this is necessary because Internet Explorer interprets our CSS differently, and we need to supply it with some extra rules to make it look right.

In short, you just need to add the following code to your page.tpl.php file directly after the opening body tag

and then add the following directly before the closing body tag.

Basically, this creates a new div with an id of 'IEroot' which wraps around everything inside of our body tags if a user is browsing with Internet Explorer, and ignores it if a user is using any other browser like Firefox. This allows us to write CSS which targets the #IEroot, and know that it will only be used by IE - very handy.

For those who are interested, a detailed explanation of this method can be found in
this article over at positioniseverything.net.

Step 3: Add your CSS

Finally, we add the necessary CSS to our style.css file.

We'll start by adding the general rules which cover most browsers

#search-block-form input.form-submit, #search-form input.form-submit {
	height: 24px;
	width: 24px;
	cursor: pointer;
	text-indent: -9999px;
	border: none;
	background: url(images/mag_glass.jpg) no-repeat left top;
}

The above code covers both the search block and the search form on the main page. Just remember to change the height and width accordingly for your own image.

This now looks great in Firefox, but not so good in IE.

The problem is that IE will not text-indent the text on the submit button. Also, IE now completely removes the search submit button from the Advanced search fieldset on the main page.

So, we need to find a sneaky way of making it look like the text has actually been removed from IE when it hasn't, and also sort out that missing search button.

The following code will do the trick:

#IEroot .block-search input.form-submit, #IEroot #search-form input.form-submit {
	width: 34px;
	font-size: 0;
	color: #fff;
	text-align: right;
}
#IEroot #search-form .search-advanced input.form-submit {
	width: 44px;
	text-indent: 0;
}

Using the #IEroot selector, we first tell IE to make the text very small by declaring 'font-size: 0;' (FIG 1). However, IE still won't remove the text completely, so we then create an area to the right of the magnifying glass image into which we can put the text. We do this by changing the width of the image and setting 'text-align: right;' (FIG 2). You will need to add 10px to the search block image width, and 20px to the advanced search form image width for this to work. Finally, we change the font color to match with our background, in this case white, and this completes the illusion (FIG 3).

Lastly, adding 'text-indent: 0;' to the #IEroot advanced search form gets IE to give us our submit button back :)

So far, I have tested this in Firefox, IE7, and IE6. It might seem like a slightly hackish solution, but it avoids any necessity to try and catch the search form by editing the template.php file and then have to setup extra .tpl.php files. It also uses a relatively small amount of CSS, and is (hopefully) quite easy to understand.