I'm using Twitter Bootstrap and Open Layers to show a map on a page:
http://tinypic.com/r/2qu826t/5
The map should be 100 pixels to the left and over top of the div id="OpenLayers.Layer.Image_84" (outlined in blue).
It should also be 1024 pixels wide; instead it's been truncated to about 823.
The results can be seen in the div containing the map tile (a 1024x1024 png):
<img class="olTileImage" style="visibility: inherit; opacity: 1; position: absolute; left: 101%; top: 0%; width: 822.944%; height: 1024%;" src="/static/img/maps/seattle.png"
If I manually change left:101% to left:1% and width:822.944% to width:1024% everything looks right. But I've no idea what is programmatically causing this to be wrong.
Also, I've used the exact same code in a non-Bootstrap sandbox and it works fine. Hence my assumption that it's a collision with Bootstrap that's causing this.
Anyone have any ideas?
