6 {{ upvoteCount | shortNum }}
6 {{ upvoteCount | shortNum }}

Quick CSS Search bar problem

by footballbob06
5 replies
  • WEB DESIGN
    • |
I have been getting frustrated with this tiny little problem. So I have a search bar in the menu of my site. On the right side it has a go button. In IE and Chrome the button is the correct size and 3px padding works. The problem is that in Firefox the correct padding is 2px. This is getting quite annoying. Is there anyway to specify a different padding for firefox than Chrome? Here is the code for the button.
Code:
a.comment-edit-link, a.comment-reply-link, a.button, input[type="submit"], input[type="button"], ul.button-nav li a, div.generic-button a {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
background: none repeat scroll 0 0 #<?php echo $font_color; ?>;
border-bottom: 1px solid #aaaaaa;
border-right: 1px solid #aaaaaa;
border-top: none;
border-left: none;
color: #<?php echo $container_bg_color; ?>;
font-family: arial, sans-serif; 
font-size: 12px;
cursor: pointer;
font-weight: normal;
padding: 3px 5px;
text-decoration: none;
text-shadow: none; 
vertical-align: top; 
margin-left: 3px;
}
Thanks for your help!
#bar #css #problem #quick #search
  • Profile picture of the author RichKent
    Firefox and IE interpret the CSS box model differently. To make them display the same add this to your css:

    -moz-box-sizing:border-box;box-sizing:border-box;

    Should fix it.
    Signature
    Learn more about Wordpress and SEO
    {{ DiscussionBoard.errors[6730158].message }}
  • Profile picture of the author footballbob06
    I added it but there was no change. Any other ideas?
    Thanks!
    Signature
    Survival blog / Learn to Bartend
    {{ DiscussionBoard.errors[6730241].message }}
  • Profile picture of the author RichKent
    You can try setting a universal rule for padding and margin at the top of your CSS doc -

    * {margin: 0;padding: 0;}

    That will reset all the spacing - however you'll then have to define margin and padding for every element from there on down.

    You can also use an image for the button instead of creating it with CSS.
    Signature
    Learn more about Wordpress and SEO
    {{ DiscussionBoard.errors[6730357].message }}
  • Profile picture of the author footballbob06
    Probably the image will be the easiest way to do it. Thanks!
    Signature
    Survival blog / Learn to Bartend
    {{ DiscussionBoard.errors[6733408].message }}
  • Profile picture of the author footballbob06
    Well now the question is how do I add the image? Here is my code.

    Code:
    add_filter('wp_nav_menu_items', 'add_search_form', 10, 2);
 function add_search_form(, ) {
          if(  == 'CHANGE-THIS-TO-YOUR-MENU-NAME' )
           .= '
<li class="search">
<form role="search" method="get" id="searchform" action="'.home_url( '/' ).'"><input type="text" value="search" name="s" id="s" /><input type="submit" id="searchsubmit" value="'. __('Search') .'" /></form>
</li>
';
     return ;
}
function add_search_to_wp_menu ( ,  ) {
	if( 'primary' ===  -> theme_location ) {
 .= '<li class="menu-item menu-item-search">';
 .= '<form method="get" class="menu-search-form" action="' . get_bloginfo('home') . '/"><p><input class="text_input" type="text" value="Search" name="s" id="s" onfocus="if (this.value == \'Search\') {this.value = \'\';}" onblur="if (this.value == \'\') {this.value = \'Search\';}" /><input type="submit" class="my-wp-search" id="searchsubmit" value="Go" /></p></form>';
 .= '</li>';
	}
return ;
}
add_filter('wp_nav_menu_items','add_search_to_wp_menu',10,2);
    Signature
    Survival blog / Learn to Bartend
    {{ DiscussionBoard.errors[6733451].message }}

Trending Topics