Menu
Basically what it does is render the top-right and bottom-right corners round instead of the correct top+bottom-left corners.
Here's the css:
.formlabel, .formlabel2, .formhead{
width:200px;
font-size:18px;
height:22px;
font-weight:normal;
background-color:#FF8000;
text-align:right;
margin-top:5px;
padding-right:1px;
border:none;
color:white;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
From what I've been able to deduce, it happens because they're within another class that has the direction:rtl attribute. If I add direction:ltr to the above classes, then the corners are rounded correctly. (You can try this by using the above code and adding direction:rtl)
The problem is that the site is in Hebrew so I need it to stay rtl.
Any ideas?
756
I would have thought a simple solution would be to place a conditional comment in the <head> for IE9+ to use css which you have reversed.
<!--[if gte IE 9]>
<style>
.formlabel, .formlabel2, .formhead{
border-top-right-radius: 5px; /* switched from left */
border-bottom-right-radius: 5px; /* switched from left */
}
</style>
<![endif]-->
If you prefer, instead of using style in the conditional comment, you could link to a separate external stylesheet instead.
167
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
