Question

I’m using some components from twitter bootstrap css and have combined into a custom css file.

I’m using mostly the components relating to the toolbar and have setup a toolbar.

I’ve applied the following additional css, but for .signinbox_left: hover for some reason, the hover box is much much larger than the surrounding li. I’ve tried alsorts of combinations of margins and padding and height to get this to work, but there seems to be some css property that is being applied that i cannot fathom. Furthermore, i dont know how to override this property.

Here is the hosted example: http://dl.dropbox.com/u/3417415/Toolbar/toolbar.html

Here is the css that isnt working the way intended. Hover over “create account” to see what i mean.

.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;

    }

Answer 1

Try this. Remove the float and the position.

.signinbox_left:hover{

  background-color: red;
  -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;

}

Notice there is no space between the class and the :hover.