CODEWITHSUNDEEP
htmlcssstyling
MOLOCOG
MOLOCOG

Reputation: 3

Border not showing up

I am pretty new to CSS borders, and i have run into some issues i don't seem to be able to fix. As im new to this, and there is propably many other wondering the same thing (of css newbies). I have this border that should work fine, according to my thinking (might be full of wrong-ish logic). The code i use for the hover and default state is:

.profile-box .opener {
    float:left;
    background: url(http://seek4fitness.net/Design/Gfx/DropDowns/white.on.red/icn_small_black_arrow_down.gif) no-repeat;
        background-position: center center;
        background-color: #fff;
    width:32px;
    height:38px;
    overflow:hidden;
    text-indent:-9999px;
        border-left:1px solid #dde2e8;
}
.profile-box .opener:hover {
    float:left;
    background: url(http://seek4fitness.net/Design/Gfx/DropDowns/white.on.red/icn_small_black_arrow_down.gif) no-repeat;
        background-position: center center;
        background-color: #F0F0F0;
    width:32px;
    height:38px;
    overflow:hidden;
    text-indent:-9999px;
        border-left:1px solid #dde2e8;
}

The issue do not appear to me in any way, and im as said twice, new to css. Please help me with this. It will mean a lot to me. Thanks.

FIDDLE: http://jsfiddle.net/dCe3u/

Upvotes: 0

Views: 410

Answers (2)

Bobby
Bobby

Reputation: 472

I just checked your code. I literally copy and paste your code and the border does appear, I think the problem is the color of the border is too light (if you use white background). See the demo http://codepen.io/ImBobby/pen/yicCz. In that demo I intentionally change the border color to red.

I also notice that you declared same style on hover state of .opener element except for the background-color. You might want to change your code into this:

.opener {
    float: left;
    background: url(http://seek4fitness.net/Design/Gfx/DropDowns/white.on.red/icn_small_black_arrow_down.gif) no-repeat;
    background-position: center center;
    background-color: #fff;
    ...
}

.opener:hover {
    background-color: #F0F0F0;
}

short explanation, .opener:hover will inherit styles from opener.

Upvotes: 0

Prasanth K C
Prasanth K C

Reputation: 7332

If you want to apply border to all the four sides you should change

border-left:1px solid #dde2e8;

to

border:1px solid #dde2e8;

FIDDLE HERE

border-left will apply border only to the left side, You can refer more on border here CSS BORDER >>

Upvotes: 1

Related Questions