OpenLayers map rows not aligning

Question

I got this OpenLayers Project where i need to use a local mapservice. The problem i am encountering: (Screenshot) http://tinypic.com/r/x38oq1/6 This is for me a riddle in itself, as im using 100% identical code on a blank webpage for testing purposes ( a blank page would be a page with only the map on it) and that works just fine! (screenshot: http://tinypic.com/r/20zyxxh/6) I am using OpenLayers 10.12 (Newest stable by 26. July) I am also using the codeigniter Framework with bootstrap twitter. The map shows up great if i use the same mapserver as the guides/tutorials use - but failed when i switched to my local map folder. The JavaScript code: ``` ``` If anyone has any idea why it acts like this, that would be great! I tried the…

Accepted Answer

so i found the solution to the problem, and im posting it if anyone else runs into the same issue.

The problem lies within Bootstrap Twitter styling. But, the twitter team has created a ID tag that fixes the issue. Using ID="map_canvas" fixes the problem.

The code that puts some sort of max width on the tiles of the map:

Bootstrap.css - Line 64-74:

```
img {
  max-width: 100%;
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}
```

The solution is found on line 76-78(boostrap.css):

```
#map_canvas img {
  max-width: none;
} 
```

Hope this helps for anyone else! Have a nice day!

OpenLayers map rows not aligning

Solution

Problem