Opera Mobile 9.5 issue

Opera Mobile 9.5 issue

Experts,

I am working on a Mapping Web Mobile Application...

A user is using Opera Mobile 9.5....

The Map page got 2 frames...one for Navigation Tools and the 2nd is the Map page




The Navigation page is like this:

    <form id="form1" runat="server">
    <table  ID="ToolbarTable"
            class="ToolbarTable">
        <tr>
           
            
            <td>
              <asp:ImageButton id="btnHome" 
                        runat="server" 
                        ImageUrl="~/images/Home.PNG"/>
            </td>             
            <td>
                <img src="images/Seperator.PNG" />
            </td>  
            <td>
               
            <img    class="ToolBarButton"
                alt="ZoomtoScale"  
                id="Img1" 
                src="images/zoomscale.PNG" 
                onmouseover="this.style.cursor='hand'" 
                onclick="ShowZoomtoScaleForm()"/>              
            </td>
            <td>
             <img    class="ToolBarButton"
                alt="Layers"  
                id="layers" 
                src="images/Layer.png" 
                onmouseover="this.style.cursor='hand'" 
                onclick="ShowLayersForm()"/>
            </td>   
            <td>
                <img src="images/Seperator.PNG" />
            </td>           
            <td>
                 <img    class="ToolBarButton"
                    alt="Info" 
                    id="info" 
                    src="images/Info.png" 
                    onmouseover="this.style.cursor='hand'" 
                    onclick="InvokeFindFeature()"/>
            </td>
            <td>
             <img    class="ToolBarButton"
                alt="Search" 
                id="search" 
                src="images/Search.png" 
                onmouseover="this.style.cursor='hand'" 
                onclick="ShowSearchForm()"/>                
            </td>  
            <%  If (IsCaptureEnabled) Then%>  
             <td>
                <img src="images/Seperator.PNG" />
            </td>  
            <td>
             <img    class="ToolBarButton"
                alt="Capture" 
                id="capture" 
                src="images/Target.PNG" 
                onmouseover="this.style.cursor='hand'" 
                onclick="InvokeCaptureMode()"/>
            </td>
            <td>
                <img src="images/Seperator.PNG" />
            </td>  
            <td>
             <img    class="ToolBarButton"
                alt="Cancel" 
                id="cancelcapture" 
                src="images/Cancel.PNG" 
                onmouseover="this.style.cursor='hand'" 
                onclick="CancelCaptureMode();"/>
            </td>
            
            <%  End If%>
            <td>
              <asp:ImageButton id="btnDataEntryForm" 
                        runat="server" 
                        ImageUrl="~/images/Go.PNG" Enabled="False" ToolTip=""   />
                <input type="hidden" id="XPixelValue" runat="Server"/>
                <input type="hidden" id="YPixelValue" runat="Server"/>  
                <input type="hidden" id="DisableZoomOut" value="false" runat="Server"/>
                <input type="hidden" id="DisableZoomIn" value="false" runat="Server"/>                        
            </td>
             <td>
                <img    id="img_progress" 
                        src="images/progress_bar.gif"
                        style="visibility: hidden;" />
            </td>       
        </tr>
    </table>
  
    </form>

