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,