IE7 zooming problems within a contentplaceholder

stefans · Post by **stefans** » Wed Jun 25, 2008 1:50 pm

Hi

I have an issue with zooming in IE 7.
The Problem occurs if I use a ContentPlaceHolder in the Masterpage.

So now I place a webchart on to the content which i defined in the Masterpage. When I zoom within the Teechart, the ZoomRect has false positions.
The x-pos always has an left offset (for example 220 px as defined navigation width, which I defined in the CSS File).

The Problem doesn't occur in Firefox.

Below you see the Source-Code.

How can I resolve this problem?

Thanks!

Masterpage:

Code: Select all

<!-- Put IE into quirks mode -->
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="Site" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <link href="style.css" rel="stylesheet" type="text/css" />	   	        
</head>
<body>    	
<form id="frmMain" runat="server">
		<div id="header">
		    Titel
		</div>   	
		<div id="navigation">
            Navigation
		</div>		
		<div id="main">
            <asp:contentplaceholder id="content" runat="server"></asp:contentplaceholder>              		
		</div>
</form>
</body>
</html>

Default.aspx:

Code: Select all

<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/MasterPage.master" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

<%@ Register assembly="TeeChart" namespace="Steema.TeeChart.Web" tagprefix="tchart" %>


<asp:Content ID="myContent" ContentPlaceHolderID="content" runat="server">            
    <div id="content">        
        <tchart:WebChart ID="_webChart" runat="server" AutoPostback="False" 
            Config="AAEAAAD/////AQAAAAAAAAAMA..." 
            GetChartFile="GetChart.aspx" Height="500px" TempChart="Session" 
            Width="600px" />    
    </div>
</asp:Content>

Default.aspx.cs:

Code: Select all

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using Steema.TeeChart.Tools;
using Steema.TeeChart.Styles;
using Steema.TeeChart.Web;

namespace WebApplication1
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            SeriesHotspot seriesHotSpot1 = new SeriesHotspot(_webChart.Chart);
            seriesHotSpot1.MapAction = MapAction.Mark;

            ZoomTool zoomTool = new ZoomTool(_webChart.Chart);

            CheckZoom(_webChart);
        }    

    private void CheckZoom(WebChart myChart)
    {
        ArrayList zoomedState = (ArrayList)Session[myChart.ID + "Zoomed"];
        zoomedState = ((ZoomTool)myChart.Chart.Tools[1]).SetCurrentZoom(Request, zoomedState);
        if (zoomedState == null)
            Session.Remove(myChart.ID + "Zoomed");
        else
            Session.Add(myChart.ID + "Zoomed", zoomedState);
    }
    }
}

style.css

Code: Select all

html {
	height:100%; 
	max-height:100%; 
	padding:0;
	margin:0; 
	border:0; 
	background:#fff; 
	font-size:76%; 	
	font-family: Arial, Helvetica, Georgia, "Times New Roman", Times, serif;
	/* hide overflow:hidden from IE5/Mac */ 
	/* \*/ 
	overflow: hidden; 
	/* */ 
}

body 
{
	height:100%; 
	max-height:100%; 
	overflow:hidden; 
	padding:0; 
	margin:0; 
	border:0;	
}

#main 
{	
	overflow:hidden; 
	position:absolute; 
	z-index:0; 
	top:70px; 
	bottom:50px;
	[b]left:220px; 	[/b]
	right:0; 	
	background:transparent;
	/*font-family: Verdana, Arial, Helvetica, sans-serif; 	*/
}

* html #main 
{
	top:0; 
	left:0; 
	right:0;
	bottom:50px; 
	height:100%; 
	max-height:100%; 
	width:100%; 
	overflow:hidden; 
	position:absolute; 
	z-index:0; 
	border-top:70px solid transparent; 
	border-bottom:50px solid transparent; 
	border-left:200px solid transparent;
	padding-left:20px;
	padding-top:20px;	
}

#header 
{
	position:absolute; 
	margin:0; 
	top:0; 
	left:200px;	
	display:block; 
	width:100%; 
	height:50px; 
	color:White; 	
	background-position:0 0; 	
	z-index:5; 
	overflow:hidden; 
	background-color:Green;
	font-size:14px;
}
#navigation 
 {  
	font-family: Verdana, Arial, Helvetica, sans-serif; 	
	position: absolute; 
	z-index: 1; 
	top: 0; 
	bottom: 0; 
	left: 0; 
	width: 200px; 
	height: 100%; 
	overflow: auto;
	background-color:Green;
	color:White; 		
	font-size:14px;		
}

Narcís · Post by **Narcís** » Wed Jun 25, 2008 2:57 pm

Hi stefans,

OffsetParent is not returning the correct offset of the navigation pane. We are investigating the issue and will get back to you when we have further news.

Narcís · Post by **Narcís** » Thu Jun 26, 2008 11:53 am

Hi stefans,

We have been investigating the issue here and we recommend you to use ContentPlaceHolder in the MasterPage out of a div and then, at the WebForm set absolute positioning for the chart, for example:

Code: Select all

<asp:Content ID="myContent" ContentPlaceHolderID="content" Runat="Server">
        <tchart:WebChart ID="_webChart" runat="server" AutoPostback="False"
            Config="AAEAAAD/////AQAAAAAAAAAMAgAAAFJUZWVDaGFydCwgVmVyc2lvbj0zLjUuMzA2NS4xOTE2MSwgQ3VsdHVyZT1uZXV0cmFsLCBQdWJsaWNLZXlUb2tlbj05YzgxMjYyNzZjNzdiZGI3BQEAAAAVU3RlZW1hLlRlZUNoYXJ0LkNoYXJ0AgAAABkuQXNwZWN0LkNvbG9yUGFsZXR0ZUluZGV4Dy5Bc3BlY3QuWk9mZnNldAAACAYCAAAAAAAAAAAAAAAAAAAACw=="
            GetChartFile="GetChart.aspx" Height="500px" TempChart="Session"
            Width="600px" style="left: 200px; position: absolute; top: 50px"/>   
</asp:Content>

Using both recomendations works fine for us here either in FireFox and Internet Explorer.