Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > ASP.NET and ASP > ASP.NET 3.5 > ASP.NET 3.5 Basics
Password Reminder
Register
| FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
ASP.NET 3.5 Basics If you are new to ASP or ASP.NET programming with version 3.5, this is the forum to begin asking questions. Please also see the Visual Web Developer 2008 forum.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the ASP.NET 3.5 Basics section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
 
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old December 11th, 2009, 08:57 AM
Authorized User
 
Join Date: Jul 2009
Location: Haslemere, Surrey, England
Posts: 61
Thanks: 15
Thanked 1 Time in 1 Post
Default Page Container <div> and another ,div. not behaving as expected

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.
__________________
Geoff Baldwin

Last edited by SouthendSupporter; December 12th, 2009 at 05:00 PM.. Reason: Made some changes and achived SOME improvemnet but still some issues:
  #2 (permalink)  
Old December 13th, 2009, 03:28 AM
Friend of Wrox
Points: 742, Level: 10
Points: 742, Level: 10 Points: 742, Level: 10 Points: 742, Level: 10
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Nov 2009
Location: Tehran, Iran
Posts: 156
Thanks: 13
Thanked 16 Times in 16 Posts
Default

see these addresses:

css-firefox-vs-ie

css-firefox-vs-ie2
  #3 (permalink)  
Old December 14th, 2009, 10:40 AM
Authorized User
 
Join Date: Jul 2009
Location: Haslemere, Surrey, England
Posts: 61
Thanks: 15
Thanked 1 Time in 1 Post
Default

Quote:
Originally Posted by irProject View Post
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.
__________________
Geoff Baldwin

Last edited by SouthendSupporter; December 14th, 2009 at 10:45 AM.. Reason: Incorrect web address provided
  #4 (permalink)  
Old December 15th, 2009, 07:25 AM
Friend of Wrox
 
Join Date: May 2006
Location: Northampton, United Kingdom.
Posts: 107
Thanks: 1
Thanked 8 Times in 7 Posts
Default

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.
  #5 (permalink)  
Old December 15th, 2009, 08:14 AM
Authorized User
 
Join Date: Jul 2009
Location: Haslemere, Surrey, England
Posts: 61
Thanks: 15
Thanked 1 Time in 1 Post
Default

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?
__________________
Geoff Baldwin
  #6 (permalink)  
Old December 15th, 2009, 08:42 AM
Friend of Wrox
 
Join Date: May 2006
Location: Northampton, United Kingdom.
Posts: 107
Thanks: 1
Thanked 8 Times in 7 Posts
Default

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.








  #7 (permalink)  
Old December 15th, 2009, 08:45 AM
Friend of Wrox
 
Join Date: May 2006
Location: Northampton, United Kingdom.
Posts: 107
Thanks: 1
Thanked 8 Times in 7 Posts
Default

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;
}
  #8 (permalink)  
Old December 15th, 2009, 09:31 AM
Authorized User
 
Join Date: Jul 2009
Location: Haslemere, Surrey, England
Posts: 61
Thanks: 15
Thanked 1 Time in 1 Post
Default

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.
__________________
Geoff Baldwin
  #9 (permalink)  
Old December 15th, 2009, 10:05 AM
Authorized User
 
Join Date: Jul 2009
Location: Haslemere, Surrey, England
Posts: 61
Thanks: 15
Thanked 1 Time in 1 Post
Default

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
__________________
Geoff Baldwin
 


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
using <div>'s to have a left hand pane on web page crmpicco CSS Cascading Style Sheets 2 December 7th, 2007 11:54 PM
Javascript with <div> aware Javascript How-To 3 August 25th, 2005 05:57 AM
<style> tags in a <body> vs. <div> bcat BOOK: Beginning CSS: Cascading Style Sheets for Web Design ISBN: 978-0-7645-7642-3 1 March 27th, 2005 08:50 AM
scrolling <DIV> anshul Javascript How-To 12 August 4th, 2004 09:51 AM
<A><DIV><TABLE></DIV></A> anshul HTML Code Clinic 2 July 17th, 2004 02:17 PM



All times are GMT -4. The time now is 09:27 AM.


Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.