Opera - something terrible with focus and hover events - html

Question

I have some CSS that works well in Chrome, FireFox, and IE, but looks very strange in Opera.
Link to the fiddle
Also, I took screenshots:
This what happens on just forgot link hover:
This happens on form focus (complete disaster):
Normal look in Chrome:
Submit button on focus loses it's border color (why in hell?!)
Some mess on focus, I can't explain, just take a look on second pic
I tested on the latest version of Opera. What the hell is wrong with this browser? Even IE8 shows everything as I expect it.
CSS:
.sign_in {
position: fixed;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -255px;
background: #ffffff;
width: 510px ;
height: 240px;
font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
z-index: 9999999;
font-size: 14px;
-webkit-box-shadow: 0 0 5px black;
-moz-box-shadow: 0 0 5px black;
box-shadow: 0 0 5px black;
}
.signs_form{
border-right-style: solid;
border-color: rgba(80, 140, 255, 0.83);
border-width: 1px;
margin-top: 40px;
vertical-align: 100%;
margin-left: 50px;
padding-right: 50px;
font-weight: 500;
display: inline-block;
}
input#email{
border-style: solid;
border-color: #378de5;
border-width: 1px;
padding: 3px 3px 3px 3px;
font-size: 14px;
outline: none;
font-style: normal;
font-weight: 400;
}
input#email:focus{
border-color: rgba(2, 22, 222, 0.97);
}
input#password{
border-style: solid;
border-color: #378de5;
border-width: 1px;
padding: 3px 3px 3px 3px;
font-size: 14px;
outline: none;
font-style: normal;
font-weight: 400;
}
input#password:focus{
border-color: rgba(2, 22, 222, 0.97);
}
.sign_in_submit {
margin-top: 0;
border: solid 1px #378de5;;
background-color: #ffffff;
color: #378de5;
padding: 2px 5px 2px 5px ;
font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
font-size: 16px;
font-weight: 500;
}
.sign_in_submit:hover {
cursor: pointer;
border-color: rgba(2, 22, 222, 0.97);
color: rgba(2, 22, 222, 0.97);
}
#close {
float: right;
padding-left:-10px;
padding-top: -10px;
margin-right: 5px;
}
#close_sign_in_popup {
text-decoration: none;
font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
font-size: 20px;
color: #d61354;
}
#close_sign_in_popup:hover {
color: #fc145f;
}
.forgot_pass{
display: block;
margin-top: 5px;
margin-bottom: 0;
margin-left: 2px;
font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
color: #378de5;
font-size: 13px;
font-weight: 400;
text-decoration: none;
}
.forgot_pass:hover{
height: 100%;
text-decoration: underline;
}

Answer 1

Forked http://jsfiddle.net/w29WQ/1/
.sign_in {
/*top: 50%; // so it seems the positioning gets all funky in opera
left: 50%;*/
margin-top: 0;
margin-left: 0;
/* Your other styles for this element */
}
Anyhow, seems your fixed positioning was causing errors, I simply commented out the top and left positioning in the containing div, and reset the margins to keep the element displayed.

Answer 2

Ok, guys.
1) Shifts in form
The reason is that Opera strongly dislikes inline-block as form property, which is quite logical, actually, but all other browser undertand this and it is convinient
2) Loosing border-color of submit button on field focus
But here - Opera bug, can be fixed by placing before real tag invisible copy - so it is like bait to this Opera bug.