In FF this border radius doesn’t seem to want to work.
Editable link here.
The right radius of the big box should be 0px and the left of the small box should be 0 to join them.
HTML:
<fieldset class="error">
<input id="product__79_specField_8" name="specField_8" class="text " autocomplete="" type="text" value=""/>
<input type="image" src="upload/orng_bg_arrow"upload/id="product__specfield_8_arrow" value=""></input>
<div class="errorText hidden"></div>
</fieldset>
CSS
#product__79_specField_8,
#product___specField_8 {
background-color:#ffa105;
width:194px;
height:33px;
border: 1px solid #dddddd;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-bottom-right-radius:0px;
border-top-right-radius:0px;
-moz-border-bottom-right-radius:0px;
-moz-border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-webkit-border-top-right-radius:0px;
font-weight:bold;
font-size:24px;
padding-left:55px;
float:left;
}
#product__specfield_8_arrow {
background-color:#ffa105;
width:50px;
height:33px;
border: 1px solid #dddddd;
border-left:none;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-bottom-left-radius:0px;
border-top-left-radius:0px;
-moz-border-bottom-left-radius:0px;
-moz-border-top-left-radius:0px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-top-left-radius:0px;
margin:0;
padding:2px;
}
Unfortunately, the forms of the CSS attributes vary between webkit and mozilla.
For Firefox, you want:
For Safari & Chrome you want:
You seem to have:
which isn’t valid.