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. :-)
Community moderators have prevented the ability to post new answers.
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.
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 :)
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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:
When served from confluence, I see:
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.