When using openlayers with Zen, the presentation of a map is broken. See attached screenshot.

the problem is the img{max-width: 100%} CSS statement in normalize.css, line 518. The problem is documented here: http://stackoverflow.com/questions/11266297/openlayers-openstreetmap-bac...

When overridden with img{max-width: none}, the problem disappears.

I do not know what effects the max-width: 100% has. Neither can I assess the result of overriding it.

Do I do any damage with this?

CommentFileSizeAuthor
zen and openlayers.JPG29.36 KBcgalli

Comments

echoz’s picture

echoz commented

max-width: 100% keeps images contained within a flexible width container, as in responsive layouts. You could try changing this just targeting your map images.

I'm not familiar with openlayer, but I'd seen another map issue reporting a similar issue, but don't have anything to test. Would you also test if adding width: auto; on img (while keeping max-width: 100%;) fixes your map issue? There's an IE8 bug with max-width: 100%; that width: auto; fixes.

sl27257’s picture

sl27257
Location Stockholm
commented

I have the same problem in Firefox (and Iceweasel) and IE with Google Maps. The map and the controls don't show correctly. The only way to fix it is to remove the "max-width: 100%" statement in normalize.css. In my case it is not fixed by adding: "width: auto;". Another probably better way is to add the following css: 

#map img {
  max-width: none;
}

/Thomas

chats’s picture

chats commented

#map img {
max-width: none;
}

Worked for me...thanks!

echoz’s picture

echoz commented
Status: Active » Fixed

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.