WordPress.org

1. orbital2000
   Member
   Posted 2 years ago #

   Simple, but can't figure it out - trying to align two inline elements: search form and submit button/image.

   Url: http://www.georgiapellegrini.com/wordpress

   html:
   

   <form id="searchform" method="get" action="<?php echo get_option('home') ?>/"><input type="text" value="<?php _e("Search...", 'studiopress'); ?>" name="s" id="searchbox" onfocus="if (this.value == '<?php _e("Search...", 'studiopress'); ?>') {this.value = '';}" onblur="if (this.value == '') {this.value = '<?php _e("Search...", 'studiopress'); ?>';}" /><input type="image" src="http://www.georgiapellegrini.com/wordpress/wp-content/themes/georgiapellegrini/images/submit.png" alt="Search"
   class="submit"  value="" />

   css:
   

   #searchform {
   float:left;
           margin-left:0px;
   	margin-top: 0px;
           margin-right:1px;
           margin-bottom:20px;
   	padding: 0px 0px 0px 0px;
   	display: inline;
   	}
   
   #searchbox {
   	background: #ffffff !important;
   	width: 260px;
           height:16px;
   	color: #666666;
   	font-size: 12px;
   	font-family: Frutiger Linotype, Tahoma, Verdana;
   	font-weight: normal;
   	margin: 0px 0px 0px 0px;
   	padding: 3px 0px 4px 5px;
   	border-top: 1px solid #d6d5d5;
   	border-right: 1px solid #d6d5d5;
   	border-left: 1px solid #d6d5d5;
   	border-bottom: 1px solid #d6d5d5;
   	}
   
   #s {
   	background: #F7F5EF !important;
   	width: 270px;
   	color: #333333;
   	font-size: 12px;
   	font-family: Frutiger Linotype, Tahoma, Verdana;
   	font-weight: normal;
   	margin: 0px;
   	padding: 4px 0px 3px 5px;
   	border-top: 1px solid #759697;
   	border-right: 1px solid #A3BAB9;
   	border-left: 1px solid #759697;
   	border-bottom: 1px solid #A3BAB9;
   	}
   
   .submit {
           margin-left:5px;
   	}

2. orbital2000
   Member
   Posted 2 years ago #

   Note the search form and looking glass icon don't vertically align. The image sits too high, but I can't move it via margins, etc. Can move it left/right, but not up/down.

3. jshreve
   Member
   Posted 2 years ago #

   try adding vertical-align: top; to .submit

   I tried it in firefox with firebug and it worked for me.

4. orbital2000
   Member
   Posted 2 years ago #

   wonderful, thank you! it worked like a charm.

Topic Closed

This topic has been closed to new replies.