February 24th, 2013, 01:58 AM
|
|
Registered User
|
|
Join Date: Feb 2013
Posts: 1
Time spent in forums: 18 m 17 sec
Reputation Power: 0
|
|
|
Embaded vid doesnt inherit opacity and/or z-index
Latelly I've been trying out what was presented here:
http://css-tricks.com/functional-css-tabs-revisited
and I've run across a problem that I can't get through.
When I put text or picture into .content it'disaper' like it should after clicking on the tabs but when I embade a vid from youtube and try to switch the tab the embaded vid only move but dosn't seem to change z-index or opacity.
The problem occures only in Firefox, in Chome everything is perfect, in IE? I dont know and I dont care ;]
Here's my butchering of the code:
HTML:
Code:
<body>
<img src="./bg.jpg" class="bg" />
<div class="container">
<div class="slideshow">
<div class="slide">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Embaded vid</label>
<div class="content">
<iframe width="560" height="315" src="http://www.youtube.com/embed/316AzLYfAzw" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="slide">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Text</label>
<div class="content">
<p>test</p>
</div>
</div>
<div class="slide">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">Pick</label>
<div class="content">
<img src="./vs.png">
</div>
</div>
</div>
</div>
</body>
CSS:
Code:
img.bg {
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position:
fixed;
top: 0;
left: 0;
}
.container {
position: absolute;
width: 1000px;
margin: 150px 0 0 350px;
padding: 20px;
min-height: 220px;
clear: both;
}
.slideshow {
position: relative;
min-height: 350px;
clear: both;
margin: 15px 0 25px;
}
.slide {
float: left;
}
.slide label {
font-family: Helvetica, Verdana;
font-size: 16px;
color: #A0A0A0;
text-shadow: 0px 0px 3px #333;
font-weight: bold;
margin-right: 1000px;
line-height: 250%;
position: relative;
left: -100px;
top: 25px;
z-index: 1000;
-webkit-transition: background-color .17s linear;
-moz-transition: background-color .17s linear;
transition: background-color .17s linear;
}
.slide [type=radio] {
display: none;
}
.content {
position: absolute;
top: -1px;
left: 40px;
color: #A0A0A0;
width: 600px;
padding: 20px 20px 20px 20px;
margin-left: 30px;
opacity: 0; height: 100%;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
transition: all 1s linear;
box-shadow: 0 0 20px black;
font-family: Verdana, Geneva, sans-serif;
}
[type=radio]:checked ~ label {
border-bottom: 1px solid white;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
opacity: 1;
left: 0;
background: rgba(0,0,0, .6);
}
Could someone please explain what to do to make it work in Firefox or get around it?
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
