In-Built Browser Spell Check Not Working - html

I upgraded to Windows 10 whenever MS offered the free update. I have the autocorrect features turned on in the Typing config section as recommended.
However, even though this is on, this does nothing in IE 11 even though it is mentioned it will in this article on Microsoft Answers (says see Section D).
Is there a trick to get this working? Is there some HTML 5 attribute that also needs to be included for this to work in IE 11 (can't use edge). Spell check works in Chrome and Firefox (only via right-click menu option), so it seems it's an IE 11 issue?

have you tried the spellcheck attribute: https://www.w3schools.com/tags/att_global_spellcheck.asp
<input spellcheck="true">

Related

Options in HTML <select> dropdown are too big in Chrome

Some change in recent Chrome versions (likely in June 2017) cause options in a <select> input to render much bigger than in other browsers (or in older versions of Chrome).
For example, dropdown on this w3schools page on some machines renders like this (Chrome 60.0.3112.90, 64 bit, Windows 10):
instead of expected (Firefox 55.0, 64-bit, Windows 10):
Is there any workaround that can be implemented in code to prevent it from happening (CSS solution preferred)?
So far I've found:
Discussion on Chrome product forums, which confirms that this is observed by many people, but there's no answer whether it was intentional or not. Also, observations were made that presence of touchscreen drivers in a system might cause this behaviour.
Chromium bug #739196 describing this issue, but also with no clear answer whether it's intentional or a Chromium bug
few answers suggesting that padding for <option>'s in a <select> can't be controlled via CSS by design, so this padding was never easy or possible to change.
Should be able to just add some CSS styling for the <option> tag to get it to look the way you want on most browsers.
http://jsfiddle.net/Ahreu/50/
The additional padding was added in Chrome 59 for any device that Chrome thinks has a touch interface. There currently is no way to disable this "feature".
Chrome shows two rows in Dropdown-menu
Google Chrome Help Forum
Observed same issue on Windows 10 + Chrome, with no actual touchscreen interface.
Uninstalling/installing "Synaptics Pointing Device" (touch pad on laptop) fixed the issue for me. As the other forums mentioned, it appears to be related to Chrome thinking it is on a touch enabled device. Worth a try to disable/re-install devices that may appear as such.

IE11 DOM Explorer red underline - why?

I would like to ask, why IE11 does not displays border-radius, justify-content and align-items in my project.
When I create new .html page these tags are supported. But not in my project. Can you please help me how to solve it? Mozilla Firefox display it right and the DOM explorer gives me no error messages.
Internet Explorer 10 and 11 use a squiggly red underline to indicate invalid rules.
Obviously, these are valid rules so referencing this article by John Schneider
When I looked at the CSS styles in use on the page in IE11’s built-in F12 developer tools, I noticed that the border-radius property on my form’s enclosing div was present, but it was missing its enable/disable checkbox, and the name of the style was shown with a red squiggle underline, as though IE didn’t recognize it. It seemed almost as though IE11 was behaving like a legacy browser that didn’t recognize that newer CSS property.
In fact, that did turn out to be exactly the problem. IE11 was rendering the form (running on my local IIS) with its legacy “Compatibility View” engine, which it is by default configured to do for intranet sites. (Oddly, my IE11 was not using Compatibility View to render another copy of the form that I was trying to use to debug the issue that I had IE loading via the “localhost” domain, which had me confused for a while.)
The solution was to disable IE11’s Compatibility View for intranet sites by doing Setting (gear icon) > Compatibility View Settings > uncheck “Display intranet sites in Compatibility View” checkbox. Making that configuration change immediately got IE11 to start rendering the page properly.
Your browser may be in compatibility mode to an older browser.
Press F12 - and check which version it's using.

View as FF 3.6 in FF 7 - Possible?

in IE you can view pages as previous rendering engine. You use 9 and view as 8,7,6.
If this possible in Firefox? I'm using FF7 and I want to see how a website displays in say 3.6.
Is this possible or am I going to need multiple versions installed?
The answer is "No, you're going to have to install multiple versions."
FF doesn't have a compatiblity view like IE does. (If the example of IE is anything to go by, this is probably a good thing)
Firefox can have multiple versions installed on the same machine without too much trouble, but if you want to make things even easier, you might want to try the Utilu collection which is an installer that can install multiple FF versions on your machine at once.

Is autocomplete="off" compatible with all modern browsers?

I've just been given a requirement to prevent browsers from saving data entered into specific form fields. It's been years since I've done web dev, and this is a relatively new capability. I was able to find the form field property autocomplete="off", but I can't seem to find any documentation indicating which browsers support it. Can anyone point me in the right direction of a chart of form attributes and browser compatibility?
Be aware that all major browsers are moving towards ignoring the attribute for password fields.
I can only offer anecdotal evidence, but I've yet to come across a browser that fails to respect autocomplete="off", this experience covers:
Firefox 1.5+ (Windows and Ubuntu)
Opera 6+ (Windows and Ubuntu)
Chrome v2+ (Windows and Ubuntu)
Epiphany 0.8 (ish) (Ubuntu)
Midori (I can't remember which version)
Safari v1+ (Windows)
IE 4 - 8, Windows.
I'm aware that Greasemonkey scripts, and presumably other user-scripts, can disable the autocomplete setting.
There's a couple of articles I found that might be useful to you:
How to turn off form auto-completion
Using auto-complete in html forms
Password managers now ignore the autocomplete attribute for password fields in the major browsers as of:
IE11
Firefox 30
Chrome 34
Safari seems to have an opt-in option to ignore them
It should still work fine for disabling autocomplete on form fields, but no longer affects the password manager.
As of Chrome v34, autocomplete="off" is now ignored by default.
This somewhat debatable feature can be disabled in the flags configuration by visiting chrome://flags
http://news.softpedia.com/news/Chrome-34-Seeks-to-Save-All-Your-Passwords-436693.shtml
If you're able to use JavaScript and jQuery, you can place this on load of the html:
$('#theform input').val('');
Except for Maxthon Browser I think, they are famous in china and making a name now worldwide. They don't treat Autotocomplete=off power very well. It won't work with them.
Some solution is not working in modern browsers.
Another solution link is given here. which works in all modern browsers.
Input type=password, don't let browser remember the password
You can use autocomplete="off" in this given soluton
Matter of fact, both username and password fields doesn't react to AutoComplete=off in all the latest browsers.
td;dr: To check on compatibility across browsers, here is an official MDN doc on turning off autocompletion with the link for compatibility - https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
A little longer answer: Your issue is because of Chrome's autofill feature, and here is Chrome's stance on it in this bug link - https://bugs.chromium.org/p/chromium/issues/detail?id=468153#c164
To put it simply, there are two cases -
[CASE 1]: Your input type is something other than password. In this case, the solution is simple, and has three steps.
Add name attribute to input
name should not start with a value like email or username, otherwise Chrome still ends up showing the dropdown. For example, name="emailToDelete" shows the dropdown, but name="to-delete-email" doesn't. Same applies for autocomplete attribute.
Add autocomplete attribute, and add a value which is meaningful for you, like new-field-name
It will look like this, and you won't see the autofill (and the value you enter won't be cached) for this input again for the rest of your life -
<input type="text/number/something-other-than-password" name="x-field-1" autocomplete="new-field-1" />
[CASE 2]: input type is password
Well, in this case, irrespective of your trials, Chrome will show you the dropdown to manage passwords / use an already existing password and show the prompt to update the cached password. Firefox will also do something similar, and same will be the case with all other major browsers. Have a look at the MDN doc link I shared at the very top.
In this case, if you really want to stop the user from seeing the dropdown to manage passwords or the prompt to save the credentials, you will have to play around with JS to switch input type, as mentioned in the other related questions.

Does IE7 have a "developer mode" or plugin like Firefox/Chrome/Safari? [duplicate]

This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Debugging JavaScript in IE7
Firefox has Web Developer plugin and Firebug for troubleshooting html/css/javascript issues. Google Chrome and Safari have a very similar console and right-click options for "Inspect Element".
Does IE7 have anything similar for troubleshooting layout/html/css issues?
Yes - The Internet Explorer Developer Toolbar
Download details: Internet Explorer Developer Toolbar
You can also use Firebug Lite, wich works on IE, Opera and Safari.
It's a Javascript implementation that you can load with a simple bookmarklet.
As SO doesn't allow Javascript, here is the bookmarklet source code (just copy paste to your browser location bar (always make sure it's safe before executing random javascript (In any case check the first link)))
javascript:var%20firebug=document.createElement('script');firebug.setAttribute('src','http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js');document.body.appendChild(firebug);(function(){if(window.firebug.version){firebug.init();}else{setTimeout(arguments.callee);}})();void(firebug);
Firebug Lite supports all basic commands of Firebug.
I have also used Debug Bar.
Check out the IE Developer toolboar.
Web Development Helper
Web Development Helper is a free browser extension for Internet Explorer that provides a set of tools and utilities for the Web developer, esp. Ajax and ASP.NET developers. The tool provides features such as a DOM inspector, an HTTP tracing tool, and script diagnostics and immediate window.
Web Development Helper works against IE6+, and requires the .NET Framework 2.0 or greater to be installed on the machine.
Once installed, the tool can be activated using the Tools | Web Development Helper command. You can also customize your browser's toolbar to add a button for this command to facilitate frequest use. Clicking on the menu command or browser button brings up the tool's console window and set of commands.
Page Features:
DOM inspector allows viewing all elements, selected elements, or elements matching an ID or CSS class, their attributes and styles.
Capturing a screen shot of the current page.
Viewing page information such as metadata, tags, and linked resources. .......
unfortunately it seems microsoft have discontinued it, the page for the toolbar now just says 'We are sorry, the page you requested cannot be found.'
I reckon because its built into 8 they have removed it for download, and cant be bothered with helping out us devs who are forced to make our projects work in their more archaic browsers :'(
Also before anyone says it, IE8 compatability mode != IE7
There's a toolbar you can get but it still doesn't match up to Firefox, especially for javascript debugging.
IE8 will be a huge improvement for development.
The following is specifically for IE7, other versions are probably similar.
Here is the new link to the developmment tools from microsoft.(as of 4-26-2011) IE Development Tools
Once installed, you will need to enable the toolbar.
To Enable, click on Tools | Manage Add-Ons | Enable or Disable Add-ons, to enable the addon.
To add the icon to the IE Toolbar, right click on the IE menu | Customize Command Bar | Add or Remove Commands. Add the "< (arrow) >" icon.
Hope that helps.
You can also use IE watch, which is like firebug, but you need to buy it. It is a 30 days trail version.
Actually, the best add-on for developers to IE would be Fiddler. It has a number of features that the other browsers possess.