I have a nested div (see below) which have different CSS classes to give a background color for the container and a format for the text
<div class="section">
<div class="sectionTitle">
<dx:ASPxLabel ID="lblSectionTitle" runat="server" Text='<%# Eval("SectionTitle") %>'></dx:ASPxLabel>
</div>
<div class="sectionTitle">
<dx:ASPxLabel ID="lblSectionDesc" runat="server" Text='<%# Eval("SectionDescription") %>'></dx:ASPxLabel>
</div>
There is a closing tag for the section div, there's more content in there which is rendering correctly.
The CSS for the above is:
.section
{
padding: 5px;
background-color: #ffffff;
}
.sectionTitle
{
font-size: 11px;
font-family: Arial;
font-weight: bold;
color: #546fb2;
}
When I comment out the background color in .section the formatting of sectionTitle is being applied but when I put the background-color in there it overwrites the color of the sectionTitle. I have tried setting the color of .section to match .sectionTitle but this still doesn't work.
In every browser (IE9 non-compatibility, Firefox, Chrome) it works fine and I've been looking at this for a couple of hours now which is getting slightly frustrating as I can't spot the issue.
The content is on a ASP.NET page which uses a MasterPage which has the doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Can anyone help shed some light on this please?
Thanks in advance
Andy
Internet Explorer has a compatibility "feature" where it always renders sites that are on the local network in compatibility mode. You have to explicitly turn this off in one of two ways.
<meta http-equiv="x-ua-compatible" content="ie=edge" />
This edge marker tells ie to always render in it's most standard mode it supports.
The other method (which I prefer) is used if you are using a server side technology like asp.net or php, which is to add an http header (in asp.net this goes in global.asax, also the chrome=1 enables chromeframe if installed):
protected void Application_BeginRequest()
{
Response.Headers.Add("X-UA-Compatible", "IE=edge, Chrome=1");
}
EDIT:
There is also a third way, and that's to disable it in the compatibility view tab in Internet Options. This only affects your computer, however.
Also, it's better t use the header method if at all possible, rather than the meta tag method. By the time the browser has read the metatag, it's already in it's primary mode. The meta tag only affects the document rendering mode, rather than the browser compatibiltiy mode. There is a subtle difference that can, in some cases, have an affect.
try add this to header
<meta http-equiv="x-ua-compatible" content="ie=emulateie9" />
Press F12 on IE9 and if there is document mode Qirks, you must fix it by meta tag. Maybe this is your problem.
Related
IE11 will NOT load external css from the intranet - at all. Internal css works fine. In-line css works fine. External CSS works fine on the Internet. Everything works fine in other browsers - everywhere!
When I open C:\Users\hennesse\Desktop\test.html (below) by either right-clicking and openWith->IE - or- typing into the IE location bar, I get two alerts: "internal javascript", and "external javascript" - then:
the first line is NOT red
the second line is blue
the third line is green
However, if I upload this to my web server, and open it with IE, the first line IS red. With Firefox and Chrome, the first line is ALWAYS red, intranet or internet.
For some reason, IE11 will not load the external CSS file on "My Computer".
Changing security settings in Internet Options->Security->Allow Active Content to run in My Computer (and rebooting) results in a prompt (or not) about Allow Active Content? But the results are the same.
This is driving me insane! -Dave
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="test.css">
<!--
external file test.css contains:
body { color: #ff0000 }
-->
<style type="text/css">
.blue {
color: blue;
}
</style>
<script type="text/javascript">
alert("internal javascript");
</script>
<script type="text/javascript" src="test.js">
// external file test.js contains
// alert("external javascript");
</script>
</head>
<body>
This should be red, but it isn't
<p class="blue">
This is blue
</p>
<p style="color:green">
This is green
</p>
</body>
</html>
In the F12 console, I found: SEC7113 "CSS was ignored due to mime type mismatch". Discussion here: 1 [MSDN]. It seems that IE9 and above "sniff" the HTTP headers for the correct MIME type, and ignore JS and CSS that have the wrong header. When it fetches files from the local filesystem, it should disable this sniffing, since there aren't any real HTTP headers.
But my particular computer is sniffing and ignoring anyway. I've searched and searched, but the mighty Internet has only yielded one other person who has this problem. She solved it by reloading the operating system. I'm not gonna do that!
I very seldom use IE for anything except a final compatibility check after I've loaded stuff to a server. Except for one personal "extension" to a Windows app that invokes IE on the user's computer. Since I'm the only using it, I just hit F12, and select IE8 mode (this shows it's the IE9-up MIME sniffing). It works fine, and since it only costs me a couple mouse clicks, it sure beats reloading the OS.
Although I didn't really solve the problem, perhaps the "sniff and ignore" info can help someone else do so. OCHI - thanks for your help.
-Dave
I have a third party application that can host HTML in something it calls a container. In the container, we do the following:
<meta content="IE=EmulateIE9" http-equiv="X-UA-Compatible" />
<iframe style="WIDTH: 100%; HEIGHT: 640px" id="c_list"
src="/Path/ToMVC/ControllerPage" width="100%"></iframe>
In the _layout.cshtml that is used by ControllerPage, we hardcoded the links to the CSS in the head element. If I right click and pick "View Source", I can see the paths. Ex:
<link href="/Project/Content/Sheet.css" rel="stylesheet"/>
Despite all of the above, the CSS in Sheet.css is ignored/dropped/not used. When I view the "/Path/ToMVC/ControllerPage" URL in its own window, all the CSS renders without issue. How can I force the IFrame to stop dropping the CSS?
EDIT: Ok, I made a discovery. Using the F12 dev tools, I noticed the page using the IFrame was running in IE quirks mode instead of IE standards mode (Which is what the page is using when viewed outside of an IFrame). When I changed it to IE 9 Standards mode, all the CSS worked! Is there a way I can force the IFrame page to go with IE9 Standards instead of Quirks mode?
When rendering a site in Chrome I noticed that certain <input> elements started appearing weird. When inspecting the elements in Chrome's built in developer tools I found matched -webkit CSS-rules which are not present in any stylesheets. For instance the following example:
<input type="submit">
No rules for elements of the kind, but this is what Crome's developer tools show:
Matched CSS Rules:
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"]::-webkit-file-upload-button,
button {
-webkit-box-align: center;
...
}
Does anyone have any clue to why I'm experiencing this? The page loads with standard headers:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
HTML 5 is mentioned nowhere (if that has anything to do with it...).
Thanks.
Those CSS rules are baked into your browser. Every browser has their own. This is why browser differences have been agonising web developers for years.
You can use a CSS reset or normaliser (plenty available on the web of both) to avoid this, or override them yourself.
Finally you should also be able to change these effectively in your browser, but then you should know that your web pages will look different than how everyone else sees them.
That's what some browsers do to present a decent default look on some tags.
Just override them in your stylesheet once you detect them.
Changing the font size with CSS is just not working in IE9. The font will change but the font size will not.
It works perfectly in chrome and firefox.
I tried to use em,pt instead of px. i tried font-size:40px. i tried everything.
The font size will just not change.
<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<meta charset="utf-8">
<style type="text/css">
body{
font: 40px Arial;
}
</style>
</head>
<body>
font size test
</body>
</html>
I think your CSS is overridden with you browser settings. Check the accessibility settings of the browser.
body {
font-size: 40px;
font-family: Arial;
}
If you have tested this with the exact document you posted, then apparently your IE 9 is broken. Re-install it. Otherwise, please post a complete example code or a URL that demonstrates the problem.
Make sure your zoom in IE9 is set to 100%. To do this, Hit CTRL + 0 while in the browser.
Make another CSS definition is not overriding your font-size statement. You can even force the font size by using the !important attribute like this:
body {
font-size: 40px !important;
}
Make sure you are clearing your cache when you refresh the page. To do a cache-free reload of a page, Hit CTRL + F5 in your browser. This will flush the cache and reload the page completely.
As far as the code you posted, I copy/pasted it as is and it works as intended in IE9. You may want to reinstall IE on your computer if you still can't get it working.
I have been working on a tab menu without adding the doctype statement. It works perfectly in my eyes but when I do place the <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> or any other type of Doctype, my layout completely messes up. Below are three pictures which describe
1.) Expanded Window (without doctype)
2.) Contracted Window (without doctype)
3.) Contracted Window (WITH doctype)
I'm using the :after pseudo to place the right side of the "sliding door" with the code snippet:
#nav li:after {
width:10px;
content:"";
background: url('tabRight.png');
position:absolute;
height:100%;
top:0;
right:-10;
}
I'm pretty new to web development so I have no idea what could be causing this. Any help at this point would be appreciated. Thanks!
HTML:
<div id="nav">
<ul>
<li id="dead">
<a href='javascript: toggle()'>
<div script="padding-left:5px;">
<img class="navImg" src="dead32.png" />
<p class="navTxt">Deadlines</p>
</div>
</a>
</li>
<li> About</li>
<li> Address</li>
</ul>
</div>
EDIT:
The right:-10; is causing the problem. If I set right:0; The layout is restored, however then this makes the "sliding doors" not work for me. The transparent edge from the right sliding door shows the grey background when it overlaps the left sliding door, which is not what I want.
No doctype == quirks mode. The layout behavior in the quirks/strict modes at times differs drastically.
IF you have written your code and css without adding DOCTYPE in you header. It means by default your browser is in quirks mode that means browser dont know how to render the elements. It is always necessary to add doctype in header because some browser like IE will messup your entire layout.
My suggestion is to add doctype transitional and start the code/css, this will be suitable for you and it will always helpful to solve browser compatibility issues.
Here is example by default dream weaver is creating when you create new HTML template.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
The Document Type Definition defines how certain tags have to be interpreted by the browser. XHTML as a XML-based markup language is very strict and requires you to open and close your tags appropriately (also it is case-sensitive).
Probably your website doesn't follow the strict DTD rules, hence the differences in display.
As per my comment, I would recommend adding a Strict DTD (as you always should anyway) and code against that. Also, using a CSS reset selector is always a good rule of thumb
*{
margin: 0;
padding: 0;
}