Trouble with Button Type in IE7

[brent123456]

<button type="submit" id="search" name="submitsearch"  value="Search">

 

#search {
background: transparent url(../site_images/search.gif) no-repeat top left;
height: 20px;
width: 60px;
margin: 0 0 2px 5px;;
padding: 0;
border: 0;
text-indent: -1000em;
display:block
cursor: pointer; /* hand-shaped cursor */
cursor: hand; /* for IE 5.x */
}

 

This completely ruins my layout in IE7. It looks fine in FF. Does anyone know of what could be the problem or if there is a hack I have to do not to mess my layout up in IE? I know that it is the problem when I take it out everything goes back to normal. Thanks ???

[sKunKbad]

where is your semi-colon after display:block ?

[brent123456]

Thanks, I saw that. That wasn't the problem though .

Anyone else have an idea?

[TheFilmGod]

why this?

 

<button type="submit" id="search" name="submitsearch"  value="Search">

 

Use this instead:

<input type="submit" id="search" name="submitsearch" value="Search" />

[brent123456]

When I use

<input type="submit"

it puts borders around the submit button. Even when I use border:0;. It also puts writing over the image even when I use text-indent:-1000em; I am trying to use a submit image instead of a button.

[AndyB]

<input type="image" ....

 

http://www.cs.tut.fi/~jkorpela/forms/imagebutton.html is a useful read.

[brent123456]

Thank Andy, I tried to use the

input type="image"

For some reason again in ie6 and ie7 with I click the button the form data is not passed to the form.

 

function generate_searchtopform (){ // make the search bar at the top of the page
    $formsearch = false;
    $formsearch .= '<form action="' . $_SERVER['PHP_SELF'] . '?do=search" method="POST">';
    $formsearch .= '<input type="text" name="strain" />';
    $formsearch .= '<input type="image" src="../site_images/search.gif" class="search" name="submitsearch"  alt="Search Seeds">';
    $formsearch .= '</form>';
    
    return $formsearch;
}

 

I might have to move this one to php.

[AndyB]

Thank Andy, I tried to use the

input type="image"

For some reason again in ie6 and ie7 with I click the button the form data is not passed to the form.

 

Well, we'd need to see the actual form processing script to help with that. Best guess is that your form processing script is looking for $_POST['submitsearch'] and processing if it's set.  Wrong! With an image submit, clicking it passes the x and y co-ordinates of the clicked location relative to the upper-left corner of the image.  $_POST['submitsearch_x'] and $_POST['submitsearch_y'] will be the values.  IE does it right and FF does that bit wrong

[brent123456]

That was exactly right. So when I submit the form I would do a

 if ($_POST['submitsearch_x'] && $_POST['submitsearch_y']) {
process $_POST['searchdata'] here? or would it be $_POST['searchdata_x'] && $_POST['searchdata_y']
}

if it is $_POST['searchdata_x'] and $_POST['searchdata_y'] what would be contained in the values of each of these?

Say is the textbox was say name="searchdata".

 

Thank you. Brent

[AndyB]

It's only image submits that return the x and y coordinates. And the value returned by each is the x or y coordinate of WHERE in the image it was clicked. if isset($_POST['submitsearch_x']) would be a rational test.

 

Other fields contain their responses in $_POST['fieldname'] variables, so it would be process $_POST['searchdata'] in the example you cite.

[brent123456]

This worked perfect thanks Andy. I am having trouble trying to line up the text box and the image submit button. Thanks again!