Asp:panel and Firefox

Spider

Spider

Spider

Associate
Joined
28 Nov 2002
Posts
766
Location
Down the road
Ive written a site that has a number of pages with ASP:Panels as containers for controls and other things.
This displays fine in IE7, but in Firefox its all over the place. None of the content is within the panel, but just all rendered at the top of the page with no structure.

Any ideas why this is occuring and how I can fix it?

Thanks
 
IIRC a panel renders as a table in Firefox through ASP.NET 1.1 - is it related to that? Might be affecting your page with your CSS, view source to confirm, and if so you may need to look into browsercaps to alter how the browser renders elements.

It may look complicated but there are plenty of free ones to use that you jsut drop in the web.config file.

If its not related to this, try posting your code up here for us to look through :)
 
Okey Dokey. My Site.master basically looks as follows (i've stripped the text out and IMG tags to keep it clean)

Code: 
<body>
    <form id="form1" runat="server">
        <cc1:RoundedCornersExtender ID="rceHeader" runat="server" Radius="10" TargetControlID="pnlHeader">
        </cc1:RoundedCornersExtender>

        <asp:Panel ID="pnlHeader" runat="server" CssClass="header" BackColor="White">    
        
	        <div class="logo">LOGO & TEXT HERE</div>
        </asp:Panel>
        <br />
        <cc1:RoundedCornersExtender ID="rceContent" runat="server"
            TargetControlID="pnlContent" Radius="10">
        </cc1:RoundedCornersExtender>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:Panel ID="pnlContent" runat="server" CssClass="main" BackColor="White">
            <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
                </asp:contentplaceholder>
            
        </asp:Panel>

    <br />            
    <cc1:RoundedCornersExtender ID="rce2" runat="server" TargetControlID="pnlFooter" Radius="10">
    </cc1:RoundedCornersExtender>
    <asp:Panel ID="pnlFooter" runat="server" Width="750px" BackColor="White">FOOTER TEXT
        <br />
    </asp:Panel>
    </form>
</body>


Reading around the subject I notice there are problems with how ASP renders pages in FF. One solution was to add:

Code: 
    <browserCaps>
      <!-- GECKO Based Browsers (Netscape 6+, Mozilla/Firebird, ...) //-->
      <case match="^Mozilla/5\.0 \([^)]*\) (Gecko/[-\d]+)? (?'type'[^/\d]*)([\d]*)/(?'version'(?'major'\d+)(?'minor'\.\d+)(?'letters'\w*)).*">
        browser=Gecko
        type=${type}
        frames=true
        tables=true
        cookies=true
        javascript=true
        javaapplets=true
        ecmascriptversion=1.5
        w3cdomversion=1.0
        css1=true
        css2=true
        xml=true
        tagwriter=System.Web.UI.HtmlTextWriter
        <case match="rv:(?'version'(?'major'\d+)(?'minor'\.\d+)(?'letters'\w*))">
          version=${version}
          majorversion=${major}
          minorversion=${minor}
          <case match="^b" with="${letters}">
            beta=true
          </case>
        </case>
      </case>

      <!-- AppleWebKit Based Browsers (Safari...) //-->
      <case match="AppleWebKit/(?'version'(?'major'\d)(?'minor'\d+)(?'letters'\w*))">
        browser=AppleWebKit
        version=${version}
        majorversion=${major}
        minorversion=0.${minor}
        frames=true
        tables=true
        cookies=true
        javascript=true
        javaapplets=true
        ecmascriptversion=1.5
        w3cdomversion=1.0
        css1=true
        css2=true
        xml=true
        tagwriter=System.Web.UI.HtmlTextWriter
        <case match="AppleWebKit/(?'version'(?'major'\d)(?'minor'\d+)(?'letters'\w*))( \(KHTML, like Gecko\) )?(?'type'[^/\d]*)/.*$">
          type=${type}
        </case>
      </case>
      <!-- Konqueror //-->
      <case match = "Konqueror/(?'version'(?'major'\d+)(?'minor'\.\d+)(?'letters'));\w*(?'platform'[^\)]*)">
        browser=Konqueror
        version=${version}
        majorversion=${major}
        minorversion=${minor}
        platform=${platform}
        type=Konqueror
        frames=true
        tables=true
        cookies=true
        javascript=true
        javaapplets=true
        ecmascriptversion=1.5
        w3cdomversion=1.0
        css1=true
        css2=true
        xml=true
        tagwriter=System.Web.UI.HtmlTextWriter
      </case>
    </browserCaps>

to the system.web section of the web.config file, but that hasn't made any difference when I just tested it, so im perplexed!
 
I think the browser caps are fixed in ASP.NET 2 anyway, didnt realise you were using version 2.

Can we see the code behind from your page? Another option is you are rendering controls at the wrong point (Or worse still response writing) and they arent being placed in the flow of the page correctly.
 
Thanks for the reply. Here's the actual code for the master file. If I preview that (without anything in the content pane), its all over the place in firefox but not in IE:

Code: 
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf425yt364e35"
    Namespace="System.Web.UI" TagPrefix="asp" %>

<!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" >

<head runat="server">
    <title>Test Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="LDJ" />
<link rel="stylesheet" href="style.css" type="text/css" />


</head>
<body>
    <form id="form1" runat="server">
        <cc1:RoundedCornersExtender ID="rceHeader" runat="server" Radius="10" TargetControlID="pnlHeader">
        </cc1:RoundedCornersExtender>

        <asp:Panel ID="pnlHeader" runat="server" CssClass="header" BackColor="White">    

	        <div class="logo">&nbsp;Welcome to....<br /><img class="img" src="Images/LogoReflection.gif" alt="Site Logo" id="ImgLogo"/></div>
	        <div class="menu">
        &nbsp;
                <a href="Default.aspx" title="Home">
                    <asp:Image ID="imgHome" Name="home" runat="server" AlternateText="Home" ImageUrl="~/Images/home.png" onmouseover="document.home.src='Images/home3.png'"
                        onmouseout="document.home.src='images/home.png'" width="72px" Height="90px" /></a>
        &nbsp; &nbsp;
        <a href="Photos.aspx"><asp:Image ID="imgFotos" runat="server" Name="Fotos" onmouseover="document.Fotos.src='Images/Fotos2.png'"
                AlternateText="Fotos"  ImageAlign="AbsMiddle" ImageUrl="~/Images/Fotos.png" onmouseout="document.Fotos.src='images/Fotos.png'"
                ToolTip="Fotos & Skills" width="72px" Height="90px" /></a>
        &nbsp; &nbsp;
        <a href="About.aspx" title="About"><asp:Image ID="imgAbout" Name="cv" onmouseover="document.cv.src='Images/cv2.png'"
                    runat="server" AlternateText="About"  ImageUrl="~/Images/cv.png" onmouseout="document.cv.src='images/cv.png'"
                    ToolTip="About / CV" width="72px" Height="90px" /></a>&nbsp;
        &nbsp;
        <a href="ContactMe.aspx" title="Contact">
        <asp:Image ID="imgEnveloope" runat="server" AlternateText="Contact Me"  Name="contact" onmouseover="document.contact.src='Images/email3.png'"
            ImageAlign="AbsMiddle" ImageUrl="~/Images/email.png" width="72px" Height="90px"
             onmouseout="document.contact.src='images/email.png'" /></a>&nbsp;<br />
    
            </div>
        </asp:Panel>
        <br />
        <cc1:RoundedCornersExtender ID="rceContent" runat="server"
            TargetControlID="pnlContent" Radius="10">
        </cc1:RoundedCornersExtender>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:Panel ID="pnlContent" runat="server" CssClass="main" BackColor="White">
            <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
                </asp:contentplaceholder>
            
        </asp:Panel>

    <br />            
    <cc1:RoundedCornersExtender ID="rce2" runat="server" TargetControlID="pnlFooter" Radius="10">
    </cc1:RoundedCornersExtender>
    <asp:Panel ID="pnlFooter" runat="server" Width="750px" BackColor="White">
    
    
      Thanks for visiting...Please come backsoon!
    </asp:Panel>
    </form>

    
</body>
</html>
 
Cant see anything hugely out of place, what about the code behind form the .cs file?

Also how is it rendering in the browser when you view the source? Are all of your elements in the correct places in the flow of the document?
 
The code behind for the master is blank/default

Code: 
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class MasterPage : System.Web.UI.MasterPage
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
}

Then I have a test page which for example has only the following:

Code: 
<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    TEST PAGE<br />
    <br />
    TEST PAGE<br />
    <br />
    TEST PAGE
</asp:Content>

Ill post some screengrabs of how its rendering in both for me.
 
Heres how the page renders in IE (I've made it small to keep the images small)This is how it should look.



Opera (shown below) and Firefox (looks just as bad if not worse) show it as shown below:



Could it be a CSS issue then rather than a problem with the ASP content?
 
<cc1:RoundedCornersExtender ID="rceHeader" runat="server" Radius="10" TargetControlID="pnlHeader">
</cc1:RoundedCornersExtender>

and

<asp:Panel

I'm assuming that is to be interpreted and turned back into valid xhtml before being passed to firefox...
 
Shoseki said:
What on earth is this all about...

I don't recognise those tags :S
Click to expand...
Its .NET

Is the HTML rendering correctly in the browser? In other works is the flow of the page correct? Is the HTML produced valid? Is the problem being caused by your CSS?
 
You must log in or register to reply here.
Back
Top Bottom