I have this simple custom cursor code;
* {
cursor: url('../../images/site-design/cursor.png'), default;
}
I've tested this on the latest version of Safari and Chrome on OSX. On both browsers the cursor keeps disappearing and reappearing randomly (not hovering a certain other element (just a plain body). It's not flickering, it's just random disappearing and reappearing.
Any idea what might cause this? Maybe it's a specific WebKit (fork) issue?
I'm also curious why this hover approach doesn't work;
*:hover {
cursor: url('../../images/site-design/cursor_pointer.png'), pointer;
}
Applying the code on just the html or body behaves the same.
When doing the hover on a:hover { ... (an a-tag) I get flickering, as the browser can't seem to figure out to show the default cursor (not even the one I gave up to act as a default everywhere, but the browser default cursor).
Related
The following does not work for IE11 for me:
input::-ms-clear, input::-ms-reveal {
display: none;
}
Side-issue, probably not relevant: Whether I have it in or not I get the same thing, which I'm guessing is the way this works: the first time you go into password field you get the show/hide icon, change fields, go back in and the icon disappears.
any ideas how to get rid of the reveal because I have to remove it?
thanks.
adding !important to the rule fixed it. Something, somewhere must have overridden this, but there are no other -ms* entries in the imported style sheets and html (however this is tricky as it uses the truly awful GWT which seems to obfuscate and hide everything)....
input[type=text]::-ms-clear {
color: red; /* This sets the cross color as red. */
}
In IE 8, I am seeing the alt text getting displayed in the print preview when the image is not getting displayed.The issue is not occurring in chrome. I want to fix this issue in IE 8.
Src of the image gets added in run time. At some times images will not be available from the server
<img src="null" alt="weird issue">
Needed a fix without using javascript
You can't style the alt text directly, but it will inherit from the img parent so probably the easiest is to simply set the color of your img to white in the CSS (and if for print applications, then within your print styles).
Try this:
img{
color: #fff;
background-color: #fff;
}
In that example, I've also set the background-color to white but this probably isn't 100% necessary given that if this is a print style, the background will inevitably be white anyway.
As has been mentioned in the comments below this answer, you may be able to use a CSS attribute selector to only target those imgs that have 'null' as their source.
This would work like this:
img[src="null"]{
color: #fff;
background-color: #fff;
}
This would, however, come with a few additional requirements/assumptions:
That the src is indeed 'null', and not just an ampty string (in which case you could use img[src=""]).
CSS attribute selectors work in IE7 and up. However, IE7 and IE8 are a little delicate to !DOCTYPE declarations so you have to ensure that your page has a valid !DOCTYPE declared.
Older browsers (IE6, for example) will not support this, so you'll still get the alt text come through.
Assumes that a CSS resolution is actually what you're asking for, and - as before - that the background the image sits on is indeed white!
You could extend upon ths use of attribute selectors to simply ensure that those images coming through with src="null" aren't displayed at all:
img[src="null"]{
display: none;
}
For mozilla : study this code and find a way to achieve it with other browsers.
img:-moz-broken:before,
input:-moz-broken:before,
img:-moz-user-disabled:before,
input:-moz-user-disabled:before,
img:-moz-loading:before,
input:-moz-loading:before,
applet:-moz-empty-except-children-with-localname(param):-moz-broken:before,
applet:-moz-empty-except-children-with-localname(param):-moz-user-disabled:before {
content: -moz-alt-content !important;
unicode-bidi: -moz-isolate;
}
Or, some absolutely basic inline javascript, some verry ugly old-school inline event handler:
<img src="broken.png" onerror="this.style.display='none'" />
Context
Firefox 14 (and 13); specific CSS styles being ignored under certain conditions
The Problem
Using the following CSS:
*
{
outline:none;
-moz-outline:none;
-moz-user-focus:ignore;
}
JSFiddle
Firefox 14 (and 13) ignore these styles when using Tab to switch between select elements. Clicking these elements after using Tab still displays the outline.
Notes
Specifically styling select instead of * has no effect.
This only occurs with select elements.
The Question
Is this a bug or intended behavior?
Are there any other CSS styles that need to be used to prevent the outline from appearing indefinitely?
This is a known bug which has sparked several Stackoverflow discussions. From what I have read, Mozilla have deemed that CSS is the wrong place to handle this element behaviour, and have opted instead to handle it by other means. At this time the only solution is to either use tabindex="-1" or to set the element to display as something else, and restyle the look and feel of a droplist — but be warned, this opens a can of worms in itself.
If you do opt to do this, I have had success in the past with the following kludge:
select {
appearance: normal;
-webkit-appearance: none;
-moz-appearance: radio-container; /* renders text within select, without arrow chrome */
}
Appearance tells the browser to display the element as something else, but this is inconsistent from vendor to vendor. appearance: normal; is the spec, whilst webkit replaces normal with none. -moz-appearance: radio-container; has been the only way I have found to display the text within the chosen select option, whilst removing the arrow chrome for a fully customised droplist. However, try experimenting with the available options until you find something that works and doesn't add the focus ring you wish to customise. Internet Explorer will require further kludge to bend the select to your needs. Entirely possible, but out of scope for this question and answer.
So far the only way I've found to overcome it is to set the tabindex='-1' (see fiddle) which, of course, takes the element completely out of the tab selection chain. That would not be good for user interface, and my guess is not exactly what you desire (I assume you want to keep tab accessibility but just do your own styling for highlighting).
Another solution is to set outline: none and set a box-shadow. For example:
.my_elements:focus
{
outline: none;
box-shadow: 0 0 3px 0px red;
}
Use
*:-moz-focusring {
outline: 2px solid blue;
}
will give you similiar to chrome
Also, if using mac, you also need to enable this:
How to allow keyboard focus of links in Firefox?
Decision to Close:
I've decided to close this question as it denotes a behavior that is not currently observable with the more recent versions of Google Chrome, and is no longer an issue that requires mitigation.
Problem:
For a long time, I've been noticing that when hovering over anchor elements in Chrome, the cursor will remain in the default (arrow) state rather than switching to the pointer (hand) state. I have not observed this behavior when viewing sites in Safari, so I'm not certain this is a webkit issue.
Questions:
What's causing this? What are the workarounds?
Evidence:
I've found this behavior will happen...
less often after the page is loaded.
more often while the page is still loading.
more often, if not exclusively, when a elements have a display property declaration.
regardless of the cursor: pointer property being declared (although, I could be wrong).
Note the mouse behavior on this example when viewing in Chrome:
The main navigation of this site: http://css-tricks.com/
Suspicions:
Chrome has an issue handling a elements with a display property declared with a value that differs from the default inline. I also suspect that declaring the position property on a elements with a value that differs from the default static may be contributing to the problem.
Possibly Related:
Chrome hover custom cursor
Bug in Chrome or bad CSS? (anchor with visibility hidden)
http://code.google.com/p/chromium/issues/detail?id=93240
Did it happen when your chrome dev tools was open ?
If so, maybe you should disable "Emulate Touch events" in the Overrides Settings of the dev tool.
Cheers
This has happened to me before, and I realized putting a positioning to the element will fix it. For ex:
header a.logo{
position: absolute;
float: left;
height: 28px;
width: 28px;
margin-top: 15px;
text-indent: -9999em;
display: block;
}
Hope this helps.
I was wondering if anyone has come up with this problem?
I have a pseudoelement on :before and I want to change one of its properties on hover
element:before {
....
background: red;
}
element:hover:before {
....
background: green;
}
it works great except from chrome on mac, where it works the first time i hover an element but then all the "before" elements using this method disappear on hover
i created a jsfiddle which replicates the problem (test on chrome/mac to see the bug)
http://jsfiddle.net/annam/vnjj5/1/
any solutions? or known bugs? havent been able to find anything on google