I am unable to see the placeholder values on input elements when the input is empty and deselected. The input elements:
<input id="OldPassword" runat="server" type="password" class="form-control" name="password_old" placeholder="Old password" tabindex="1" autocomplete="off" required />
<input id="NewPassword" runat="server" type="password" class="form-control" name="password" placeholder="New password" tabindex="2" autocomplete="off" required />
<input id="NewPasswordRepeat" runat="server" type="password" class="form-control" name="password_confirm" placeholder="Repeat new password" tabindex="3" autocomplete="off" required />
This issue emerged when I had just upgraded the project from .NET4.0 to .NET 4.5.1 and I had added an encoderType to the httpRuntime:
<httpRuntime targetFramework="4.5.1"
requestValidationMode="4.5"
enableVersionHeader="false"
encoderType="System.Web.Security.AntiXss.AntiXssEncoder,System.Web, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" />
When removing the AntiXss encoderType attribute, the inputs display their placeholders again:
I only have this issue when using Internet Explorer, Chrome and FireFox seem to be working just fine. I am using Internet Explorer v11.0.9600.17728, so placeholder attributes are supported or they wouldn't have worked before using the AntiXssEncoder.
What could be causing this issue?
The issue was caused by a meta tag for X-UA-Compatible with multiple content values for early IE version rendering:
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
The contents of this tag were encoded by the AntiXssEncoder to
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
Internet Explorer seems to be unable to work with the   HTML code in meta tag contents and cuts the value off right after IE=9, causing the page to render in compatibility mode for IE9. Support for placeholder attributes was added in IE10, hence why they didn't display since the document was rendered for IE9.
I solved the issue by removing the spaces in the meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=9;IE=8;IE=7;IE=EDGE" />
Related
Visual Studio 2017 (v15.4.4)
ASP.NET Core MVC
I created new ASP.NET Core Web Application from the empty template and filled it. But when I start debugging I see that my CSS-file is not accessible.
The page for the web address was not found http://localhost:51308/css/styles.css
HTTP ERROR 404
Why does it happen and how can I solve this problem?
styles.css:
.field-validation-error {color: #f00;}
.field-validation-valid {display: none;}
.input-validation-error {border: 1px solid #f00; background-color: #fee;}
.validation-summary-errors {font-weight: bold; color: #f00;}
.validation-summary-valid {display: none;}
RsvpForm.cshtml:
#model Razor.Models.GuestResponse
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
#addTagHelper *, Razor
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>RSVP Form</title>
<link rel="stylesheet" href="~/css/styles.css"/>
</head>
<body>
<div>
This is RSVP form.
<form asp-action="RsvpForm" method="post">
<div asp-validation-summary="All"></div>
<p>
<label asp-for="Name">Your name:</label>
<input asp-for="Name" />
</p>
<p>
<label asp-for="Email">Your email:</label>
<input asp-for="Email" />
</p>
<p>
<label asp-for="Phone">Your phone:</label>
<input asp-for="Phone" />
</p>
<p>
<label>Will you attend?</label>
<select asp-for="WillAttend">
<option value="">Choose an option</option>
<option value="true">Yes I'll be there</option>
<option value="false">No, I can't come</option>
</select>
</p>
<button type="submit">Submit RSVP</button>
</form>
</div>
</body>
</html>
UPD
I renamed styles.css to site.css and shared this example on GitHub: here is the code source of this example.
You have 2 problems.
You have deactivcated loading static files in your startup.cs Uncomment app.UseStaticFiles(); This is essential in loading javascript, css, html and other static files as images from your wwwroot folder.
You should properly resolve your static file in your razor view, using #Url.Content(): <link href="#Url.Content("~/css/site.css")" rel="stylesheet" />
Just using "~/css/site.css" may work, but will not 100% of the time. I strongly recommend using a shared Layout.cshtml, that takes over loading the css files for you.
This will resolve your issue
You must put all the fixed files like css, JQuery, js and ... in the wwwroot folder to Access it. This is a law in Asp.Net Core.
Also, when you run your project, hit the ctrl + U to display your code and click on the css link. The css commands must be displayed. Apeer was not displayed after a click The files are not loaded correctly.
By default, there is a file named site.css, which you must write all the css commands and your site style there. It linked in the _Layout, you can link your new css file after that.
To link up, just drag the css file from the solution Explorer and drop it in the code box
There is no other case
Following is code i used this is from template when i run this file i see error
bootstrap.css.map:1 GET http://localhost:8000/css/bootstrap.css.map 404 (Not Found)
but there is no link i made and error shows link is on first line can someone help me where the link is
how do i remove that link can someone help me with this
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Animus A Blogging Category Flat Bootstarp Resposive Website Template | Home :: w3layouts</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Graphic Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
</head>
<body>
<div class="contact-top">
<div class="container">
<h2>Log in</h2>
<div class="contact">
<p></p>
<div class="contact-down">
<div class="contact-right">
<div class="col-md-6 contact-info">
<form>
<input type="text" name="your name" placeholder="USER NAME" class="input">
<input type="password" name="your email" placeholder="PASSWORD" class="input">
<div class="clearfix"> </div>
<input type="submit"value="SEND" />
</form>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
It's coming from your bootstrap.css file. You can remove the reference by editing that file and removing the following line from your code:
/*# sourceMappingURL=bootstrap.css.map */
Source Mapping files should only be used by the Developer Tools.
With Bootstrap you can disable the source map if you like or just ignore the 404 for any .css.map when using the Dev Tools.
If you want to use the Dev Tools for Debugging or want to have more 'completeness' to your code add the .css.map file available from Bootstrap along side the .css file.
Reference: https://developer.chrome.com/devtools/docs/css-preprocessors
Other similar questions: what are the .map files used for in Bootstrap 3.1?
Either you can remove
`/*# sourceMappingURL=bootstrap.css.map */
as mentioned by #xengravity or you can download bootstrap.css.map file of your bootstrap version and add it in your directory.
I have a website that displays correctly in IE7, IE8, IE9, IE10, all PC and Mac versions of Firefox and Chrome, Opera, and Safari. But, in IE11, it displays part of the header and javascript, but none of the html. Any ideas?
http://www.ighome.com
The Network-tab in IE11 Developer Tools shows that there are no requests for your stylesheet, and your <head> content is rendered inline. This indicates that IE11 does not consider the content to be html (and won't parse it as such). You're sending your html with a content-type indicating that it's xml, but with a html doctype. I would try changing the content-type first.
General changes
You're serving html4 with the http-header Content-Type: application/xhtml+xml. It should be text/html.
Html4 does not have self-closing tags.
Your <style> are missing the type attribute.
You have inline styles. This is a personal issue between me and Mr Maintainability.
Some input elements is missing a <label>. Accessibility!
You nest some block elements within inline elements. This is more of a validation issue, I've seen no browser that actually has an issue with this.
Missing html-encoding within <a href="..." />. All amperands (&) must be encoded as (&). You also need url-encoding where approperiate.
There's no width attribute for <div>.
Specific errors
Line 17-27 has a <script> inside a <style>.
Line 196 has a <input> with two value attributes.
Asp.net useragent shazaam
I'm using my advanced superhero skill to detect that you're using ASP.NET. (Or at least have a hidden __VIEWSTATE field and a ASP.NET_SessionId cookie.) You'll need to add a browser configuration file for the asp.net javascript to work.
Asp.net uses useragent detection to determine what your browser supports. The useragent strings are matched against a browser configuration files on your server, and this populates the Request.Browser object. This information determines if your <form runat="server"> should render the __doPostBack-function or not. Internet Explorer 11 is the first Internet Explorer version which does not identify itself as MSIE, and the previous detection fails. You'll need to add a configuration file to your ~/App_Browsers folder (create a new one if missing). This snippet will configure IE11 with ecmascriptversion used to detect support for the postback javascript (among other things).
<browsers>
<!-- Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko -->
<browser id="IE11" parentID="Mozilla">
<identification>
<userAgent match="Trident/(?'layoutVersion'\d+\.\d+)" />
</identification>
<capture>
<userAgent match="rv:(?'version'(?'major'\d+)(\.(?'minor'\d+)?))" />
</capture>
<capabilities>
<capability name="browser" value="IE" />
<capability name="ecmascriptversion" value="3.0" />
<capability name="layoutEngine" value="Trident" />
<capability name="layoutEngineVersion" value="${layoutVersion}" />
<capability name="majorversion" value="${major}" />
<capability name="minorversion" value="${minor}" />
<capability name="type" value="IE${major}" />
<capability name="version" value="${version}" />
<capability name="preferredRenderingMime" value="text/html" />
</capabilities>
</browser>
</browsers>
I have an asp.net website that looks good, as it should, on IE8,IE9 as well as the latest versions of Firefox and Chrome.
the server click is working fine in all web browsers..
in IE10 it's not working..when Clicking IE10's "Compatibility button" its work fine..
but I can't tell all users to turn on compatibility button and browse.
I want to do dis in coding side..
I have tried
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
and
<system.webServer>
<httpProtocol>
<customHeaders>
<clear />
<add name="X-UA-Compatible" value="IE=EmulateIE7" />
</customHeaders>
</httpProtocol>
</system.webServer>
and this also
try dis also
I've tried overriding the compatibility mode, to no avail:
but it's not working in IE10.
this works for me
<head runat="server">
<meta id="FirstCtrlID" runat="server" http-equiv="X-UA-Compatible" content="IE=8" />
</head>
Try
<meta http-equiv="X-UA-Compatible" content="IE=edge">
IE compatibility meta tags have been described in detail by this answer in the answer to the following question What does <meta http-equiv="X-UA-Compatible" content="IE=edge"> do?
Just try this
<meta http-equiv="X-UA-Compatible" content="IE=8, IE=9, IE=10, IE=Edge" />
here IE=Edge is to mean highest compatibility. but for your problem IE=10 will be the fix.
This may be a duplicate of a question somewhere, but I am unable to come up with the keywords to produce it.
I am using the Google Maps API V3 and following the simple tutorial provided at https://developers.google.com/maps/documentation/javascript/tutorial. Everything is fine except in IE9, which is rendering in IE9 Standards mode. The problem is that when the map is loaded on an incredibly bare-bones ASP.NET forms page, the resulting HTML has the div container for the map, twice! This is causing layout issues because as described in the tutorial:
Note that the map will always take its size from that of its containing element, so you must always set a size on that explicitly.
So, the div containing my map must be either set to some amount of pixels or 100%, the same value as its DOM parent. This is fine in FireFox and Chrome, where the HTML source ends up roughly:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body class="no-layout"><form name="aspnetForm" method="post" action="TestPopup.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDw... />
</div>
<div class="map" />
</form></body>
</html>
But in IE9, we end up with:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body class="no-layout"><form name="aspnetForm" method="post" action="TestPopup.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDw..." />
</div>
<div class="map" />
</form>
<div class="map" />
</body>
</html>
This page is a (working) simplification of the problem but this is an actual issue in pages because the map class has width and height set. The second div with this class has the same style, pushing content down.