0

Please take a look at this link. Hover cursor on any movie thumbnail. Have you noticed that, all li elements moving down? How can I fix that problem?

Also, click on any thumbnail, player div will slide down. there is no box shadow under #player_container even if I set it in css files

#player_container{
    display:none;
    height:510px;    
    width: 100%;
    background-image: url(images/bg/bg_tile.jpg);
    margin-top: -510px;
    padding-top: 20px;
        -moz-box-shadow: 0px 10px 5px #888;
    -webkit-box-shadow: 0px 10px 5px #888;
    box-shadow: 0px 10px 5px #888;
}
3
  • i don't see no problem in chrome? Commented Dec 17, 2011 at 0:40
  • @ptriek there is no box shadow under #player_container even if I set it in css files tried to change z-index, no success Commented Dec 17, 2011 at 0:42
  • @TuralTeyyuboglu ok I'll add to my answer Commented Dec 17, 2011 at 0:54

5 Answers 5

3

On video add a transparent border seems to fix it

.video {
    border: 1px solid transparent;
    float: left;
    font-size: 11px;
    height: 150px;
    margin: 0 25px 25px 0;
    width: 228px;
}

There is a couple off different way to fix the next part off your question. One quick way is too add another container like

<div style="display: block;" class="gradient sh" id="player_container">

    <div class="jquery-youtube-tubeplayer" id="player">

    <div id="tubeplayer-player-container1324082555277"><iframe width="853" height="480" frameborder="0" src="http://www.youtube.com/embed/LxBGDijiii0?autoplay=1&amp;autohide=1&amp;controls=1&amp;rel=0&amp;fs=1&amp;wmode=transparent&amp;showinfo=0&amp;modestbranding=0&amp;start=0&amp;theme=dark&amp;color=red&amp;enablejsapi=1&amp;origin=http://tural.us" title="YouTube video player" allowfullscreen=""></iframe></div></div>.
    <div class="bottomSpan"></div>    
</div>

and put your box shadow on this

.bottomSpan {
    box-shadow: 0 10px 5px #888888;
    display: block;
    height: 17px;
    position: absolute;
    width: 100%;
}
Sign up to request clarification or add additional context in comments.

3 Comments

fixed, 1 of porblems, please take a look at second probem. Updated question
this is happening because your container videowall is overlapping it, the shaddow is there
modified my response with a quick solution to your second part
1

For me changing the margin on the corresponding < li > would make more sense.

Comments

1

That is because on hover you are adding a border which makes the container 2px bigger

the solution to give the initial class a border

.video {
    border: 1px solid #fff
    float: left;
    font-size: 11px;
    height: 150px;
    margin: 0 25px 25px 0;
    width: 228px;
}

Second Problem:

To make z-index work you need to give it a position:relative property

#player_container {
   display: none;
   height: 510px;
   width: 100%;
   background-image: url(images/bg/bg_tile.jpg);
   padding-top: 20px;
   -moz-box-shadow: 0px 10px 5px #888;
   -webkit-box-shadow: 0px 10px 5px #888;
   box-shadow: 0px 10px 5px #888;
   z-index: 2;
   position: relative;
}

2 Comments

there is no box shadow under #player_container even if I set it in css files tried to change z-index, no success
@TuralTeyyuboglu See my solution to the second problem
1

You're adding a border when the mouse hovers but not reducing the size of the element. The "height" and "width" of an element, in the W3C box model, describe the size of the contents of a block element. The padding and the border are added to that.

Some browsers allow you to switch back to the "border-box" box sizing model:

  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;

However Internet Explorer wont, I don't think, understand that. Maybe IE9 or 10 would understand:

  -ms-box-sizing: border-box;

(You'd put that on the ".video" style.)

edit — as to the problem with the shadow on the player: there's no shadow because there's no room for a shadow. If you make the player box "position: absolute", and correspondingly adjust the content somehow (maybe give the "wrapper" div a big top padding the same as the player size) then you'll see a shadow.

You really should be using something like Firebug to play with the CSS interactively.

5 Comments

IE8 and greater support plain box-sizing: border-box.
there is no box shadow under #player_container even if I set it in css files tried to change z-index, no success
@TuralTeyyuboglu uhh ... this doesn't have anything to do with the box shadow.
Where did I say that? I fixed 1 of problems, read second issue. Question is updated
Oh sorry ... well you're probably better off asking a second question, as that issue is completely unrelated to the layout/hover issue.
0

I'm afraid your mixing things up a bit:

  • Your background-image is set on #player-container - if you want #player-container to have a shadow, you'll need an extra containing div for this background. Right now #player-containerdoes have shadow, but since it's 100% wide, and fills the vertical space, the shadow doesn't show.

  • Your player is exactly 853px x 480px, so you'll have to set #player-container to exactly these dimensions (no padding, no margin, they will be added to the width/height)

  • Add padding to the extra containing div, which also holds the background.

  • also (but not so important): #player-container has width:100% - that makes no sense - default is width:auto, so #player-container will automatically take 100% width

1 Comment

"Your player is exactly 853px x 480px, so you'll have to set #player-container to exactly these dimensions (no padding, no margin, they will be added to the width/height)" I want it to fit horizontally 100%, there is another div for player inside container

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.