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.
Related
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
for some reason my checkboxes will not work inside some divs.
They cant be checked and are around half the size they normally are...
They work in firefox, but not chrome and they dont even show in safari...
This is not a live site so cant give a link, but its just a basic checkbox code.
I have had a look around the css of the containing div etc but nothing seems out of place.
Any suggestions on what i could look for? Sorry if theres a lack of information.
Take a look at the computed style tab in the source view of chrome by pressing f12. You can then see all the styles that are applied to it and also add new styles. Experiment with it till you get the wanted result. Also, you can use jsfiddle.com for posting bigger blocks of code.
Cheers!
I have this CSS Menu. It's fully functional.
But when I put it in my page inside some table cell, it blows up like this. Don't mind the silver and the blue lines, they are from the page.
Now I have debugged the page and the menu itself. No error still this weird behavior. Then I got another menu and put that in here and it showed the same error. Any idea why is this happening?
I could paste the code but I don't think anybody is going to go through 500 lines of HTML and 100 lines of CSS.
I am using the latest Firefox. IE6 shows the same behavior.
check the code here...
CSS Menu Independent in a page
CSS Menu Inside a complex page
Your "in-place" stylesheet is much longer than your "minimum" one, and contains rules that are changing the layout. In particular, do a search for "280" -- you're setting some widths to that.
In some browsers, tables get some default styles that are not what you expect. I can't recall right now, but I think one of them was align="centre" by default.
Maybe try setting the table attributes to what you want them to be explicitly?
W3Schools for table attributes.
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.
I am attempting to make a dropdown menu - in CSS only - that drops down on mouse-click (instead of on mouse-hover) and has a scroll bar, as there will be around 22 options. What I have so far, is here: http://fiddle.jshell.net/yobqsjb2/1/
(I am limited to CSS only, as Javascript, PHP, etc are blocked by the university. I also cannot use the select or options codes (IE: [select name='menu'] [option value='1']first item[/option]) in the HTML of the page, because the editor keeps stripping them out. I gather from looking online that the TinyMCE visual editor on WordPress is doing this, but unfortunately, I have no access to change it, so I need to work around the limitation.)
I've grabbed code from other sources to tweak, but I fully admit that I was more on the PC repair side of things a few years ago (career-changed and now migrating the company website in the new field) not a former programmer. A lot of what I'm seeing that is supposed to fix the problem for other users' code, I don't quite understand what they're doing well enough to apply it here...
I know the "on click" problem is with the a:hover and li:hover (vs a:active / li:active), but when I switch them, the menu goes away when the mouse hits it. I read that I needed a 'display:block;' somewhere in the code, but based on examples shown, I've put it in each code segment and in all of them... it doesn't seem to want to fix the problem.
In terms of the scroll bar, everything I keep finding is in Javascript or, in a few places saying that it can't be done for IE (ideally, it would work everywhere, or have an IE alternative that wouldn't look funky).
Are either or both of these things possible? I've figured out how to change the dropdown menu's size, color, borders, etc, just not these two items...
Thanks in advance
For the :focus to work, you'd need a tabindex for the element (li).
Fiddle: http://fiddle.jshell.net/yobqsjb2/3/