1
0
-1

I'm creating a video gallery in Confluence. I'd like to show a "play" button when a user hovers over the speaker's picture.

This exact bit of code works when I serve the page from apache; but when I try to do the same thing in a confluence page (the body wrapped in {html} macros , the backgroud image dissappears entirely.

<html>
<body>
<style>
a.playlink { position:relative; }

a.playlink:hover div.hoverbox {
background-image: url(http://cdn-0.nflximg.com/en_US/buttons/player-add.png);
background-position: center;
background-repeat: no-repeat;
}

a.playlink:hover div.hoverbox img.speaker {
position:relative;
z-index: -1;
}
</style>

<div style="width:120px; border:1px solid black;">
<a class="playlink" title="Test" href="#">
<div class="hoverbox">
<img class="speaker" src="http://media02.linkedin.com/mpr/mpr/shrink_100_100/p/3/000/093/283/1c8b17a.jpg"
alt="" width="120" height="120" />
</div>
</a>
</div>
</body>
</html>

If it's not obvious, I'm a CSS amateur, so I'm grateful for any assistance you can provide; even if it's a "you're doing it wrong, noob!" tough love beatdown. :-)

    CommentAdd your comment...

    2 answers

    1.  
      1
      0
      -1

      Yes, I know... only idiots answer their own questions, but I figured it out. Since my z-index was -1, I figured that somewhere some element was explicitly setting background color to white.

      Various selectors for paretn elements (a whole bunch of them) explicitly set background color to white. div#main, div#content, body, div#full-height-container, etc.

        CommentAdd your comment...
      1.  
        1
        0
        -1

        Richard,

        Have you tried using the Firebug add-on for Firefox (or similar)? It will allow you to debug your CSS rules and see which rule in Confluence's CSS is overriding your rule(s).

        If you want to try the sledgehammer approach, try prepending #com-atlassian-confluence to all the rules that are being overriden. It might just work :)

        1. ricsmith

          I do use chrome's built-in debugging tools, and as far as I can tell, it's the same selector getting matched.

          And to be clear, my hover image is displaying in confluence, the problem is that the image it's supposed to be hovering over dissappears. :(

          For example, served from apache, chrome shows:

          Matched CSS Rules:

          a.playlink:hover div.hoverbox {
          1. <input class="enabled-button" style="box-sizing: border-box; display: block; float: right; font-size: 10px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 4px; vertical-align: top; position: relative; z-index: 1;" type="checkbox"/>background-image: url(http://cdn-0.nflximg.com/en_US/buttons/player-add.png);
          2. <input class="enabled-button" style="box-sizing: border-box; display: block; float: right; font-size: 10px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 4px; vertical-align: top; position: relative; z-index: 1;" type="checkbox"/>background-position: center;
          3. <input class="enabled-button" style="box-sizing: border-box; display: block; float: right; font-size: 10px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 4px; vertical-align: top; position: relative; z-index: 1;" type="checkbox"/>background-repeat: no-repeat;
          }

          When served from confluence, I see:

          a.playlink:hover div.hoverbox {
          1. <input class="enabled-button" style="box-sizing: border-box; display: block; float: right; font-size: 10px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 4px; vertical-align: top; position: relative; z-index: 1;" type="checkbox"/>background-image: url(/images/player-add.png);
          2. <input class="enabled-button" style="box-sizing: border-box; display: block; float: right; font-size: 10px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 4px; vertical-align: top; position: relative; z-index: 1;" type="checkbox"/>background-position: center;
          3. <input class="enabled-button" style="box-sizing: border-box; display: block; float: right; font-size: 10px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 4px; vertical-align: top; position: relative; z-index: 1;" type="checkbox"/>background-repeat: no-repeat;
          }
          The image URLs are different because I'm hosting the image locally on confluence to avoid non-secure content warnings. I provided the CDN version in my sample code to make it easy for anyone to copy if they were so inclined.
          It's the same image though.
          If I prefix with #com-atlassian-confluence, it still matches the rules, but still shows the same behavior.
        CommentAdd your comment...