CSS positioning (asp panels and DIVS)

Spider

Spider

Spider

Associate
Joined
28 Nov 2002
Posts
766
Location
Down the road
I have three asp panels (with position:relative in the CSS if that is of use) making up a header, content and footer in a web page. Inside the content Panel of the site I have a DIV with only a few attributes set (width, float:left, padding and text-align).

In IE the Div is rendered inside the panel as you would hope. In firefox and opera though it is behind displayed BEHIND the panel (i.e. not visible).

What attribute, positioning elements do I need to use to correct this?

Thanks
 
Its very basic stuff (because I cant get even the basics to position correctly! LOL!). Here is the CSS thus far

Code: 
css

body 
{
    background-color:#FFB200;
    font-family: Arial,Verdana,Sans-serif;
  color: #999; 
  font-size: 8pt;
  text-align:center;
  
}

.header
{
 top:10px;
 height:auto;
 margin-left:auto;
 margin-right:auto;
 width: 750px;
 position:relative;
 background-color: White;  
 padding: 5px;
    
}


.middle
{
 top:10px;
 margin-left:auto;
 margin-right:auto;
 width: 750px;
 height:auto;
 background-color: White; 
 position:relative;
 padding:5px;
}

.footer
{
    top:10px;
    margin-left:auto;
    margin-right:auto;
    width: 750px;
    padding:5px;
    position:relative;
    background-color: White;
}

#content
{ width:510px;
    z-index:1;
  float:left;
  padding:20px;
  text-align:justify;
  }

As you can see ive tried adding in the z-index=1 to see if it makes a difference, and while that does at least make the text visible on the page, its still not contained within the asp;panel as it should.
Then for the master page is have

Code: 
master

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<!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">
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <br />
        &nbsp;<asp:Panel ID="pnlHeader" runat="server" CssClass="header">
            <img src="Images/Logo.gif" style="width: 214px; height: 84px" id="imgLogo" /></asp:Panel>
        &nbsp;
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <br />
        <asp:Panel ID="pnlMain" runat="server" CssClass="middle">
        <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
        </asp:contentplaceholder>
        </asp:Panel>
        <br />
        <asp:Panel ID="pnlFooter" runat="server" CssClass="footer" >
        FOOTER TEXT
        </asp:Panel>
        &nbsp;</div>
    </form>
</body>
</html>

And a test page just to verify where all the elements are being placed and positioned;

Code: 
default.aspx


<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<h1>HEADER 1</h1>
This is some text in default.aspx
<h2> A subheader</h2>BLAH BLAH
<div id="content">this is a tightly positioned block of text which refuses to position where it should, except in Internet Explorer which behaves as you might expect...More random test text here.....</div>
<br />End of section <br />

</asp:Content>

Probably missed something really obvious here. Not done much with CSS so it could be something REAL easy that im not seeing.
 
Buttons said:
Is it something silly like asp.net generates spans from panels for firefox rather than divs as it doesn't properly support it?

I seem to remember having a problem like that at one point.
Click to expand...


Looking at the page source its definitely producing DIVs
 
You must log in or register to reply here.
Back
Top Bottom