Jump to content

How to stop hover border input moving?

Recommended Posts

Hey people, basically I want to add a border when hoverd over. I have done it, it's just that my input boxes move when I have over them and I don't know why, any help will be appreciated. :-) www.brightonvinyl.com/v4/sign_in.php It's basically the sign in form and the Date of birth field. Thanks for looking guys. :-)

Link to post
Share on other sites

If you take margin: -1px; out of this it should work:

.hover_select:hover {    border: 1px solid #C40000;    margin: -1px;}

Hope this helps. Kind regards, Lab.

Link to post
Share on other sites

The problem is that you're going from margin-top: 15px to margin: -1px. You're experiencing a 16px movement. So don't use the margin trick for this. You already have the right idea by giving .hover_select a transparent border. What you haven't done is given the border a dimension. So in effect it doesn't have a border until the :hover. So simply give the transparent border a 1px width. In the :hover state, change only the border's color.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...