Page Container <div> and another ,div. not behaving as expected

SouthendSupporter · December 11th, 2009, 08:57 AM

Hi,
I have an issue which is confusing the h**l out of me.
Attaching a couple of images would make my explanation simpler but it seems I cannot post attachments so I'll try without:

I am working in VWD 2008, when I view the master page or any other page in design view, I see what I expect, and want, to see - The page with a 1px red border (red because I want to see it better for testing!) going round all the other <divs> including the footer containing the "website design by....." text which appears below the blue botom banner.

If I view the site in Mozilla or IE8, The page container div seems to only surround the top banner and menu. The border for the page container div is only around the banner at the top, I see no white background and no border round the rest of the page and the footer appears within the bottom blue banner rather than below it.

If I set a height value in the page container style, then the page container border and white background fit to that height on all pages in VWD and the footer remains below the bottom banner. When viewed in the browser, the page container expands to the height specified - showing the white background and the red border, the footer still appears within the blue bottom banner.

I'm obviously missing something obvious, but missing it I am so any help appreciated..

I have a master page that looks like this:

Code:

<body>
  <form id="form1" runat="server">
    <div id="pagecontainer">
       <div id="banner">
           <div id = "bannerimages">
             <div id="leftbanner">
             </div>
             <!--<div id = "Centrebanner">
             </div>-->
             <div id="Rightbanner">
             </div>               
           </div>
           
       </div>
       <div id="menu">
              <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" Height="30px"  
                Width="835px"  DataSourceID="SiteMapDataSource1" align="center" CssClass="menu"
                StaticEnableDefaultPopOutImage="False" >
              <StaticSelectedStyle CssClass="StaticSelectedStyle" />
              <StaticMenuItemStyle CssClass="StaticMenuItemStyle" />
              <StaticHoverStyle cssclass="StaticHoverStyle"/>
              <DynamicHoverStyle cssClass="DynamicHoverStyle" />
              <DynamicMenuItemStyle cssClass="DynamicMenuItemStyle" />
              </asp:Menu>
            
              <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" />
          </div>   
        
       <div id="leftsidebar" >
        <asp:ContentPlaceHolder id="LeftColumn" runat="server"> 
        </asp:ContentPlaceHolder>       
       </div>
       <div id="rightsidebar" >
         <asp:ContentPlaceHolder id="RightColumn" runat="server"> 
         </asp:ContentPlaceHolder>
       </div>
       <div id="maincontent" >
        <asp:ContentPlaceHolder id="MainColumn" runat="server"> 
        </asp:ContentPlaceHolder>
       </div>
       <div id="Bottombanner">
          <asp:LoginName ID="LoginName1" runat="server" FormatString="Logged in as {0}" />
          <asp:LoginView ID="LoginView1" runat="server">
            <RoleGroups>
              <asp:RoleGroup Roles="Site Administrator">
                <ContentTemplate>
                  <asp:HyperLink ID="HyperLink1" runat="server" 
                    NavigateUrl="~/Management/Default.aspx">Manage Site</asp:HyperLink> or <asp:LoginStatus
                    ID="LoginStatus2" runat="server" />
                </ContentTemplate>
              </asp:RoleGroup>
              <asp:RoleGroup Roles="member">
                <ContentTemplate>
                  <asp:HyperLink ID="HyperLink1" runat="server" 
                  NavigateUrl="~/members-information.aspx">Members Page</asp:HyperLink> or <asp:LoginStatus
                  ID="LoginStatus2" runat="server" />
                </ContentTemplate>
              </asp:RoleGroup>
           </RoleGroups>
           <LoggedInTemplate>
            (<asp:LoginStatus ID="LoginStatus1" runat="server" />)
           </LoggedInTemplate>
        </asp:LoginView>
        <div id="footer">
          <asp:ContentPlaceHolder id="FooterText" runat="server"> 
            <p>
                Website design and maintenance by <a target="_blank" href="http://www.beaufortnetworks.com">
                Beaufort Networks Ltd</a></p>
          </asp:ContentPlaceHolder>
        </div>
    </div>
    
     </div>
  
    
    </form>   
 </body>

I have a CSS file that contains (amongst others) these entries:

