Page layout different once app published

[Cliff Gibson]

Hi

I've got a couple of HTML Charts on my page using the code below which is then databoud on page load.  If I view the application in debug mode from within Visual Studio (Windows 7, IE8) the page looks great.  However if I publish to the application server (IIS, Windows Server 2008r2) the page layout changes dramatically.  Please see the two images to demonstrate, can you advise what is causing this problem???

Cheers
Cliff

<div id="divPriceChangesChart" style="position:absolute; top:180px; left:0px; ">
    <telerik:RadHtmlChart ID="chartPriceChanges" runat="server" Width="250px" Height="300px" Skin="Metro">
        <ChartTitle Text="Price Changes" >
            <Appearance Align="Left" />
        </ChartTitle>
        <Legend>
            <Appearance Position="Bottom" />
        </Legend>
        <PlotArea>
            <Series>
                <telerik:PieSeries DataFieldY="NumberProducts" NameField="Period"></telerik:PieSeries>
            </Series>
        </PlotArea>
    </telerik:RadHtmlChart>
</div>


<div id="divAccessChart" style="position:absolute; top:180px; left:270px; ">
    <telerik:RadHtmlChart ID="chartAccess" runat="server" Width="250px" Height="300px" Skin="Metro">
        <ChartTitle Text="EPD User Access" >
            <Appearance Align="Left" />
        </ChartTitle>
        <Legend>
            <Appearance Position="Bottom" />
        </Legend>
        <PlotArea>
            <Series>
                <telerik:PieSeries DataFieldY="NumberUsers" NameField="Period"></telerik:PieSeries>
            </Series>
        </PlotArea>
    </telerik:RadHtmlChart>
</div>

[Cliff Gibson]

Just to add to this, I've now put height and width attributes on the containing DIVs and now the chart displays but the legend  and all of the labels do not.

Attached image shows Firefox 14 on the left and IE8 on the right.

The demos on the Telerik site all render without any problems, this would lead me to believe this is not a browser specific issue but possibly how it is being hosted from the server???

[Marin Bratanov]

Hi Cliff,

Can you confirm that all necessary resources are returned properly when you deploy your site? For example, missing CSS files can break the page layout; a proxy, firewall or other configuration on the server can break webresources so it is possible that not all scripts are loaded.

Generally, this seems like an issue with the server configuration. What is also possible is that there are some text-align or float properties inherited by the charts from parent elements in your layout. You can try resetting them in the charts or in their wrappers to see if this is causing the problem in IE8, as there are similar issues under IE7 where CSS properties are applied to the VML image of the chart.


Kind regards,
Marin Bratanov
the Telerik team

[Cliff Gibson]

Hi Martin

It would appear it is inheriting some properties from other styles it is within.

Is there a way of overriding these, or ignoring other styles in the DIV's parent wrapper?

Alternatively could you advise if a user control inherits styles from it's container, if not I could put the charts in a user control?

Cheers
Cliff

[Marin Bratanov]

Hello Cliff,

I am not certain what are the styles that are inherited, but you can find them by a method of exclusion. Once the problematic rules are found you can add them with their default values (e.g. text-align: left;) to a div that will wrap the chart.

On user controls - they are rendered as HTML in the place they appear in the markup. The resulting HTML is not different whether a user control is used, or the markup is placed inline. So, yes, user controls will inherit CSS rules from the page they are placed on.


Regards,
Marin Bratanov
the Telerik team