div hover effect changed after adding text-content

Question

The moment I added text in my div, the hover effect changed. The hover effect was to increase the border width but it started moving the other divs in the same line. If I remove text from just ONE div of all the divs appearing in one line, the hover effect is okay. But it persists on the next line.

The fiddle is http://jsfiddle.net/u716vyoL/1/

Here is my code: CSS

    <style type="text/css">
    .ProcOuterDiv{
        #margin:4px 5px 4px 5px;
        display:inline-block;
        height:26px;
        width:26px;
    }
    .Proc{
        margin:2px 2px 2px 2px;
        height:23px;
        width:23px;
        #padding:2px 2px 2px 2px;
        border: 2px solid #A3A0FA;
        border-radius: 1px;
        text-align:center;
    }
    .Proc:hover{
        border: 3px solid #F77C60;
        border-radius: 5px;
        cursor:pointer;
        box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(252, 69, 69, 0.8) !important;
    }
</style>

HTML:

<div class="ProcOuterDiv"><div data-val1="1" onclick="SelectProc(this);" class="Proc">Cr</div></div><!--
--><div class="ProcOuterDiv"><div data-val1="2" onclick="SelectProc(this);" class="Proc">Br</div></div><!--
--><div class="ProcOuterDiv"><div data-val1="3" onclick="SelectProc(this);" class="Proc">Ca</div></div><!--
--><div class="ProcOuterDiv"><div data-val1="4" onclick="SelectProc(this);" class="Proc">Fill</div></div><!--
--><div class="ProcOuterDiv"><div data-val1="5" onclick="SelectProc(this);" class="Proc"></div></div><!--
--><div class="ProcOuterDiv"><div data-val1="6" onclick="SelectProc(this);" class="Proc">Im</div></div><!--
--><div class="ProcOuterDiv"><div data-val1="7" onclick="SelectProc(this);" class="Proc">RC</div></div><!--
--><div class="ProcOuterDiv"><div data-val1="8" onclick="SelectProc(this);" class="Proc">Den</div></div><!--
--><div class="ProcOuterDiv"><div data-val1="9" onclick="SelectProc(this);" class="Proc">MOB</div></div><!--
--><div class="ProcOuterDiv"><div data-val1="10" onclick="SelectProc(this);" class="Proc">Im</div></div><!--
--><div class="ProcOuterDiv"><div data-val1="11" onclick="SelectProc(this);" class="Proc">SP</div></div>

This is a [well-known](http://stackoverflow.com/questions/17154707/using-display-inline-block-columns-move-down) [issue](http://stackoverflow.com/questions/9273016/why-is-this-inline-block-element-pushed-downward) with `inline-block`s, You could [align them](http://jsfiddle.net/hashem/u716vyoL/3/) at the top of the container by `vertical-align: top;` declaration. — Hashem Qolami, Sep 18 '14 at 12:10

score 0 · Answer 1 · answered Sep 18 '14 at 11:54

0

Is this what you want!

I just removed 'border-radius' property and replaced 'border' property with 'outline' property.

outline: 2px solid #A3A0FA;

answered Sep 18 '14 at 11:54

Leo

5,017
6
32
55

Thanks @Leo, the outline actually creates additional border around the existing BLUE border, which was not exactly what I planned. Anyway, thanks for your support. – FaisalKhan Sep 18 '14 at 16:53

Darshak Shekhda · Accepted Answer · 2014-09-18T12:06:06.480

In your code default border width for div.Proc is 2px and OnHover of increase border width by 1px, so element have jerk in border and spacing between two elements.
In your code you apply shadow only on hove but i give default shadow and color is transparent and on hover color will be change. so looking nice!

jsfiddle

HTML

<div class="ProcOuterDiv"><div data-val1="1" onclick="SelectProc(this);" class="Proc">Cr</div></div><!--
--><div class="ProcOuterDiv"><div data-val1="2" onclick="SelectProc(this);" class="Proc">Br</div></div><!--
--><div class="ProcOuterDiv"><div data-val1="3" onclick="SelectProc(this);" class="Proc">Ca</div></div><!--
--><div class="ProcOuterDiv"><div data-val1="4" onclick="SelectProc(this);" class="Proc">Fill</div></div><!--
--><div class="ProcOuterDiv"><div data-val1="5" onclick="SelectProc(this);" class="Proc"></div></div><!--
--><div class="ProcOuterDiv"><div data-val1="6" onclick="SelectProc(this);" class="Proc">Im</div></div><!--
--><div class="ProcOuterDiv"><div data-val1="7" onclick="SelectProc(this);" class="Proc">RC</div></div><!--
--><div class="ProcOuterDiv"><div data-val1="8" onclick="SelectProc(this);" class="Proc">Den</div></div><!--
--><div class="ProcOuterDiv"><div data-val1="9" onclick="SelectProc(this);" class="Proc">MOB</div></div><!--
--><div class="ProcOuterDiv"><div data-val1="10" onclick="SelectProc(this);" class="Proc">Im</div></div><!--
--><div class="ProcOuterDiv"><div data-val1="11" onclick="SelectProc(this);" class="Proc">SP</div></div>

CSS

<style type="text/css">
.ProcOuterDiv{
    #margin:4px 5px 4px 5px;
    display:inline-block;
    height:26px;
    width:26px;
}
.Proc{
    margin:2px 2px 2px 2px;
    height:23px;
    width:23px;
    #padding:2px 2px 2px 2px;
    border: 3px solid #A3A0FA;
    box-shadow: 0px 1px 1px transparent inset, 0px 0px 8px transparent;
    border-radius: 1px;
    text-align:center;
}
.Proc:hover{
    border: 3px solid #F77C60;
    border-radius: 5px;
    cursor:pointer;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(252, 69, 69, 0.8);
}

Thanks. It worked. About your comment for the border, I have an outer div which is 26px , I used it to provide cushion to the inner div which is 23px. So I was expecting that outer div will absorb the jerk created by one additional pixel by the inner div but that didn't work, conceptually it should have. Anyways, I appreciate you taking time and providing me the solution. — FaisalKhan, Sep 18 '14 at 16:50

div hover effect changed after adding text-content

2 Answers2