4

I have wrote my own embed-server, which can generate response to web browsers. The generated "main page" is like the following html.

<!DOCTYPE html>
<html><head><link rel="stylesheet" href="styles.css"><title>ABC Inc. Web Configurator</title></head><body>
<nav><p>[<b>Home</b>]</p></nav>
<table>
<tr><td><a href=Config>Config</a></td></tr>
<tr><td><a href=Logger>Logger</a></td></tr>
</table>
<footer>Web Configurator &copy; ABC Inc. 2014 - 2015</footer></body></html>

And the generated CSS file is

.even{
 background-color: #EFF;
}
.odd{
 background-color: #FFE;
}
.title{
 background-color: #226;
 color: #EEF;
}
a{
 color: #36C;
 text-decoration: none;
}
a:hover{
 text-decoration: underline;
}
body{
 font-family: Tahoma;
 font-size: 100%;
}
footer{
 color: #999;
 font-size: 0.7rem;
}
nav{
 background-color: #DDF;
 font-size: 1.1rem;
}
td{
 min-width: 60px;
}

When I browse the main page by Chrome 43 or Firefox 39, they're both okay. However, when I use IE11, the CSS not apply to the html, even though that I can make sure IE11 have access the CSS file from my server. If I press F12 in IE, the DOM manager shows no stylesheet in this page.

BTW, my URL is http://localhost:8888/, and need a basic authentication. Any idea how can I fix it?

UPDATE

  1. I've read the stackoverflow thread before, and I'm sure my problem is not about browser caching. Thanks Mauro for notification.

  2. I've tried Chrome + IE tab2, the CSS works, but not apply to nav and footer tag. I guess IE tab not support HTML5.

UPDATE

  1. I've try both of closed and non-closed link tag, both of them are not solve my problem with IE11.

  2. I've try to disable Basic Authentication, still not working.

UPDATE

  1. The CSS also works in Firefox 39.

  2. The CSS works with IE11 + Compatible mode (but HTML5 tags will be ignored).

Community
  • 1
  • 1
J.C
  • 633
  • 1
  • 13
  • 27
  • could it be caching rather than an issue? open developer tools and press CTRL-F5, does that then load the style sheets? – Mauro Jul 27 '15 at 08:10
  • Can you access the CSS file directly from IE11 (not via the page itself) and without authenticating? – LDJ Jul 27 '15 at 08:17
  • 1
    it might look like the issue with the loading the css file – Himesh Aadeshara Jul 27 '15 at 08:21
  • @Mauro: No, it's not the cache problem. I've read another thread about this, but I forgot to said in my article. Thanks for your notification. – J.C Jul 27 '15 at 08:48
  • @LDJ: Hmm, no. Accessing the CSS directly need authentication too. – J.C Jul 27 '15 at 08:50
  • your `link` tag isn't closed, might be causing ie11 to ignore it – atmd Jul 27 '15 at 09:19
  • @atmd: Thanks for notification, but my original design is closed tag (single link tag end with "/>" ). I've read some articles and modified it to non-closed tag. Anyway, it's not the point that why IE11 not working :'( – J.C Jul 27 '15 at 09:29

4 Answers4

1

Try adding this attribute to the link tag: type="text/css" Example:

<link rel="stylesheet" type="text/css" href="styles.css" media="screen">
tarkil
  • 164
  • 1
  • 16
  • In addition your title CSS is for class named title and won't be applied to the title tag you used in your HTML. – tarkil Jan 01 '16 at 17:11
  • thanks for reply, however, it's still not work :'( BTW, the .title is not design for title tag. (and color attribute can not apply to title, isn't it? – J.C Jan 04 '16 at 02:17
1

After I compare a lot of website, I find out this problem could be solved easily by just remove the html5 declaration <!DOCTYPE html>. However, I don't understand why IE11 act like that, it should have support html5.

PS. I've read this SO article and add type="text/css", but it seems IE11 never care about that.

Community
  • 1
  • 1
J.C
  • 633
  • 1
  • 13
  • 27
0

Check if HTML1202 issue described here can resolve your problem.

if so, check this: How to avoid ie8 compatibility button?

Community
  • 1
  • 1
mojmir.novak
  • 2,920
  • 3
  • 24
  • 32
  • Hmm... I guess my problem is different with HTML1202. However, if I turn on compatible mode in IE11, the CSS will be applied normally. – J.C Jan 04 '16 at 02:22
0

I know this is an old problem, but I ran into it trying to solve the same problem with my webserver.

IE/Edge was not honouring the css generated by my (custom-built) webserver. The problem was when my webserver returned the css it didn't mark the mime-type as css and IE/Edge reported (hidden in its console output):

SEC7113: CSS was ignored due to mime type mismatch.

Fix was simply to mark the HTML response mime-type as "text/css" and all was OK. Note that all the other browsers (Firefox, Chrome, Safari, Android) I tried had no problem with the incorrect mime-type, they just got on with it.

T Clulow
  • 74
  • 7