Nokia Maps rendering issue using IE8 & Twitter Bootstrap

Today at work we had the problem where a standard Nokia map, with a pointer would not render the map images, the overlay controls where there, such as the zoom and view type etc, but it would just show a white background. See image below:

Nokia Maps not rendering correctly in Internet Explorer 8

As you can probably guess, this only becomes a problem when using Internet Explorer 8 or lower. Since there isn't really a good spread of knowledge on Google when it comes to Nokia maps. We needed to fix this one ourselves.

The Solution

To cut a long story short, we were using the Twitter Bootstrap HTML5 framework and the problem was down to this bit of CSS in bootstrap.css


img {
width: auto\9;
height: auto;
max-width: 100%;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}


The max-width: 100% was the culprit, I believe this is used by the Bootstrap responsive element to resize images when the viewport changes.

Using the following conditional statement and an IE8 specific stylesheet, we were able to resolve the problem


<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="/css/ie8.css">
<![endif]-->


We changed the CSS to as follows:


img {
width: auto\9;
height: auto;
max-width: none;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}