Is it possible to have a partially transparent background/image (png logo with shadow) positioned over (using higher z-index or in some other way) some element (menu), without the top image (logo) interfering with the :hover behavior of the partially covered element (menu)?
Currently I have a div with a background image (logo) covering the menu, so the menu elements never get any :hover triggers (and can't be clicked either). I'd like the div to be displayed as it is now, but all mouse related clicks and hover events would pass trough the div to the menu as if the menu was on top.
pointer-events: none is the answer CSS provides to do this.
Browser support: http://caniuse.com/pointer-events (works everywhere except IE10 and older)
See: http://jsfiddle.net/7D5Jt/
If the browser support for pointer-events is not acceptable, you'll have to use JavaScript.
Related
I have a problem related with the css 'top' attribute of a Foundation modal.
I have long list of anchors and when I click in each anchor, a modal is opened. I have the css top attibute set to 100px.
When I use Chrome, even if I am in the bottom of the list and I click in one of the last anchors, my modal appears always at 100px of the top of the screen, i.e at 6356px of the top of the body. However, using Firefox, when I click in one of these last anchors, my modal appears at 100px of the top of the body, so I have to scroll up to see the modal. What can I do to make Firefox behave like Chrome?
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 want to use CSS to make a userstyle for stylish that would change the appearance of the "resize window corner" element. I don't know which selector to use.
scrollcorner works only if there are both vertical and horizontal scrollbars present.
Some example screenshots:
only horizontal scrollbar - the resize corner is white
only vertical scrollbar - the resize corner is white
both scrollbars present - the resize corner is properly styled using the CSS code:
scrollcorner{-moz-appearance: none !important; background: red !important;}
We are talking about implicitly created element frames here which makes things complicated to investigate - they are not present in the DOM so not even DOM Inspector will show them. However, the element you are looking for is apparently a xul:resizer element. I seems that if only one scroll bar (also an implicitly created element frame) is present then this element will be a child of this scroll bar. In the case of two scroll bars a scrollcorner element frame is created as a parent for the resizer. I guess that the correct selector would be this:
browser resizer
{
...
}
This one will only style the resizer belonging to the browser element, not any other resizers like text area resizers.
A warning: I guess that you are registering a new agent stylesheet, because other stylesheets (like user stylesheets for example) will not apply to implicit nodes. You should be careful with that, this is explicitly not safe and unexpected styles here might cause browser crashes (see bug 541506 for an example of such issue).
Using Dom Inspector. (I can't verify the selector, since I don't have mac).
https://addons.mozilla.org/en-US/firefox/addon/dom-inspector-6622/?src=search
You'll want to inspect the 'chrome'.
I have a test page located at http://www.candyundies.com/template_non_product.php.
In Opera, FireFox, Safari and Chrome no problems, however in IE 8
my submit button (GO) located beside my search text box, which is in its own div (search2) is under the background div color. I have tried z-index but cannot get it to display on top of the background color. Any ideas what I'm doing wrong?
You could set the z-index for this element through id or, better yet, set the backgrounds z-index to be beneath other elements and above the body if it's not the body itself, as you described.
Adding position: absolute/relative and z-index 1 for example will make it visible again. (to the submit button ofcourse)
I essentially have two div tags I'm dealing with. On this page - www.employeratlas.com/search.html - when you click on any of the four tabs that tab has a border around it. The idea is that the border is black on the left, right, and top, and is white on the bottom to cover up the border of the div below it. This works fine in everything but IE6 and IE7 (IE6 example here http://www.employeratlas.com/images/ie_tabs.png). I've tried setting the z-index to make the top tab above the other, but it doesn't work.
IE has a different interpretation of z-index, taking into consideration parent elements' z-indexes. In essence, it's not possible to elevate an element above its parent's z-index.
Background info on quirksmode.org
An example of working around it