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.
Related
I have a button
<button class="close"></button>
With this css
button.close {
font-size: 14px;
}
button.close::-ms-clear {
display: none;
}
But i cant make the ms clear work. What is wrong?
from the developer.mozilla.org
Non-standard
This feature is non-standard and is not on a standards
track. Do not use it on production sites facing the Web: it will not
work for every user. There may also be large incompatibilities between
implementations and the behavior may change in the future.
-ms-clear can only be applied on an input with type text. It is non-standard and only works in IE 10, 11 and Edge.
This pseudo-element is used to modify a little button which is visible by default to clear input boxes. You can see it working here, if you have an edge browser. Just click into the textbox and write something and a little cross will appear on the right side of the input box.
I want to disallow element selection using only CSS (selection either with the mouse or with CRTL+A). I tried the following:
element {
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}
element::-moz-selection {
background: transparent;
}
and it does not work correctly in Firefox 20. It works in webkit though. I am able to select images and canvas with CTRL+A even with the above CSS rules.
Is there a way, using CSS only (without JS), to disallow the selection (or at least not show it).
I don't want to stop the user from copying text, I just want to hide the selection on some elements.
I tried the codes in this answer, but it does not seem to work in Firefox 20.
Thanks for your help.
I've tried it in FF20 with the following fiddle: http://jsfiddle.net/ADGsA/
p.noselect { -moz-user-select:none; }
p.recolor::-moz-selection { color: yellow; background: red; }
All behaviours with mouse are as expected, but I can indeed select the text with ctrl-A still. I'm pretty sure this is a bug in Gecko, but it's also quite possibly not one they're going to solve, judging by the MDN reference page:
Note: user-select is not currently part of any W3C CSS specification.
As such, there are minor differences between the browser
implementations. Be sure to test your application across browsers.
Non-standardized, so unpredictable. Take what you get and be lucky with it I guess, you might consider raising a bug on Bugzilla for it since I really think they didn't intend this, as the mentioned page also says:
Controls the appearance (only) of selection.
That would indicate that ctrl-A also should not be able to select it.
EDIT:
It's been a known issue since November 2008. Don't hold your breath for a fix, upvote it and pray.
In IE10, a focused textbox containing a value will have a little x added to the right of them. This x allows a user to click on the textbox in order to clear its value.
Other questions have touched on removing this feature from the user's view, but I wanted to maintain the feature in addition to adding my own icon to the right of the textbox, such as a search icon. Unfortunately, those icons end up colliding, so I needed to determine a way to move the icon and my searches never turned up any results.
The question that I kept trying to answer: what other properties can be used with the IE10+ ::-ms-clear pseudo-element?
UPDATE: As the other answerer pointed out, the MS documentation has been updated as June 19, 2013 to include all of the properties available to ::-ms-clear. It's unclear if this applies to IE10 rather than the currently forthcoming IE11, so I will leave the rest of the answer below.
For completeness, they have also updated the documentation for ::-ms-reveal, which appears to be the exact same as ::-ms-clear.
The answer below at least applies to IE10.
I cannot find an exhaustive list, which lead me to experimentation:
::-ms-clear {
margin: *; /* except margin-left */
background: *;
color: *;
display: none|block;
visibility: *;
}
Unfortunately, I was not able to trick IE's developer mode (F12) into showing me the ::-ms-clear properties in the style tree, so I had to try things by hand and reload the page in order to experiment. I even tried cheating by adding onblur=this.focus(), but that did not work.
CSS properties that did something, and seemed useful:
margin: The margin gave me a way to shift it from the right side of the textbox. I shifted it by the size of my icons, plus 1-3 pixels to give a buffer. Only margin-left does not seem to work.
background: The background of just the x. Applying any background settings puts your desired content behind it; it does not replace the x!
color: Controls the color of the x.
display: As the question that got me here notes, none will hide the x.
visibility: Seems to work as one would expect similar to display.
You can combine the color and background to replace the x with a different background image so long as it fits within the given size of the x, which appears to be around 20px, but that is just me eyeballing it.
::-ms-clear {
color: transparent;
background: no-repeat url("../path/to/image") center;
}
CSS properties that did something, but did not seem useful:
padding: It affects the x, but never as I actually expected its effect (everything seemed to hide the icon, or at least shift it out of view).
position: Identical behavior as padding. Admittedly, I am much more of a programmer than a designer, so this may be my own shortcoming.
CSS properties that I guessed might do something, but that did nothing at all:
text-align
float
Adding other CSS pseudo-elements does not affect ::-ms-clear. Specifically, I tried ::after and ::before on it with content: "y", and neither one got a result.
Obviously it depends on the size of the companion icon that you intend to apply to the textbox, but I use 14-16px icons and I found that margin-right: 17px gave the x a clear gap, which shifts the x to the left of my right-aligned icon. Interestingly, margin-left seems to have no effect, but you can use a negative value for margin-right.
The actual CSS that I ended up using, which prevented my icon from being covered by the x.
[class^="tbc-icon-"]::-ms-clear, [class*=" tbc-icon-"]::-ms-clear {
margin-right: 17px;
}
My icons all share the same base name, tbc-icon-, which means that the ::-ms-clear pseudo-element is automatically applied to all of them whenever they are applied. In all other cases, the pseudo-element behaves in its default manner.
Of interest, ::-ms-reveal seems to behave the same way, and if you were going to apply icons to password fields (far less likely I expect), then you can follow the above example:
[class^="tbc-icon-"]::-ms-clear, [class*=" tbc-icon-"]::-ms-clear,
[class^="tbc-icon-"]::-ms-reveal, [class*=" tbc-icon-"]::-ms-reveal {
margin-right: 17px;
}
One list is available on MS site, at least.
http://msdn.microsoft.com/en-us/library/windows/apps/hh465740.aspx
(But maybe I misunderstood the question.)
I just finished my portfolio site, which is my first attempt with html5 and it looks great in Chrome. But when I tested it in IE and FF, exept IE9, there are some major differences that all occur in the header. I think this is because the header has a fixed position. I did this because of the menu. I created a one pager and if I didn't set the position on fixed, the menu disappeared when you clicked on a menu item.
A second error is that with IE all the images get a blue border, which doesn't appear on Chrome.
And a third error is the font in the header is also different with IE. I used an #font-face font for it.
My HTML and CSs code validates on W3C.
You can find the website at www.nathaliedehertogh.be
Can someone please help me out with this one.
All you need to do is add clear:both to #menu, and border:0 to img.
The blue outline is default in some browsers to show that the images are links.
You need a clear in your header to allow the content to flow as wanted after.
The blue border for IE simply needs a CSS setting:
img {
border: 0;
}
As for the font, some fonts don't read correctly in IE. The error I get is:
#font-face failed OpenType embedding permission check. Permission must be Installable.
You don't have a height defined in your div 'kopregel'.. this is causing an issue since you have elements with heights defined inside it.
NOTE: I see it all broken in FF, stuff is being smooshed to the right.
The problem with your header is you need the clear function in your css.
Here is the new and edited code.
#content, hr {
clear: left;
margin-left: auto;
margin-right: auto;
width: 80%;
}
No issue with fixed positions this is just a common issue, hope this helps let me know!
Another major Difference Chrome vs IE check this out
http://technofizzle.blogspot.in/2013/04/chrome-and-ie-display-image-completely.html
Using: Chrome 18.0.1025.151 on MAC OSX 10.6.8
I'm running into an interesting issue. When using Chrome the cursor property only changes if you hit the very edge of an DOM object. For example: in the below usage the cursor will only change to the "move" cursor on the very edge of the image. When its completely over the image it goes back to the pointer?
Any idea whats going on here?
CSS:
.handle{cursor:move}
Usage:
<img alt="Lounge" class="handle" src="SOME URL" />
Try
Width
Height
Block
So:
.yourObject {
position: relative;
width: 50px;
height: 50px;
display: block;
cursor: move;
}
I had the same bug on my Macbook Pro running 10.12.3. It appears to be caused by other programs. When certain programs are open/in certain states, cursor: CSS rules will only work on object edges, regardless of browser. Experienced this bug with both Spotify and Intellij IDEA.
Try closing out your programs one by one until it behaves properly.