CODEWITHSUNDEEP
css
Scipion
Scipion

Reputation: 11888

Add border-bottom property css

I am currently applying the following css to a div when I hover my mouse on:

border-bottom: 10px solid;

The problem is that all the text contained in the div is shifted upwards by 10px. How can I prevent this from happening?

EDIT:
It needs to be compatible with IE8+

Upvotes: 1

Views: 70

Answers (4)

SCHTAILian
SCHTAILian

Reputation: 448

you could try to add this property to the div box-sizing: border-box

The box-sizing property is used to tell the browser what the sizing properties (width and height) should include.Should they include the border-box or just the content-box which is the default value of the width and height properties. (http://www.w3schools.com/cssref/css3_pr_box-sizing.asp)

This works on most browsers (also IE8) http://caniuse.com/#search=box-sizing

Here is an example. 

div{
  font-family:sans-serif;
  background:#eee;
  padding:12px 24px;
  color:#333;
  box-sizing:border-box;
}

div:hover{
  border-bottom:10px solid #333;
}
<div>Some Text</div>

Upvotes: 0

Moduo
Moduo

Reputation: 623

As the answers state box-sizing: border-box; would be the answer, but remember that this is still experimental.

This is an experimental technology Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

What you can do is decrease your padding with 1px. This way you actually replace the padding pixel with the border and looks like there is just an underline appearing.

Upvotes: 1

pavel
pavel

Reputation: 27072

One option is to set box-sizing to border-box, as someone mentioned.

The second one is to make a space for border, then put there a border on hover.

<div id=a></div>
<div id=b></div>

<style>
    div {height: 100px;}
    #a {background: red; margin: 0 0 10px;}
    #b {background: green}

    #a:hover {margin-bottom: 0; border-bottom: 10px solid blue}
</style>

http://jsfiddle.net/uwng4vg7/

The last one option set transparent border to default state

#a {background: red; border-bottom: 10px solid transparent;}
#a:hover {border-color: blue}

http://jsfiddle.net/uwng4vg7/1/

Upvotes: 1

Ram kumar
Ram kumar

Reputation: 3162

Please add box-sizing: border-box property or border-bottom 10px solid transparent on normal border-bottom-color: #000 on hover .

Upvotes: 0

Related Questions