How could I get my top sticky nav to remain on top of my youtube embed on IE 7?! I have a long vertical scrolling site, which I've conditioned to work in IE7 - BUT, there is a youtube video in one scroll section, and when you scroll passed it, it goes over the top sticky menu?
Do I need to wrap a div around it, and assign a 9999 z-index to it?
For every site I've ever been on, the Youtube play always stays on top of the other elements. Assigning 9999 z-index won't solve the problem.
The only solution would be to make the Youtube Flash Player stay behind other elements - check the Youtube help on that to see if you can change any settings.
Related
I am trying to implement an off canvas menu in my Wordpress site. Instructions on coding the menu are taken from this site:
http://tympanus.net/Development/OffCanvasMenuEffects/sideslide.html
The problem is that when you open the menu and the mouse is on the menu I cannot scroll the site contents beneath the menu. This is specially important in the mobile version since the menu takes much of the space on the screen so being able to scroll the site contents is very important.
So basically I want the menu to not be scrollable, but the site contents should always be scrollable whether the menu is visible or not.
I fixed it using the javascript fixes mentioned here:
A way to scroll an underlying div when mouse is on top of a fixed div?
#howard-e Thanks for taking the time to look at this.
The problem:
When I embed a Youtube video in my page Chrome displays a vertical 1px white space on the left side of my page.
The problem is limited to Chrome and pages with YouTube embeds.
Live example:
A page with the problem (YouTube embed): http://tinyurl.com/978349d
A page without the problem (No YouTube embed):
http://tinyurl.com/95qq379
What I've tried:
I've tried resizing the video embed to a smaller width but to no
avail.
I've tried dissecting the CSS via Chrome's element inspector but to
no avail.
My question:
Can anyone suggest why Chrome is adding this unwanted space whenever a page contains a YouTube embed?
The only fix I could find is to set the #main container to width 959px instead of 960px. May not be the right solution but it works
I'm using wordpress lightbox plus plugin: http://www.23systems.net/plugins/lightbox-plus/
And it's working well but the problem is when viewed on google chrome, scrollbars appear on the lightbox overlay image.
Here's the link:
http://goo.gl/2Yy9L
Note: click on the 3 mini images at the bottom [ this is where lighbox plus is applied]
On the div with id cboxLoadedContent you have overflow-x and overflow-y set to auto. The content doesn't quite fit. You can either make the content fit in its container thus avoiding the scrollbars or you can apply overflow: hidden which will dispose of scrollbars entirely. Of course some of the image could be hidden. It looks good though so I imagine it is just a pixel hor/vert and won't be missed.
I have a series of scrollable divs on a page. When a DIV gets scrolled to say the top and the user keeps scrolling it starts to scroll the page up instead (not so much on Firefox) but on Safari and Chrome it does.
This is annoying, and I notices that on Facebook, the activity monitor, friends online and chat window do not do this. If your mouse is in the div the you can only scroll that div not the page when you reach the top or bottom.
How have they done this?
Marvellous
Facebook use a custom scrollbar instead of those that come with the browser (at least, for the friends online sidebar).
Custom made controller = custome made control. :)
I am working on this philippedecor.com site and I am having a difficulty in figuring out this css issue.
When I on mouse over on "Main categories" that appears on the right side, it shows a drop down with links in it.
Two things happens,
1) in IE(7) - the drop down hides behind another div
2) in both ie and ff, it pushes other div below that to go down and on mouse out, it looks fine.
I am not sure which css property can fix this.
please help me out
Next time, please make your URL clickable: http://philippedecor.com/
In Firefox, I also see a tiny bit of the background showing through the menu, as you can see. Mousing over this thing triggers a mouseout event, closing the menu. In IE 7, I don't see the push-down effect, only the hiding of the menu under the Flash panel and everything below it.
To prevent the menu pushing down other elements on your page, you should use position: absolute on #downmenu and probably incorporate it into the div containing "Main Categories" to position it in the right place. Use an appropiate z-index will likely prevent the drop down menu from popping under another div in IE (untested, as I don't have a debugging tool for IE at the university where I'm typing this message now).
Furthermore, I think you shouldn't use two menus containing exactly the same content, that can be confusing to visitors of your site (actually, I didn't read your post well enough and moused over the left instance). Also, you shouldn't put text in images without providing alternate texts, screen readers and the like can't "see" it this way (preferably use a suitable image replacement technique). And all those s in the lis are totally unnecessary and not according to rules for semantic HTML; just use padding on them or something. By the way, you should make the rounded cursors of 'Main categories' transparent (now two little white corners are shown). Just my $ 0.02...