2

I have no idea how/why this is happening... But I've been re-building an interface from scratch since the old one was hacky and unreliable.

Anyway, I have divs which are acting as "buttons." The gradient background I've got assigned to them wasn't working, then I stumbled across an interesting behavior... The background DOES display if I make the position attribute absolute, rather than relative.

Here are my examples: 1) Absolute positioning 2) Relative positioning

The sections in question (css wise) are here:

.banner > .button {
position: relative;
top: 10;
display: inline-block;
height: 85%;
min-width: 80px;
margin-top: auto;
margin-bottom: auto;
text-align: center;
vertical-align: middle;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
-webkit-user-select: none; /* Chrome/Safari */        
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */

/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;
}
.banner > .button > span {
    left: 30%;
}
.blueGlass {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3b679e+0,2b88d9+50,207cca+51,7db9e8+100&0.48+0,0.58+100 */
    background: -moz-linear-gradient(top,  rgba(59,103,158,0.48) 0%, rgba(43,136,217,0.53) 50%, rgba(32,124,202,0.53) 51%, rgba(125,185,232,0.58) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(59,103,158,0.48) 0%,rgba(43,136,217,0.53) 50%,rgba(32,124,202,0.53) 51%,rgba(125,185,232,0.58) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(59,103,158,0.48) 0%,rgba(43,136,217,0.53) 50%,rgba(32,124,202,0.53) 51%,rgba(125,185,232,0.58) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7a3b679e', endColorstr='#947db9e8',GradientType=0 ); /* IE6-9 */
    color: white;
}
.blueGlass:hover {
    -webkit-box-shadow: inset 0px 0px 26px 12px rgba(255,255,255,0.15);
    -moz-box-shadow: inset 0px 0px 26px 12px rgba(255,255,255,0.15);
    box-shadow: inset 0px 0px 26px 12px rgba(255,255,255,0.15);
    cursor: pointer;
}

Any thoughts on why this is happening, and more importantly how I can go about fixing it?

Thanks!

Ethan
  • 787
  • 1
  • 8
  • 28

2 Answers2

1

The position: absolute; for the following class .verticalCenter hides the color behind the gray div, change it to folowing code,It works here

.verticalCenter {
  position: relative;
  top: 60%;
}
Gowtham
  • 1,557
  • 12
  • 24
  • @Gowtham: Changing `verticalCenter` class to `top: 60%` does not makes it middle align. It will just works for that scenario only. – Jerad Rutnam Sep 11 '16 at 04:02
  • Ya , but your question was Background-Color not applying to relative objects, but will to absolute positioning, so i answered for that – Gowtham Sep 11 '16 at 04:05
1

First issue is,

.banner {
    ...
    min-height: 40px;
}

Simply change it to,

.banner {
    ...
    height: 40px;
}

Because if you use percentage height value to child elements. You have to give fix height to the parent wrapper. Otherwise it will not work as you expect.

See the example: https://jsfiddle.net/23qp2j8b/4/

And next issue is,

Remove the verticalCenter in the spans. And add these stylings to the button > span,

.banner > .button > span {
    ...
    padding: 6px 15px;
    display: block;
}

Complete fix example: https://jsfiddle.net/23qp2j8b/5/

Hope this is what you needed! ;)

Jerad Rutnam
  • 1,536
  • 1
  • 14
  • 29