Faire des liens coller à un champ de texte

Question

Hé les gars, je fais une nouvelle mise en page pour ma communauté et maintenant je le découpe en morceaux. Leur est seulement 1 problème que j'ai conçu un champ de texte où l'utilisateur peut rechercher mais il y a 2 liens juste après le champ de texte. Je ne sais pas comment les laisser rester ensemble. J'ai essayé quelque chose et cela fonctionne réellement dans Google Chrome, mais pas.

.searchbox { 
    background: url('../images/searchbox.gif') no-repeat; 
    border: 0px; 
    height: 24px; 
    width: 308px; 
    font-size: 11px; 
    padding: 1px -15px 0px 10px; 
} 
.options { 
    background: url('../images/options_active.gif') repeat-x; 
    background: url('../images/options.gif') repeat-x; 
    font-size: 10px; 
    padding: 6px; 
    margin: 0 0 0 -10px; 
    color: #6b6b6b; 
} 
.options:active { 
    background: url('../images/options_active.gif') repeat-x; 
    color: #000; 
} 
.button { 
    background: url('../images/button_bg_active.gif') repeat-x; 
    background: url('../images/button_bg.gif') repeat-x; 
    color: #fff; 
    font-weight: bold; 
    font-size: 11px; 
    padding: 5px; 
    -moz-border-radius-topright: 5px; 
    -moz-border-radius-bottomright: 5px; 
} 
.button:active { 
    background: url('../images/button_bg_active.gif') repeat-x; 
} 

ce que j'ai dans mon fichier css

c'est mon fichier html:

<div id="topbar"> 
    <form method="post" action=""> 
     <input type="text" class="searchbox" name="searchbox" value="Zoek events, nieuws, dj's, foto's en veel meer..." /> 
     <a href="#showOptions" class="options" title="Advanced options">Advanced options</a> 
     <a href="#submitform" class="button" title="Zoeken!">Zoeken!</a> 
    </form> 
</div> 

Voici ce qu'il regarde dans Firefox: alt text http://img411.imageshack.us/img411/8282/searchj.png

et c'est ce à quoi il ressemble en chrome: alt text http://img22.imageshack.us/img22/2655/searchchrome.png

Answer 1

Pour commencer, vous pouvez également utiliser -webkit-border-top-left-radius: 5px et -webkit-border-bottom-left-radius: 5px pour obtenir le même effet avec Chrome et Safari.

je ferais quelque chose comme ce qui suit:

.form { 
    position: relative; /* Alows you to absolutely position child elements */ 
} 

.searchbox { 
    float: left; 
    position: absolute; 
} 
.options, .button { 
    float: right; 
    position: absolute; 
} 
.options { 
    right: -30px; /* Width of the button to its right */ 
}