Problem using OpenLayer example

Problem using OpenLayer example

Hi

I am using below Jquery Mobile example of Open Layers -

http://openlayers.org/dev/examples/mobile-jq.html#mappage


When I zoom the map, the buttons are also zoomed which looks very odd and it becomes impossible to navigate in the map on a mobile phone.

I checked the code for the example which has been reproduced as under -

 <div data-role="page" id="mappage">
          <div data-role="content">
            <div id="map"></div>
          </div>

          <div data-role="footer">
            <a href="#searchpage" data-icon="search" data-role="button">Search</a>
            <a href="#" id="locate" data-icon="locate" data-role="button">Locate</a>
            <a href="#layerspage" data-icon="layers" data-role="button">Layers</a>
          </div>
         
        </div>


Even though footer is in separate div from Map (which is in content Div) then also footer is zooming on just zooming map.

Please let me know possible solution to this issue.

Thanks!