We have a tooltip which appears when you mouse over a small (?) image. However, in Chrome, when you un-hover (mouse out), a part of the image on our tooltip somehow still displays, like a ghost image of some sort.
This is the jsFiddle Test Case:
http://jsfiddle.net/UYxBt/
Dont use inline element '.tooltip span'. Use 'div' or add 'display:block' to this span on your css file.
http://jsfiddle.net/fliptheweb/UYxBt/1/
Related
Am displaying a chart using highchart and data table below it, When i hover over chart tooltip should display, If the tooltip overflow the chard continer div then the tooltip is transperent and text beside the tooltip are visible, Please check the image attached
Note: opacity is set at 1 and background white
Without seeing further code, it's just guessing the problem.
Perhaps this article will help solve this problem.
z-index article from mozilla dev
Or maybe u have some positioning errors, take a look at this:
positioning article from mozilla dev
But in the first place, for me it looks like a z-index problem.
I am attempting to work out how Invision's blog animation works. Specifically the zoom and shading on the title image pictured below when scrolling.
I would have thought this would be a CSS animation, but it doesn't appear in Chrome DevTools 'Animations' tab.
How does this animation work, and why doesn't it appear in the 'Animations' tab?
I had a quick look and here is what I came up with:
Let's start at the element .post-hero: this acts as a wrapper and has position: fixed to make the image more or less stay in place as we scroll.
Inside this there is the .hero-bg element which contains the background image itself. Note that this element has inline styles setting its background to none, but it has a data-bg attribute pointing to the background image itself. My guess is that on page load, some JavaScript is used to take this attribute and add the actual image.
The actual image is set as an <img> element, inside the .backstretch element inside .hero-bg. Now, the .backstretch element is where the animation itself happens: the opacity on this element changes as we scroll (to change the amount of shading), and there's a transform with 3D translation and scaling on the element changing as well. I guess this is done using JavaScript and a scroll event listener on the page.
Following .hero-bg, there is .hero-overlay which has a background color of #252b33 and an opacity of 0.35 to provide the shading effect on the image, together with the opacity of the actual image changing as the page is scrolled.
Edit: if you right click the .backstretch element and select "break on attribute modifications", then scroll, you'll find that the attributes of the element are modified in a file called CSSPlugin.min.js. Googling this seems to point to CSSPlugin being a plugin for the GSAP animation library... I don't have experience with it myself but I know it's popular, others can probably confirm whether or not this is what's used to do the animation. My guess is that the animation is done using GSAP CSSPlugin.
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 am trying to create a menu bar which will consist of a series of icons and text laid out horizontally. I am using an unordered list as the container, but I am having a problem. All of the menu items which contain no text, just an empty anchor tag with a background image, display in-line just fine.
However, whenever I try to use text, instead of a background image as a menu item, the text list item is slid downward. You can see this example on JSFiddle, be sure to rollover each of the items to see how the background color indicator behaves: http://jsfiddle.net/pAfgm/6/.
Notice how each of the links with a globe icon (yes, I hot-linked from Facebook for this example) displays nice and neat. However the text and it's background indicator are way off alignment. I see this is the case for FF 3.6, Opera 11, but not IE7! For once, IE7 isn't having a problem where other browsers are.
Could someone please show me how I can correct this issue?
Thank you for your time!
You simply need to add vertical-align: top to nav.pluginBar ul.pluginBarLeft li, on which you also have display: inline-block.
See: http://jsfiddle.net/pAfgm/7/
The default vertical-align value is baseline, which is the cause of this problem.
See the difference between different vertical-align values here:
http://www.brunildo.org/test/inline-block.html
See the "baseline" section here for a graphical explanation:
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/