Question

I have the following code:

<div id="search">
    <form name="quick_find" action="index.php?main_page=advanced_search_result" method="get">
        <input type="text" name="keyword" size="35" class="rounded" style="width: 320px;" value="what are you looking for?" onfocus="if (this.value == 'what are you looking for?') this.value = '';" onblur="if (this.value == '') this.value = 'what are you looking for?';" />
        <input id="searchSubmit" type="submit" value="" />
    </form>
</div>

and

input.rounded {
border: 1px solid #ccc;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 2px 2px 3px #666;
-webkit-box-shadow: 2px 2px 3px #666;
box-shadow: 2px 2px 3px #666;
font-size: 18px;
padding: 2px 7px;
outline: 0;
-webkit-appearance: none;
behavior: url(PIE.htc);
z-index:10;
}

input.rounded:focus {
border-color: #339933;
}

#searchSubmit{
background: transparent url(button_search.gif) no-repeat;
width: 21px;
height: 21px;
border: none;
cursor: pointer;
margin-left: -23px; /* image is 20x20px, so leave little extra */
margin-top: 2px; /* leave some space from the top, so button looks in the middle */
z-index:1;
}

EDIT: here’s a link to the submit button: http://traditionalirishgifts.com/button_search.gif

but I can’t get the submit button to line up properly in FF, Opera, IE and Chrome. I’ve tried fiddling around with it but I’m at my wits end.

Is the only way to deal with this to do browser hacks and I’m I going to then have problems between different versions of browsers?

Answer 1

I simplified the CSS down a bit to make it a bit more manageable and to show you my approach:

http://jsfiddle.net/G8wcP/

<div id="search">
    <form name="quick_find" action="index.php?main_page=advanced_search_result" method="get">
        <input type="text" name="keyword" size="35" class="rounded" value="what are you looking for?" onfocus="if (this.value == 'what are you looking for?') this.value = '';" onblur="if (this.value == '') this.value = 'what are you looking for?';" />
        <input id="searchSubmit" type="submit" value="" />
    </form>
</div>​

#search{ 
    width:207px;
    position:relative;
    display:block;
    border:1px solid #ccc;
}

input.rounded {
    display:block;
    width:180px;
    height:30px;
    border:0;
}

#searchSubmit{
    display:block;
    position:absolute;    
    left:180px;
    top:5px;   
    background: red;
    width: 20px;
    height: 20px;
    cursor: pointer;
}​

The approach you took probably won’t stand up to cross-browser as you have already witnessed.

Basically, style the #search div with borders. Relatively position the input (text) element and then absolute position the submit element. You could relatively position both elements if you wish.