Internet Explorer not getting stylesheet

Vaadin 6 / 7 / 8 Framework UI
1

My application displays html files to the user, and right now I cannot get IE to behave like FF or Chrome.

For example, here is an html file I display:

<!DOCTYPE html>

<html>

<head>
  <LINK href="html/style.css" rel="stylesheet" type="text/css">
</head>

<body>

<h1>Project Status</h1>

<div class="image_thumbnail">
  <a href="images/project_status.png"> <img src="images/project_status.png"> </a>
  <div class="desc">Project Status</div>
</div>

<h1>Block Status</h1>

<ul>
<li><a href="html/dhm.html">dhm</a></li>
<li><a href="html/dhm_ram.html">dhm_ram</a></li>
<li><a href="html/dhm_upf.html">dhm_upf</a></li>
</ul>

<ul>
<li><a href="html/dhm.html">block4</a></li>
<li><a href="html/dhm_ram.html">block5</a></li>
<li><a href="html/dhm_upf.html">block6</a></li>
</ul>

<h1>End</h1>

</body>

</html>

This file displays correctly in FF and Chrome. Please see FF_correct.png and IE_Wrong.png.
The issue is with project_status.png, with class=“image_thumbnail”.

Now, if instead of including the stylesheet in the usual way, and instead embed the style information
directly using , IE displays the result properly.

How can I get IE (or vaadin running under IE) to load the style sheet correctly? The workaround of embedding styles directly into my document will not sit well with customers.

Environment:
IE 11
latest FF and chrome
Vaadin 7.1.12
component displaying the html is a BrowserFrame

16615.png
16616.png

2

For anyone else that runs into this…
Since we are supplying these files to customers as a series of templates for them to use, right now the solution is to embed the styles directly in the supplied templates instead of referring to external stylesheets. Not ideal, but our stylesheets are fairly small, and customers are unlikely to change them.