Hey guys I'm making a new layout for my community and now I'm slicing him into pieces. Their is only 1 problem I designed a textfield where the user can search but there are 2 links right after the textfield. I don't know how to let them stick together. I've tried something and it actually works in google chrome, but in it doesn't.
.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;
}
this is what I've got in my css file
this is my html file:
<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>
Here is what it looks in firefox:
and this is what it looks in chrome: