Page not Viewing Correctly

4 posts, 1 answers
  1. Web Services
    Web Services avatar
    243 posts
    Member since:
    Apr 2008

    Posted 14 Aug 2009 Link to this post

    This page http://alpha.clickablecommunity.com/ views fine in IE 8 and FF. However it is all messed up in IE 7 and I can't seem to get it fixed. Can you provide some help. Here is my master page and css.
    <%@ Master Language="VB" AutoEventWireup="false" %>

    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <%@ Register TagPrefix="sidepanel" TagName="sidebar" src="/ascx/leftMenu.ascx"%>
    <%@ Register TagPrefix="loginDivTemplate" TagName="login" src="/ascx/loginTemplate.ascx"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <%@ import namespace="System.Data" %>
    <%@ import namespace="System.Data.Sql" %>
    <%@ import namespace="System.Data.SqlClient" %>
    <%@ import namespace="Telerik.Web.UI" %>
    <head id="Head1" runat="server">
        <link href="ClickableCommunity.css" rel="stylesheet" type="text/css" />
        <title></title>
        <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>
    </head>
    <body id="MasterBody" runat="server" style="margin: 0px; height: 100%; overflow: hidden;"
        scroll="no">
        <form id="Form1" method="post" runat="server" style="height: 100%">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <br />
        <asp:ContentPlaceHolder ID="header" runat="server">
        </asp:ContentPlaceHolder>
        <div id="loginDiv">
            <loginDivTemplate:login id="loginPanelContent" runat="server"></loginDivTemplate:login>
        </div>
        <div id="topDiv">
            <div id="image" class="topDivImage">
                <img src="images/logo.jpg" alt="Clickable Community Logo" width="200" height="75" />
            </div>
            <div id="viewMenu" class="viewMenu">
                Menu goes here
            </div>
        </div>
        <telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Vertical" Width="100%"
            Height="100%" CssClass="AllContent" LiveResize="true">
            <telerik:RadPane ID="LeftRadPane1" runat="server" Width="220px" Scrolling="Both"
                BorderStyle="None" BorderSize="0">
                <div id="leftPanel">
                    <sidepanel:sidebar id="leftPanelContent" runat="server"></sidepanel:sidebar>
                </div>
            </telerik:RadPane>
            <telerik:RadSplitBar runat="server" ID="RadSplitBar2" CollapseMode="Forward" EnableResize="false"
                ForeColor='Green' />
            <telerik:RadPane ID="RightRadPane1" runat="server" CssClass="RightPanelPadding" Scrolling="Both"
                BorderStyle="None" BorderSize="0">
                <asp:ContentPlaceHolder ID="MainContent" runat="server">
                
                </asp:ContentPlaceHolder>
            </telerik:RadPane>
            
        </telerik:RadSplitter>
        </form>
    </body>
    </html>
    in the panel MainContent I load this control
    <%@ Control Language="vb" AutoEventWireup="false" CodeBehind="Map.ascx.vb" Inherits="ClickableCommunity.Map" %>
        <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAANvmC5YwARPSDAHoiTGyjXRR-496V5WiR7LkdzcFVQzFkDe07hhSkvWarTS8udi3TGEWMPQwT-FAGew"
            type="text/javascript"></script>

        <script type="text/javascript">
            
            function loadEarth(mapdiv) {
                
                if (GBrowserIsCompatible()) {
                    
                    var point;
                    if (!mapdiv) return true;
                    
                    //find the div
                    map = new GMap2(document.getElementById(mapdiv));

                    //this will add a map overview in the bottom
                    //right hand corner
                    //map.addControl(new GOverviewMapControl());

                    //enable the zooming
                    map.enableDoubleClickZoom();
                    map.enableScrollWheelZoom();

                    //add the different map types i.e. satellite street hybrid
                    map.addControl(new GMapTypeControl());
                    //add the zoom + and - buttons
                    map.addControl(new GSmallMapControl());

                    //call the function that adds the menu
                    //when the user right clics
                    //createContextMenu(map);

                    //set the center, position, and type of map to start with
                    map.setCenter(new GLatLng(40.7001, -99.0844), 15);
                    map.setMapType(G_NORMAL_MAP);

                    geocoder = new GClientGeocoder();

                    //if we wanted to draw a polyline we would uncomment this code

                    //var polyline = new GPolyline([new GLatLng(37.4419, -122.1419),
                    //new GLatLng(37.4519, -122.1519),
                    //new GLatLng(37.4619, -122.1819)], "#3333cc", 10);
                    //map.addOverlay(polyline);

                } //if gbrowseriscompatible
                else {
                    document.getElementById(mapdiv).innerHTML = "Sorry, your browser is not compatible" +
                                                            "with our maps application<br>" +
                                                            "Please try updating to a newer version of your browser.";
                }

            } //loadEarth

            function createContextMenu(localmap) {
                contextmenu = document.createElement("rightClickDiv");
                contextmenu.style.visibility = "hidden";
                contextmenu.style.background = "#ffffff";
                contextmenu.style.border = "1px solid #8888FF";

                contextmenu.innerHTML = "<a href='javascript:zoomIn()'>" +
                                        "<div class='context'>  Zoom in  </div></a>" +
                                        "<a href='javascript:zoomOut()'>" +
                                          "<div class='context'>  Zoom out  </div></a>" +
                                        "<a href='javascript:zoomInHere()'>" +
                                          "<div class='context'>  Zoom in here  </div></a>" +
                                        "<a href='javascript:zoomOutHere()'>" +
                                        "<div class='context'>  Zoom out here  </div></a>" +
                                        "<a href='javascript:centerMapHere()'>" +
                                          "<div class='context'>  Centre map here  </div></a>";

                localmap.getContainer().appendChild(contextmenu);
                GEvent.addListener(localmap, "singlerightclick",
                      function(pixel, tile) {
                          clickedPixel = pixel;
                          var x = pixel.x;
                          var y = pixel.y;
                          if (x > localmap.getSize().width - 120) {
                              x = localmap.getSize().width - 120
                          } //if
                          if (y > localmap.getSize().height - 100) {
                              y = localmap.getSize().height - 100
                          } //if
                          var pos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(x, y));
                          pos.apply(contextmenu);
                          contextmenu.style.visibility = "visible";
                      } //function(pixel, tile)
                 ); //GEvent.addListener

                GEvent.addListener(localmap, "click",
                      function() {
                          contextmenu.style.visibility = "hidden";
                      } //function
                 ); //GEvent.addlistener
            } //createContextMenu
            function zoomIn() {
                localmap.zoomIn();
                contextmenu.style.visibility = "hidden";
            } //zoomIn      
            function zoomOut() {
                localmap.zoomOut();
                contextmenu.style.visibility = "hidden";
            } //zoomOut      
            function zoomInHere() {
                var point = map.fromContainerPixelToLatLng(clickedPixel)
                localmap.zoomIn(point, true);
                contextmenu.style.visibility = "hidden";
            } //zoomInHere      
            function zoomOutHere() {
                var point = map.fromContainerPixelToLatLng(clickedPixel)
                localmap.setCenter(point, map.getZoom() - 1);
                contextmenu.style.visibility = "hidden";
            } //zoomOutHere      
            function centerMapHere() {
                var point = map.fromContainerPixelToLatLng(clickedPixel)
                localmap.setCenter(point);
                contextmenu.style.visibility = "hidden";
            } //centerMapHere

        </script>
    <div id="divMap">
    </div>




    CSS Page


    body {
    height:100%;
    }
    #leftPanel{
        display:inline;
        height:500px;
        width:220px;
        border-top-style: none;
        border-right-style: none;
        border-left-style: none;
            
    }
    .loginLabel{
        padding-right: 10px;
        padding-bottom: 10px;
    }
    .loginTextBox{
        width: 120px;
    }
    .leftPanelContent{
        padding-bottom: 30px;
    }
    #topDiv{
        height: 60px;
        border-bottom-width: 4px;
        border-bottom-color: Gray;
        border-bottom-style:groove;
            
    }
    #loginDiv{
        position: absolute;
        display:inline;
        right: 10px;
        top: 5px;
    }
    #menuDiv{
        position: absolute;
        padding-top: 75px;
        margin-left: auto;
        margin-right:auto;
    }
    .AllContent{
        border-right: none;
        
    }
    .addBusinessLabel{
        padding-top: 5px;
        padding-bottom: 2px;
        text-align: center;
        display: block;
    }
    .addBusinessTextBox{
        width:150px;
        text-align:center;
    }
    #MainContent{
        display:inline;
        height:500px;
        width:400px;
    }
    .displayInline{
        display: inline;
    }
    #divMap{
        height:480px;
        width:700px;
        border: groove 4px #EEEEEE;
        border-right: groove 4px #EEEEEE;
        margin-left: auto;
        margin-right: auto;
    }
    .RightPanelPadding
    {
        position: relative;
        height:500px;
        padding-left: 35px;
        padding-top:10px;
        
    }
    .topDivImage{
    position: absolute;
    top: 0;
    left: 0;
    display:inline;
    width:220px;
    }
    .viewMenu{
    padding-left:220px;
    margin-right:auto;
    margin-left:auto;
    text-align:center;
    width:800px;
    vertical-align:bottom;
    padding-top: 46px;
    }
    .emptyTextboxText{

        font-style:italic;
        font-size:10px;
        color: #D8D8D8;

    }

    Thanks,
  2. Answer
    Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 17 Aug 2009 Link to this post

    Hello Web Services,

    I examined the live url and I was able to reproduce the problem there. However, when I built a reproduction page locally, it did not come up - please see the attached demo. One of the possible reasons might be that you have not set height 100% to the html element, so please insert the following style to see whether this helps:

        html, body, form  
        {  
           height: 100%;  
           margin: 0;  
           padding:0;  
        } 

    If this does not help, please isolate the issue so that the code is fully runnable and either paste it here (make sure that it can be run without any modifications) or best - open a new support ticket and send us a working demo. When isolating the issue in a simpler setup, note, that the height of the splitter depends on its parent element and not its content so that you can remove it. You can also test with a standard DIV element with some background color instead of a splitter - it should behave in teh same way. Also, if you make the DIV look as expected, if you replace it with the splitter later, everything should be OK.

    Kind regards,
    Svetlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Web Services
    Web Services avatar
    243 posts
    Member since:
    Apr 2008

    Posted 17 Aug 2009 Link to this post

    That did it. Our CSS person is out of the office and I don't usually position things. Thanks,
  5. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 17 Aug 2009 Link to this post

    Hello Web Services,

    I am glad I could help. I also believe that it could be helpful in your later development to know that always when the splitter is configured in percentages, will of its parent elements heights should be set explicitly (either in pixels or percentages) including the html, body, form elements. This means that if you encounter the same issue again, you should first see whether the style I provided is present and also you should go through all the parents in which the splitter can be nested - e.g DIV, TD, TR, TABLE elements and see whether they have explicit height set.

    Regards,
    Svetlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
Back to Top