By marktunnecliffe on

I am trying to overlay text on a views slideshow after following this tutorial from Mustardseed Media (great podcasts, they have helped me a lot) and the problem I am having is that the transparency div won't move no matter what I try to do to position it, it always stays about 5px below the image from the slideshow. I can position the text all I want though.

⋅ Categories: Drupal 6.x

Comments

coreyp_1’s picture

coreyp_1 commented

Do you have a link that we can see it in action? It is possible that your theme is conflicting somehow with the tutorial.

marktunnecliffe’s picture

marktunnecliffe commented

Unfortunately it's on a local server but here is a screen shot. http://img835.imageshack.us/img835/4120/viewsslideshowerror.jpg

I have the magazeen theme installed and this is my css related to the slideshow that I added from the tutorial.


#views_slideshow_singleframe_teaser_section_Marquee-block_2 {
  postion:absolute;
}

#transparency {
  postion:absolute;
  bottom: 0px;
  left: 0px;
  width: 578px;
  height:100px;
  background-color: #000;
  filter:alpha(opacity=80);
  opacity: 0.8;
  -moz-opacity: 0.8;
} 

#mycontent {
  position:absolute;
  top: 150px;
  left: 10px;
  color: #fff;
}
dddave’s picture

dddave commented

Try setting #views_slideshow_blablabla from position:absolute to relative.

marktunnecliffe’s picture

marktunnecliffe commented

I tried it and nothing changed. I'm pretty sure i had it set to relative but was messing with it and forgot to change it back. Thanks.

marktunnecliffe’s picture

marktunnecliffe commented

I just tried disabling the theme and set it back to garland and it's still doing it.

rennevat’s picture

rennevat commented

local installation using Views 3 and Views Slideshow 3

The transparency div also stayed ~5px below image. Firebug shows that the element is being assigned a height of 205px although the images are 200px; I compromised by positioning it 5px higher from bottom of image which allows a small strip of underlying image to show. Also no transparency in IE but perfect transparency in Firefox. The IE transparency appears for a split second on page load after clearing cache then is replaced in IE with solid color and no inherited text styles (all text, H3 and link is white). Is anyone else experiencing this?

#views_slideshow_singleframe_teaser_section_Slideshow-slideshow {
position: relative;
}

#transparency{
position: absolute;
bottom: 10px;
left: 0px;
height: 50px;
background-color: #000;
width: 100%;
opacity: 0.7;
filter:alpha(opacity=70);
-moz-opacity:0.7;
}

#mycontent{
position: absolute;
bottom: 15px;
left: 10px;
color: #ffffff;
line-height: 1em;
padding: 0px;
margin: 0px;
}

rennevat’s picture

rennevat commented

Using CSS:

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);

Was also able to correct the jagged bold text in IE by enabling ClearType in slideshow settings.

HTH