CODEWITHSUNDEEP
htmlcss
Lari13
Lari13

Reputation: 1870

Border-box style wont work

Please, see this fiddle: http://jsfiddle.net/xg6SJ/2/

Why text jumps?
Why borders on hover expands menu's div?

*, *:before, *:after 
{
  -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
}

div
{
    height: 100px;
    width: 960px;
    margin: 0 auto;
    background-color: #eee;
}

ul
{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li
{
    display: block;
    float: left;
    box-sizing:border-box;
}

li > a
{
    text-decoration: none;
    font-size: 20px;
    display: table-cell;
    height: 100px;
    vertical-align: middle;
    padding: 0 18px;
}

li:hover
{
    border-top: 2px red solid;
    border-bottom: 2px red solid;
    background-color: #ddd;
}


<div>
    <ul>
        <li><a href="#">sdfdf</a></li>
        <li><a href="#">sdfdf</a></li>
        <li><a href="#">sdfdf</a></li>
        <li><a href="#">sdfdf</a></li>
    </ul>
</div>

Upvotes: 1

Views: 159

Answers (3)

Wayne Smith
Wayne Smith

Reputation: 4868

li
{
    display: block;
    float: left;
    box-sizing:content-box;
}

Because, border-box ... The width and height properties include the padding and border, but not the margin. content-box ...This is the default style as specified by the CSS standard. The width and height properties are measured including only the content, but not the border, margin, or padding.

You are adding 2px to top on bottom on hover which where not their before.

Or add the two pixels of border to li and have the border be the same as the background until you hover.

li
{
    display: block;
    float: left;
    border-top: 2px #eee; solid;
}

Upvotes: 0

Ex-iT
Ex-iT

Reputation: 1477

The li doesn't have a fixed height. If you set the height of the li to 100px the border is put inside the element on hover.

To prevent the text from jumping you can remove the additional height added by the borders from the a like this:

li:hover > a {
    height: 96px; /* 100 - (border-top + border-bottom) */
}

Or you can add a transparent border and a fixed height to the li (demo).

li {
    ...
    border-top: 2px transparent solid;
    border-bottom: 2px transparent solid;
    height: 100px;
}

Upvotes: 3

creimers
creimers

Reputation: 5305

Because the border is added to the div on hover only. So on hovering, the div's height is expanded. If you added border-top: 2px grey to the li (in 'unhovered' state) , you won't have that jumping effect anymore.

Check the updated fiddle: http://jsfiddle.net/xg6SJ/3/

Upvotes: 0

Related Questions