CSS issue with overflow-y

Question

I have a video player on my site which will have a list of videos on the right hand side. This list will keep growing over time and thus comes the need to have overflow-y: scroll; added to my CSS.

But at the same time, I have a nifty little hover effect which adds an arrow while hovering and once you have clicked.

The problem is, when I add overflow-y: scroll; to the container, it removes my arrow effect, does anybody know how I can keep the scroll effect and the arrow at the same time?

Please see FIDDLE for an example.

You will notice I have added a comment where I think the overflow should be added, but I might be mistaken:

/*THIS IS WHERE I NEED TO ADD OVERFLOW-Y SCROLL*/
#My-Vids #videos .list ul {
    background-color:#004461;

    height:482px;
    margin:20px
}

EDIT: to see what happens, just place overflow-y: scroll; into my code.

The scrollbar is pushing the sidebar over to the left, so you need to remove some of the right margin/padding to get the arrow to show again. — TylerH
– TylerH, Commented Apr 14, 2014 at 14:26
@TylerH - I literally just figured that out myself now! Lol.. would be the last thing I try after posting here. I feel ashamed! HAHA.. Thanks you though. — Fizor
– Fizor, Commented Apr 14, 2014 at 14:28
no worries. If you are truly ashamed, though, you do have the ability to delete your own question :-P — TylerH
– TylerH, Commented Apr 14, 2014 at 14:29
Maybe someone else will be an idiot one day and this post will help them ;) haha — Fizor
– Fizor, Commented Apr 14, 2014 at 14:32
@AndreaLigios Semicolons on the last property of a selector is not required in CSS. So they are not "missing", and the code will be interpreted fine (read: correctly) by browsers. "Missing" is different from what you think is "bad practice" :-) — TylerH
– TylerH, Commented Apr 14, 2014 at 14:46

Niet the Dark Absol · Accepted Answer · 2014-04-14 14:30:05Z

1

You need to do a few things:

Remove the margin-left on your list
Add padding-left to match the original amount
Remove the background colour from the list
Apply that background colour to the list items instead
Change your list header <p> elements to use padding instead of margin.

The end result is this, which I believe is the effect you want.

answered Apr 14, 2014 at 14:30

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Fizor Over a year ago

Thanks Niet, I figured it out shortly after posting! One of those blonde moments. But Ill give it to you anyways. :)

Collectives™ on Stack Overflow

CSS issue with overflow-y

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related