take a look please:
The azure one is just clicked. Firefox only. It's just an <img> inside a <li>, no links. Why the hell does it becomes azure?? It's the first time in almost 20 years of web programming I see this. It seems to have nothing to do with ::selection, nor tap highlight, so I can't find a useful css rule to stop it. Firebug shows nothing meaningfull on the styles analisys panel. Also it's the only element in the page that behave this way. So what the hell is it? How to avoid?
You can avoid it using user-select: none;
The text of the element and sub-elements will not be able to be selected
Note
This feature is non-standard and is not on a standards track
Related
Currently working with a reddit theme, which only allows CSS to be changed. In these themes, there are text flairs which we have replaced with background images. When you hover over one, it shows a tooltip with the text. This is a default reddit feature and cannot be changed.
What we're trying to do is display the title attribute in a much cleaner way. We really dont have any way of doing this other than using :hover:after, but setting pointer-events to none prevents :hover from showing up, presumably because pointer-events makes the element click-through.
Is there any way to bypass this and use our :hover tag?
I've seen this effect on different websites. It is really subtle. How is it making this effect? It is not just the border but the empty space.
https://wordpress.com/
You will need to provide a link for an exact answer.
The easiest way to find out is to load the page in Chrome, press F12 to bring up the dev-tools, and use the elements inspector.
You can then select the html elements and it will tell you exactly what styles are used.
For more details, see Chrome's page on Inspecting the DOM and styles.
I have an application with a number of buttons in various places.
In IE only, I have noticed that most of the buttons turn blue when you mouse over them, but not all the buttons.
So, two part question:
What is causing them to turn blue? I have tried many searches to figure out who is actually doing this , but apparently I am not choosing the correct search terms. Can someone give me a hint that will get me to the right place, so that I can research the answer to my second question:
Why would some buttons not turn blue? Once I figure out who is doing this, I am hoping I will be able to understand how I have managed to create some buttons where this doesn't happen, but if anyone happens to have any clues, they would be gratefully appreciated.
I'm not sure why they are turning blue.
But every browser has a default style for html elements. So, thats why it might look different in a different browser.
Its a common practice now to have a CSS reset as the top level CSS file.
I would google HTML reset or HTML5 reset. What this CSS reset does is make a style for every HTML element and applies a default style.
So, that your styles will look consistent across every browser.
I have been using Firebug in Firefox and the Developer toolbar in IE to help trace my styles for a branding effort in SharePoint. The trace styles feature in the Developer Toolbar is very nice.. I can easily trace a hyperlink's styles and create the CSS to change it's styling, I'm having some trouble with tracing the hover style for links as neither Firebug nor Developer Toolbar will tell me where those styles are being defined, which makes me hard to override it..
I even tried a:hover { color: #ccc !important; } as a hackish way of doing things, and this fixed a lot of them, but some still remain. The CSS that comes with SharePoint is pretty big, and it's hard to manually go in and find them myself.
Any suggestions?
Jopache, I've been debugging on Chrome or Safari for several months and have grown really fond of the "inspect element" option that's built into webkit when you right-mouseclick on an element. I believe that firebug also adds that functionality to Firefox as well--I switch to Firebug when I really need to get detailed on my requests. So, if you've never tried this one, right mouse click on your link (it will be in the hover state at that point) and click on inspect element. Hopefully, that'll point you to at least the a: state which can then be searched via ctrl-f or grep for similar styles. Also, you'll notice a "computed style" that can be helpful to find specific quirks that can serve as alternate elements to search on.
It can be frustrating to do this on big documents....I'm in the middle of a hugely complex application UI refresh with a 5,000 line CSS document that's more complicated that any I've ever seen. Sometimes, it just requires head-banging. You might try a shortcut and see if a generic a:hover declaration at the bottom of the CSS doc (remember, it reads top to bottom so the last element will override any previous) to solve the issue while you search for a better solution.
If all else fails, here's a pretty good tut: http://www.cleverworkarounds.com/2007/10/08/sharepoint-branding-how-css-works-with-master-pages-part-1/
When you touch an element, such as an edit box, in a web page on the iPad, it turns gray while you are touching it.
I have a table wrapped by a floating div. Instead of an individual data element or row going gray, the whole table (or its wrapping div) goes gray when a data element is touched. (The function of this table is an autocomplete pop-up)
Elsewhere in the site, I have a table in which only the touched data element goes gray.
I wondered if anyone could direct me to an explanation of the logic behind this graying on touch, so that we can code our table to give the desired behavior. Ideally, we'd like the row to highlight when it is touched.
In the alternative, if we could turn off this graying behaviour, that would be another option. We could then code the highlighting ourselves. Is there a way to turn off this behavior for particular html elements?
Thanks.
This author suggests a solution to remove the highlighting:
If for whatever reason you don't want some elements of your web site or application to be highlighted, simply add the following CSS rule to the corresponding elements.
-webkit-tap-highlight-color: rgba(0,0,0,0);
It won't disable the highlighting, but it will make it invisible (an opacity of zero).
I have not tested this, however.
I have discovered something about the "logic" behind the graying behavior. It seems that elements that have handlers such as onclick, onmousedown etc. exhibit the behavior and those without such handlers don't. A (somewhat tedious) workaround for us is to change the code of the autocomplete so that each row has its own onmousedown etc. handler rather than the wrapping div taking care of this.
Try styling the wrapper div with select:none;
That should turn it off, and then you could code the highlight onfocus yourself.
Most browsers actually do this, but it's a bit more noticeable on the iPad and other Apple touch products. It's really for usability purposes, so I would only recommend disabling it if it is causing problems like the one you mentioned. It serves to help the user know what they are clicking, and gives them a chance to move their finger away if they are on the wrong thing.