WordPress.org

1. Dunkkan
   Member
   Posted 1 year ago #

   Hello,

   I've been browsing the net the last hours trying to search some tutorial on building a big search box, supported by several browsers. I've tried the usual CSS styles setting up the width and height, in a div great enough in my markup, but nothing seems to work in Firefox 3 nor IE7, and the default box is still there...

   I'd like to allow to a "notorious" typography being shown in the search box as the user types the key words... you know.

   Does someone knows how to do it ?

   Thanks very much.

2. Darran
   Member
   Posted 1 year ago #

   There is no code to see what you are doing wrong. It would help if you showed what you did in your CSS and markup file.

3. Dunkkan
   Member
   Posted 1 year ago #

   Hi Darran, sorry here it goes:

   #searchform {
   	width: 254px;
   	height: 54px
   	margin: 10px auto;
   	padding: 5px 3px;
   	text-align: center;
   	}
   
   #searchform #s {
   	width: 254px;
   	height: 54px
   	padding: 2px;
   	}
   
   #searchsubmit {
   	padding: 1px;
   	}

   The width reacts well, but there's no response from the height.

   Then :

   <form method="get" id="searchform" action="<?php bloginfo('url'); ?>">
   <input id="s" type="text" onblur="if(this.value == '') {this.value = 'Search';}" onfocus="if(this.value == 'Search') {this.value = '';}" value="Search" name="s"/>
   <input type="submit" name="submit" value="Go" id="searchsubmit"/>
   </form>

   Maybe is impossible and every browser out there displays a standart line height which you cannot touch, but I remember have seen some search boxes quite big than the usual.

   Thanks to give it a look.

4. Evita
   Member
   Posted 1 year ago #

   #searchform #s {
   	width: 254px;
   	height: 54px
   	padding: 2px;
   	}

   Above style (two IDs) is sometimes not working. Try instead only
   

   #s {
   	width: 254px;
   	height: 54px
   	padding: 2px;
   	}

   or
   

   #searchform input {
   	width: 254px;
   	height: 54px
   	padding: 2px;
   	}

   If it works, but your submit will also have the input style, then give it a class:
   

   <input class="button" type="submit" name="submit" value="Go" id="searchsubmit"/>
   #searchform .button {yourstyle}

   Hope this is helpful for you.

5. Dunkkan
   Member
   Posted 1 year ago #

   Well Thanks ! all is working now. My problem was I was missing the comma after the height: 54px ; - we are under too much screen radiation I guess, at least me, I could be this night still changing pixels to an open attribut without any external view... I've set the styles for the button as well, and it's working like a charm. Thanks Evita for that feedback.

Topic Closed

This topic has been closed to new replies.