Code:

       #banner
{
  height: 130px;
  position: relative;
  background-color: #B5C7DE;
  /*background-color: #B5C7DE;*/
  width: 980;
}
         #bannerimages
{
  height: 120px;
  width: 960;
  padding: 5px;
  
}
         #leftbanner
{
  background-position: center center;
  width: 320px;
  float: left;
  height: 120px;
  background-image: url(Images/Banner_Logo.jpg);
  background-repeat: no-repeat;
} 
/*         #Centrebanner
{
  width: 300px;
  height: 120px;
  background-image: url(Images/Banner_centre.jpg);
  float: left;
  background-position: center;
  background-repeat: no-repeat;
} */ 
         #Rightbanner
{
  width: 640px;
  height: 120px;
  background-image: url(Images/Banner_right.jpg);
  float: right;
  background-position: right;
  background-repeat: no-repeat;
} 

        #menu
{
  width: 980px;
  height: 30px;
  top: 179px;
  left: 3px;
  background-color: #B5C7DE;
  
}
         #leftsidebar
{
  width: 210px; 
  padding-left: 5px;
  /*background-color: #D8E3F4;*/
  float: left;
  margin-top: 23px;
}
        
        
        #maincontent
{
  border-left-style: solid;
  border-left-width: 1px;
  border-left-color: #C0C0C0;
  float: left;
  padding-left: 20px;
  padding-right: 20px;
  margin-top: 25px;
  margin-bottom: 0px;
  width: 500px;
}
        #rightsidebar
{
  width: 200px;
  float: right;
  padding-left: 5px;
  
  /*background-color: #D8E3F4;*/
  margin-top: 25px;
}
        
        #pagecontainer
{
  /*border: 1px solid #B5C7DE;*/
  border: 1px solid red;
  text-align: center;
  margin: 0 auto;
  background-color: #FFFFFF;
  width: 980px;
}
        #form1
{
  text-align: center;
  margin-right: 0px;
  margin-left: 0px;
 
}
        body
{
  margin: 0;
  padding: 0;
  border: 0;
  text-align: center;
  /*color: #666666;*/
  background-color: #EEEEEE;
}        
         #Bottombanner
{
  background-color: #B5C7DE;
  height: 45px;
  width: 980px;
  border: 1px solid #B5C7DE;
  float: left;
}        


        #footer
{
  float: none;
  width: 980px;
  float: none;
  background-color: #EEEEEE;
  /*margin-top: 33px;*/
  
}
        #footer a
{
  font-family: Verdana;
  font-size: x-small;
  color: #C0C0C0;
}
        #footer a:visited
{
  font-family: Verdana;
  font-size: x-small;
  color: #C0C0C0;
}
        #footer p
{
  font-family: Verdana;
  font-size: x-small;
  color: #C0C0C0;
  text-align: center;
  width: 980px;
}

Edit:
OK , I have made some changes as below:
The footer is no longer a div, just a <p> in the master page and I have moved it below the Bottom Banner div.

The page actually now displays as I want and expect in IE8 compatibility mode --- can I force compatibility mode if the browser is IE8???

In Mozilla, the page container as defined by the red border seems to be a different height depending on what is on the page being displayed and does not show the white background. (Unless i force the height in the style in which case it stays the same height and with the white background.) The height SEEMS to be governed by the height of the contents of the 3 columns on the page but at the moment I cannot find any consistency in the display. It looks like the heght of the centre column as governed by the information displayed drawn from a database; but the home page displays a lot of text from a database record and the Container border stops half way down the centre column.down in line with the info in the first column ???

With Mozilla being a very popular browser I'd like to make this work if possible.

irProject · December 13th, 2009, 03:28 AM

see these addresses:

css-firefox-vs-ie

css-firefox-vs-ie2

SouthendSupporter · December 14th, 2009, 10:40 AM

Quote:

Originally Posted by irProject

see these addresses:

css-firefox-vs-ie

css-firefox-vs-ie2

Thanks for this.
I have taken a look at the threads and they are indeed very instructive. I have made some changes to my css accordingly. I have made some progress but have some more to do.
BUT....
I'm still missing something. This is the website I am building (a staging site)
website2.beaufortnetworks.com
see in particular the events and Directory pages where the page container only seems extends to the height of the main content column
My Css File is :
website2.beaufortnetworks.com/app_themes/fixed-3col/fixed-3col.css

