I have incorporated components from Twitter Bootstrap CSS into a custom CSS file, focusing mainly on toolbar components.
Specifically, I have set up a toolbar with various features. However, when applying additional CSS to the .signinbox_left:hover selector, I noticed that the hover box appears significantly larger than its surrounding elements. Despite my attempts to adjust margins, padding, and height, I cannot seem to pinpoint the underlying CSS property causing this issue. Additionally, I am unsure how to override it.
To see this problem in action, you can visit the hosted example here:
The problematic CSS code is as follows. Feel free to hover over "create account" to observe the issue:
.signinbox_left :hover{
background-color: red;
float: right;
position: relative;
-moz-border-radius: 8px 0px 0px 8px;
-webkit-border-radius: 8px 0px 0px 8px;
-khtml-border-radius: 8px 0px 0px 8px;
border-radius: 8px 0px 0px 8px;
}