Web Services
Top achievements
Rank 2
Rank 2
Web Services
asked on 14 Aug 2009, 03:33 PM
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&v=2&sensor=false&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,
<%@ 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&v=2&sensor=false&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,
3 Answers, 1 is accepted
0
Accepted
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:
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.
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.
0
Web Services
Top achievements
Rank 2
Rank 2
answered on 17 Aug 2009, 02:09 PM
That did it. Our CSS person is out of the office and I don't usually position things. Thanks,
0
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.
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.