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.