http://jsfiddle.net/ad8dQ/13/
This is the URL.
As you can see, it works in Firefox but not in Chrome.
If I add translate3d(0,0,0) to a fixed element, then I can easily make an element overlap it. (For example, that red-colored div is happily going over the fixed div.) However, if that element contains another element with fixed background-image, then the image disappears in Chrome.
(Please see firefox for how it should work.)
Let me add that if I don't have attachment as fixed of the background image, then the issue disappears, but I do need fixed background image.
Related
I'm having an issue with this site:
https://connectiveworldenergy.com/
At the top of the page, there is some text saying "Design a happy life and create a stress free path that you've always dreamed of.
Let us show you how!". It is a clickable link.
On FireFox and IE, the link is not clickable.
I think it might have something to do with z-Index. The menu is overlapping on top of it. I've tried adjusting Z-index but haven't had luck. So then I read about z-index and it appears z-index requires elements to have the same "position"
The elements on top of it are transparent background... not sure why it's not clickable.
You have two elements: .cwe-ribbon (your clickable link) and `#top-header' (the rest of your header).
You gave #top-header a z-index of 100 so .cwe-ribbon (your clickable link) will need to be greater than this to sit on top of the other element (and be clickable).
set the z-index of .cew-ribbon to 101. In order for z-index to work you need to give the element a position so go ahead set it to position: relative.
I have a website that requires a border round the edge. This has been implemented with divs of block colour that are placed around the edges of the screen. This works for most of the site, but one one section, the content overlaps the borders (see here, and scroll down: http://dev.birddartmouth.co.uk/#range).
I've tried putting the z-index of the range items (a.item) to -1, and this then sits below the border but it makes the links not clickable. Does anyone have an idea of how to fix this?
Moving the border divs from <header> tag to just before the closing </body> tag, and then adding z-index:11; to .border-divs (line 1094) fixes the issue for me
using the latest version of Chrome. (30.0.1599.69 m)
Try giving z-index:11; to #bottom-pink and #top-pink.
Your images have a z-index of 10, there for your borders need to have a higher z-index to to be on the top of them. This is why the rest of the text is not showing through and only the images are.
The position attribute of the borders also needs to be absolute or relative not fixed in order for chrome to respect the z-index attribute.
I am working on a BuddyPress theme where there will be some images floating right on the padder div using add_action="bp_before_blog_post". On Linux/Firefox everything works as expected. The transform expands out and overlaps the sidebar div.
On Chrome and Safari the image expands to the sidebar div but then is hidden. I have tripple checked BP-Default theme and there isn't a css overflow: hidden value for the sidebar, or padder div. I have checked every line of bp-default.css, and used Chrome Web Developer and Firebug to check the live css.
I can't try a position:absolute as it needs to float on the right of the blog post. I setup a jsfiddle to try to show the behavior except that unless I created a div with overflow:hidden I couldn't replicate it. When you hover over the bottom image on the right you can clearly see the clipping. I found a public site with the BP-Default theme here, if you need to take a look at the css.
Since the container div does have overflow: hidden I am wondering if it is being inherited. If that's the case the theme doesn't work properly when I do overflow: transparent or remove it entirely.
Can you find where/why the image is clipped on sidebar div edge?
Is there a way to bust out using z-index or some other CSS method?
Is this a bug on Chrome/Safari to clip at the div edge or maybe a bug in Firefox 23 Linux that it doesn't?
I have a full width video background running on a page, its container is absolutely positioned (and needs to be) and this seems to be breaking a fixed position element (an aside) elsewhere on the page.
When I remove the absolute positioning of the video container the aside is fixed as normal. Otherwise the fixed positioning doesn't work.
Here is the page with relevant elements isolated: http://xnthony.com/html/video_fixed.html
I've tested this in Chrome, Safari and Firefox.
Try this, i had no position problems with this plugin: http://dfcb.github.io/BigVideo.js/
I have an anchor within a div overlaying all the contents of the div. The problem is that IE8 is ignoring the link when you hover over any non-white-space (e.g. an image or some text): http://jsfiddle.net/jf7xf/
What CSS do I need to apply to what elements to make IE8 have the anchor overlay any sibling elements?
After a lot of experimentation, I have found that to overlay the anchor in IE8 I have to place an image into the anchor. I have used a 1x1 transparent pixel, set the width and height as 100% and it works! Yay!
http://jsfiddle.net/jf7xf/44/