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>
Related
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" />
I've got a problem with an ASP.NET project. It uses .NET Framework 2 (old I know but can't update for other reasons) and when you open the site in Internet Explorer there are some bullet points which do not show. Set-up like:
<ul class="abc"><li>Bullet point 1</li></ul>
However when I open Internet Explorer developer tools by pressing F12 I can change the document mode from "Internet Explorer 7 Standards (Page Default)" to "Internet Explorer 8 Standards" the bullet points show correctly.
How can I change my solution so that all pages are set to use the Internet Explorer 8 standards by default?
Either simply just use <!DOCTYPE html>, or add this to your Web.config:
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="X-UA-Compatible" value="IE=Edge,chrome=1" />
</customHeaders>
</httpProtocol>
</system.webServer>
You can also use <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" /> instead of a header, but it causes page redrawing.
Check the doctype. If I remember correctly the XHTML 1.0 strict doctype will enforce IE 7 mode. Also, you can use the X-UA compatible meta tag like so to put it in IE-9 mode: . Essentially, this isn't a function of ASP.Net at all. Your browser determines what engine to use first by your doctype then second by any over-riding features you've told it to use such as X-UA.
More information can be found at: https://msdn.microsoft.com/en-us/library/jj676915%28v=vs.85%29.aspx
The key point to remember with using X-UA is that it must be the very first tag in your . If you put it second it won't work.
Adding this under the DOCTYPE worked.
<meta http-equiv="x-ua-compatible" content="IE=Edge" >
It did not work when that was between the head tags. You can changed edge to 7/8/9 etc to suit.
Haven't tried but you need to have DOCTYPE such as <!DOCTYPE html>
Have xhtml templ.xhtml layout.
Include it to other .xhtml like:
<ui:composition template="/template/templ.xhtml">
Define conditionals in templ.xhtml like:
<h:head>
<h:outputText value="<!--[if lt IE 8]><h:outputStylesheet library="css" name="styleie8.css" /><![endif]-->" escape="false" />
</h:head>
styleie8.css is not loaded,but when something changed and saved in templ.xhtml when Tomcat is running,that it loaded ok.
How to do,that JSF loads conditionals immediately when Tomcat started?
Note:
tried to use following alternatives:
1.
<!--[if lt IE 8]>
<h:outputStylesheet name="styleie8.css" library="css"/>
<![endif]-->
2.
<o:conditionalComment if="lte IE 8">
<link rel="stylesheet" href="styleie8.css" />
</o:conditionalComment>
3. #{request.contextPath}/resources instead of simple path.
The result is the same - I need resave .xhtml template in order to load conditionals css.
Your initial code snippet is wrong. You can't print a <h:outputStylesheet> in a <h:outputText escape="false">. The <h:outputStylesheet> is a JSF component which is supposed to generate HTML, but in a <h:outputText escape="false"> it would be printed literally as-is. If you open the page in browser and do rightclick, View Source, then you should have discovered this yourself. This is not right. The webbrowser understands only HTML which should be <link rel="stylesheet">.
Provided that you've placed the stylesheet in /resources/css/styleie8.css, then the following should work:
<h:outputText value="<!--[if lte IE 8]><link rel="stylesheet" href="#{request.contextPath}/resources/css/styleie8.css" /><![endif]-->" escape="false" />
As to the alternatives you tried, 1) would not work as it would be escaped. 2) should work assuming that the href points to the right URL. In the example as you've posted, it assumes the CSS file to be in the same folder as the view. However, if it is still located in /resources/css/styleie8.css, then you should have used:
<o:conditionalComment if="lte IE 8">
<link rel="stylesheet" href="#{request.contextPath}/resources/css/styleie8.css" />
</o:conditionalComment>
3) should work, assuming that you provided the right URL.
The following line will just output your string:
<h:outputText value="<!--[if lt IE 8]><h:outputStylesheet library="css" name="styleie8.css" /><![endif]-->" escape="false" />
h:outputStylesheet is also just outputted and not handled as a component. Like this h:outputStylesheet is used as a component:
<h:outputText value="<!--[if lt IE 8]>" escape="false" />
<h:outputStylesheet library="css" name="styleie8.css" />
<h:outputText value="<![endif]-->" escape="false" />
I think you where close with your second alternative. You probably ran into a 404 error because of a missing context path there.
I have on eproblem with IE Compatibility...
for example my site in Compatibility mode which is equivalent to IE 7 has broken...
a will show you 2 screen-shoots:
IE 9 (normal view) - http://screencast.com/t/ysNYN3RJh
IE 9 (Compatibility IE 7 view) - http://screencast.com/t/7X4lR5bNyDhs
in my site i have this meta - <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
but i think it doesn't work properly...
so, how can i fix this problem?
also i tried insert the code <httpProtocol>
<customHeaders>
<!-- IE7 COPABILITY -->
<clear />
<add name="X-UA-Compatible" value="IE=Edge" />
<!-- IE7 COPABILITY -->
</customHeaders>
</httpProtocol> in Web.config
but it also was ignored...
P.S sorry for bad English
Your question is horrifyingly unclear.
X-UA-Compatible doesn't disable compatibility mode; it just prevents it from defaulting to compatibility mode.
It looks like you need an HTML5 shiv for styling HTML5 elements in IE < 9.
The Flex Application is set to 900 pixels width.
The object tag is set to 900 pixels width.
Firefox is rendering the object at 110% the size requested. So there is a blank vertical column on the right size of the object. (It does this if I set fixed height also)
If I set the width in the object tag to 810, then they match up, but thats too much of a hack for me to use.
Here is the object tag.
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="FlashID" title="userlist">
<param name="movie" value="swf/userlist.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="9.0.45.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="swf/userlist.swf" width="100%" height="100%" >
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="9.0.45.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
I think this happens because of the outer <object> tag which doesn't do anything useful in FF anyway. You can easily verify this theory by omitting it for testing. If I'm correct, I suggest you use SWFObject to render the embedding code. Alternatively, you could add some CSS trickery to hide that border in FF.
The comments in the code say why that outer object tag is needed. It is there for Internet Explorer.