Problem in IE when styling forms with CSS

http://www.urlgone.com/017416/

Hi everyone,

After much trial and error, I was able to figure out how to change the style of the search form that’s in the header. I put it into the horizontal menu, increased the height, and put in some text (‘Search…’).

.headerNavigation input{vertical-align:middle!important;
height: 22px;
margin: 3px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
<li class="headerNavigation">
<?php echo tep_draw_form('quick_find', tep_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', $request_type, false), 'get') . BOX_HEADING_SEARCH . tep_draw_input_field('keywords', '', 'value="Search..." onFocus="javascript:this.value=\\'\\'" size="15" maxlength="30" style="width: ' . (BOX_WIDTH-90) . 'px: font:Arial; font-size:9;"') . ' ' . tep_hide_session_id() . tep_draw_hidden_field('search_in_description' , '1') . tep_image_submit('button_search_icon.jpg', BOX_HEADING_SEARCH, 'align="middle"') . '</form>';?>
</li>

The problem is that this text doesn’t seem to be centered within the form, but only in IE (I’m using IE8). It looks fine in Chrome and FF3.

  1. Does anyone know what I’m missing for IE?

  2. I can’t seem to figure out how to remove the space between the form and the magnifying glass image. Any ideas?

You should stay away from inline styling and use CSS instead!

  1. The text isn’t centered in FF either. Do you mean centered within the text field?

  2. Change align=“middle” to align=“right” for the button

Hey donboe,

  1. You’re right, that’s one change I’ll have to make. Actually I am trying to vertically center the text within the field. And I sloppily tried to center the entire vertically form within the horizontal menu by adjusting the margin.

  2. Changing the align worked perfectly in FF and IE, but in Chrome it doesn’t work as the image is pushed down for some reason and the height of the entire menu is increased by another row.

Thanks for the help!

It is kind of difficult to style form elements for multple browsers, as discussed in this thread as well. For the vertical alignment you could try to set a line-height, but that is not a guarantee that it works in all browsers!

Yeah, I’m seeing that now as well on some other actual sites, where the text looks centered in FF and Chrome and not IE. I’ll try experimenting with line-height and post back in a bit. Thanks again!

Since you try to change some things, try to get rid of those inline styles on the form elements at the same time! It makes things easier!

I tried adding line-height to the CSS but that doesn’t seem to make any difference.

I did take your advice and move some things to the stylesheet:

.headerNavigation input{vertical-align:middle!important;
height: 22px;
margin: 4px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
}
<li class="headerNavigation">
<?php echo tep_draw_form('quick_find', tep_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', $request_type, false), 'get') . BOX_HEADING_SEARCH . tep_draw_input_field('keywords', '', 'value="Search..." onFocus="javascript:this.value=\\'\\'" size="15" maxlength="30" style="width: ' . (BOX_WIDTH-68) . 'px"') . ' ' . tep_hide_session_id() . tep_draw_hidden_field('search_in_description' , '1') . tep_image_submit('button_search_icon.jpg', BOX_HEADING_SEARCH, 'align="middle"') . '</form>';?>
</li>

There still seems to be an issue only with Chrome if I make it align=“right”, though I suppose I can live with that for now.

And it seems like other sites have the same issue where the text in the search form is vertically off-center only in IE, so I guess I’ll have to live with that too.

I appreciate all the advice though!

Correct me if I’m wrong but to me it seems that .headerNavigation has to do with the menu(My Account, Cart Content, Checkout) right above your main menu. Your main menu is inside #myslidemenu. So the class .headerNavigation input doesn’t effect anything

Do you have the CSS for #myslidemenu or better for the entire menu?

Actually you are correct, donboe. I moved my search form from the row above main menu (next to Checkout) to inside the main menu just yesterday. I think I probably should’ve changed the name of the class, but editing .headerNavigation input does work for now. The height, margin, and font all change for the search form when I edit that class.

For some reason, adding a line-height there didn’t seem to affect anything.

Here is jqueryslidemenu.css, in case there may be anything there, but the only relevant settings I’ve had to edit here are the gradients and the padding, which is probably the cause of my align=“right” problem in Chrome. Thanks again for that solution. I think for now I’ll leave that little space between the form and the button.

.jqueryslidemenu{
font: bold 13px Arial, Helvetica;
background: #95b3d7; /*background of tabs (default state)*/
/* for Mozilla */
background-image: -moz-linear-gradient(0% 70% 90deg, #687D96, #95B3D7 70%);
/* for IE6, IE7 */
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B1D1F1, endColorstr=#687D96); 
 zoom: 1;
/* for IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#B1D1F1, endColorstr=#687D96)"; 
/* for WebKit (Safari, Chrome, etc) */
background-image: -webkit-gradient(linear, 0% 90%, 0% 45%, from(#687D96), to(#95B3D7));
width: 100%;
}

.jqueryslidemenu ul{
margin: 0;
padding: 0px 0px 0px 0px;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
z-index: 10;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #95b3d7; 
/* for Mozilla */
background-image: -moz-linear-gradient(0% 70% 90deg, #687D96, #95B3D7 70%);
/* for IE6, IE7 */
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B1D1F1, endColorstr=#687D96);
 zoom: 1; 
/* for IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#B1D1F1, endColorstr=#687D96)"; 
/* for WebKit (Safari, Chrome, etc) */
background-image: -webkit-gradient(linear, 0% 90%, 0% 45%, from(#687D96), to(#95B3D7));
color: white;
padding: 8px 10px;
border-right: 0px solid #778;
border-left: 0px solid #778;
color: #687D96;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background: #687D96; /*tab link background during hover state*/
color: white;
/* for IE6, IE7 */
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#687D96, endColorstr=#687D96);
 zoom: 1; 
/* for IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#687D96, endColorstr=#687D96)"; 
}
	
/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
padding: 0px 10px 0px 0px;
z-index: 1;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Arial, Helvetica;
width: 155px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}

/* ######### CSS classes applied to down and right arrow images  ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}