Looks like you'll need to cut and paste these as the system puts http..... in front which is not required.

(hope I'm not breaking any protocols by posting these?)

When viewed in IE8 in compatibility mode it displays just as I want it to.(though I notice I get a greyed out vertical scroll bar which is not present when not in compatibility mode)
In Firefox it displays just like IE8 when not in compatibility mode
I see that the left column 'drops' when not in compatibility mode but I cannot yet figure out why?
If I force the height of the page container <div> to say 800 it looks OK without compatibility mode but of course this restricts the content.

Any help from anyone greatly apprteciated.

timeware · December 15th, 2009, 07:25 AM

Hi,

Add in the <HEAD> section

<meta http-equiv="X-UA-Compatible" content="IE-EmulateIE7"/>

Having looked at the site with Firefox, Safari, IE7 and IE8 I can see the red border in the same place on all browsers.
The scroll bar appears on screens with 1024 x 768 screen resolution but not on higher resolutions.

It looks to me as though you have it working fine.

By the way well done on presenting the question with all the relevant information. It really helps readers to provide a solution. Even if you beat us all to it.

SouthendSupporter · December 15th, 2009, 08:14 AM

Thanks for the compliments Timeware!!
But did you look at the Directory and Events pages???

The page container and border only extend about halfway down the page (approx where the main content <div> ends) when viewed in Safari, Firefox or IE8 without compatibility. Or at least it does on my computer :)

This is after replacing the
<meta http-equiv="X-UA-Compatible" content="IE-7" /> I had with
<meta http-equiv="X-UA-Compatible" content="IE-EmulateIE7"/> as you suggested.

My doctype statement is :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Is there anything different I can use here?

timeware · December 15th, 2009, 08:42 AM

Hi,

I see what you mean now.

Does the problem lie in the div ID = MainColumn ?

You have in the style sheet #maincontent but no #MainColumn

Try adding in a specific height for this layer either in the styel sheet or the master page details.

timeware · December 15th, 2009, 08:45 AM

Just re-read my previous reply.
Ignore it.
change #maincontent to the following and see if it helps.

#maincontent
{
border-left-style: solid;
border-left-width: 1px;
border-left-color: #C0C0C0;
float: left;
padding-left: 20px;
padding-right: 20px;
margin-top: 25px;
margin-bottom: 0px;
width: 500px;
height: 500px;
}

SouthendSupporter · December 15th, 2009, 09:31 AM

Appreciate your efforts Timeware :)

Unfortunately, your suggestion doesn't work. This is similar to what I had before I started the thread and in 'normal' IE mode I don't get any page container at all.

Putting a suitable Height value in the #maincontect style DOES sort of solve the problem but restricts the contents of the main content placeholder to that height. I've put extra text in the home page now. As you see, with my settings the page container expands to accommadate the extra text which is what I'd prefer (and shrinks when it isn't there as in the Directory and Events pages -- which isn't

)

What I need is for the page container to behave in this way based on the longest of my three columns -- leftsiderbar, maincontent and rightsidebar. As these are all within the page container div in the master page I am at a loss as to why it doesn't!

I've tried wrapping the leftsiderbar, maincontent and rightsidebar divs in another div but this didn't help.

SouthendSupporter · December 15th, 2009, 10:05 AM

Well, I must have had an error in the code for that wrapping div!

My master page now has:

Code:

<div id="pagebody" >
    <div id="leftsidebar" >
        <asp:ContentPlaceHolder id="LeftColumn" runat="server"> 
        </asp:ContentPlaceHolder>       
     </div> 
     <div id="rightsidebar" >
        <asp:ContentPlaceHolder id="RightColumn" runat="server"> 
         </asp:ContentPlaceHolder>
      </div>
      <div id="maincontent" >
         <asp:ContentPlaceHolder id="MainColumn" runat="server"> 
         </asp:ContentPlaceHolder>
      </div>
</div>

I have added

Code:

#pagebody
{
  display: block;
  min-height: 400px;
}

to my css file .....

And it works!!

Not sure if what I am doing is how it SHOULD be done, but on the basis of if it works it's right I'm happy.

Thanks for your time all -- and timeware in particular