The Maps Page is:

  <form id="form1" runat="server">    
        <asp:Table  ID="OuterMapTable" 
                    CssClass="OuterMapTable"
                    CellPadding="0"
                    CellSpacing="0"
                    runat="server">                
            <asp:TableRow   ID="MapRow"  
                            runat="server">
                <asp:TableCell  ID="MapTD" 
                                HorizontalAlign="left"  
                                VerticalAlign="Top"
                                runat="server">
                        <img    id="shadow" 
                                src="Images/shadow.png" 
                                style="visibility: hidden;z-index: 280;position: absolute; left: 0px; top: 0px" 
                                alt="" />                                              
                        <img    id="marker" 
                                src="Images/newIncident.png" 
                                style="visibility: hidden;z-index: 300;position: absolute; left: 0px; top: 0px" 
                                alt="Incident" />
                        <asp:ImageButton    ID="btnZoomIn" 
                                            runat="server" 
                                            ImageUrl="~/images/ZoomIn.png" 
                                            Visible="true"
                                            OnClientClick="ZoomIn();return false;"  /> 
                        <asp:ImageButton    ID="btnScale" 
                                            runat="server" 
                                            ImageUrl="~/images/scale5.png" 
                                            Visible="true"
                                            OnClientClick="return false;"  /> 
                        <asp:ImageButton    ID="btnZoomOut" 
                                            runat="server" 
                                            ImageUrl="~/images/ZoomOut.png" 
                                            Visible="true" 
                                            OnClientClick="ZoomOut();return false;"  /> 
                        <asp:ImageButton    ID="btnPanUp" 
                                            CssClass="PanBar" 
                                            runat="server" 
                                            ImageAlign="AbsMiddle" 
                                            ImageUrl="~/images/navpanup.png" 
                                            Visible="true"
                                            OnClientClick="PanUp();return false;"  /> 
                        <asp:ImageButton    ID="btnPanLeft" 
                                            CssClass="PanBar" 
                                            runat="server" 
                                            ImageUrl="~/images/navpanleft.png" 
                                            Visible="true"
                                            OnClientClick="PanLeft();return false;"  />         
                        <asp:ImageButton    ID="btnPanRight" 
                                            CssClass="PanBar" 
                                            runat="server" 
                                            ImageUrl="~/images/navpanright.png" 
                                            Visible="true"
                                            OnClientClick="PanRight();return false;"  /> 
                        <asp:ImageButton    ID="btnPanDown" 
                                            CssClass="PanBar" 
                                            runat="server" 
                                            ImageUrl="~/images/navpandown.png" 
                                            Visible="true"
                                            OnClientClick="PanDown();return false;"  /> 
                         <asp:Label  ID="promptMessage"   CssClass ="promptMessage" runat="server" ></asp:Label>                    
                         
                        <asp:Image  ID="mapImage" 
                                     AlternateText="Map" 
                                     
                                      
                                      
                                    BorderColor="navy"
                                    BorderWidth="1"
                                    runat="server"  
                                    ImageUrl="~/images/Error.PNG" 
                                    onclick="HandleMapClick(event)"/>
                    <input type="hidden" id="MapMode" runat="Server"/>
                    <input type="hidden" id="BrowserName" runat="Server"/>                                                                                                                
            </asp:TableCell>
        </asp:TableRow>
     
    </asp:Table>
    </form>

The Frames Page:

    <form id="form1" runat="server">
    <div  runat="server"  id="ZEDIV">
    <iframe name="MenuFrame"  scrolling="no"  
                style="border:0;"
                src="mobToolbar.aspx" 
                width="100%" 
                height="<%=m_nMenuFrameHeight%>px"
                id="MenuFrame">
        </iframe>
        <iframe name="MapFrame" scrolling="no"
                style="border:0;"
                src="mobMap.aspx" 
                width="100%" 
                height="<%=m_nMapFrameHeight%>px" 
                id="MapFrame">    
        </iframe>
        
    </div>    
    </form>

I have the Following tags in the header of the three pages above

<meta name="mobileoptimized" content="0"/> 
<meta name = "viewport" content = "width = device-width, height = device-height" />

My Problem is that in Opera 9.5 the images are not displayed as it should be.....some of the icons in the Navigiation pages looks like it is missing...the Map image sometimes look like it is not fully loaded...when I refresh the page it works ok...

Any Advice Please

Thanks

You should remove the device-height as you won't need that. I've never gotten the viewport tag working correctly on 9.5, it just appears to ignore device-width and scales everything at 200%. It does sort of work if you set it to the number of pixels that match the screen's width. However, it seems you are having other problems if your images aren't loading.