CSS positioning (asp panels and DIVS)

Spider · 10 Mar 2007 at 12:01

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

joeyjojo · 10 Mar 2007 at 12:12

Post the code please

V4NT0M · 10 Mar 2007 at 13:25

Code would be helpful, have you tried "z-index: 1;" on the DIV?

Spider · 10 Mar 2007 at 15:28

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 · 10 Mar 2007 at 19:20

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.

Spider · 11 Mar 2007 at 11:39

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.

Looking at the page source its definitely producing DIVs

joeyjojo · 11 Mar 2007 at 13:29

For one thing you'll probably want to make them id's not classes. # instead of ., then div id="" instead of class="".

I'm not sure how you want it to be, but it's the float which is messing things up. Using float takes the element out of the normal flow of things - in this case it is sort of ignored by the things below it (further down in the code) so gets covered up. Use clear:both; on any elements which need shunting back into their proper place (the footer I assume).