p2p.wrox.com Forums

Need to download code?

View our list of code downloads.

Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
BOOK: Professional ASP.NET 2.0 Design: CSS, Themes, and Master Pages ISBN: 978-0-470-12448-2
This is the forum to discuss the Wrox book Professional ASP.NET 2.0 Design: CSS, Themes, and Master Pages by Jacob J. Sanford; ISBN: 9780470124482

Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: Professional ASP.NET 2.0 Design: CSS, Themes, and Master Pages ISBN: 978-0-470-12448-2 section of the Wrox p2p Programmer to Programmer discussion community. This is a community of more than 40,000 computer programmers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining our free Wrox p2p community you can post your own programming questions and respond to other programmers’ questions. Registered users also don't have to see the ads that are displayed to guests. Registration is fast, simple and absolutely free so please, join today!
Join today and post to win prizes! Post more to increase your chances of being Wrox’s top poster of the month.

Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old June 22nd, 2009, 12:25 AM
Registered User
Points: 8, Level: 1
Points: 8, Level: 1 Points: 8, Level: 1 Points: 8, Level: 1
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2009
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Thumbs down CSS does not render properly
I am trying to implement the faux column method using a master page with the CSS presented in the book (with some height changes which may be the problem). My header graphic is 700px by 180 px. The navigation area is 700px by 30px and does not use a graphic. The very top graphic containing the name is not present in my code. The master page looks correct in the designer but renders with the navigation area covering the bottom 40px of the header and extending about 10px past the header, footer and body_right areas. Here is my code:

Code for master page:
Code:
<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="TLC.master.vb" Inherits="TullahomaLionsClub.TLC" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Tullahoma Lions Club</title>
    <link href="TLCStyle1.css" rel="stylesheet" type="text/css" />
    <link runat="server" rel="stylesheet"
        href="~/CSS/Import.css"
        type="text/css" />
    <!--[if lt IE 7]>
        <link runat="server" rel="stylesheet"
          href="~/CSS/BrowserSpecific/IEMenu6.css" type="text/css">
          <![endif]-->
     <link href="myStyleSheet.css" rel="stylesheet" type="text/css" />
     <link href="TLCMenu.css" rel="stylesheet" type="text/css" />
     
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <div id= "pageWrapper">
        <div id="headerGraphic">
        </div>
        <div id="navigationArea">
            <asp:Menu CssSelectorClass="TLCMenu" ID="Menu1" runat="server" 
              DataSourceID="SiteMapDataSource1" 
              Orientation="Horizontal" 
              Width="690px" 
              StaticDisplayLevels="2" 
              BackColor="#B5C7DE" 
              DynamicHorizontalOffset="2" 
              Font-Names="Verdana" 
              Font-Size="1em" 
              ForeColor="#284E98" 
              Height="24px" 
              StaticSubMenuIndent="10px" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px">
                <DynamicMenuStyle Width="100px" BackColor="#B5C7DE" />
                <StaticSelectedStyle BackColor="SandyBrown" ForeColor="Gold" />
                <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
                <DynamicHoverStyle BackColor="#284E98" ForeColor="White" />
                <DynamicSelectedStyle BackColor="#507CD1" />
                <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
                <StaticHoverStyle BackColor="#284E98" ForeColor="Gold" />
            </asp:Menu>
            <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" />
            
        </div>
        <div id="bodyArea">
            <div id="bodyLeft">
                 <asp:LoginView ID="LoginView1" runat="server">
                    <RoleGroups>
                        <asp:RoleGroup Roles="Admin">
                            <ContentTemplate>
                                <asp:HyperLink ID="linkAdmin" runat="server" NavigateUrl="~/Admin/Default.aspx">Website Admin</asp:HyperLink>
                                <br />
                            </ContentTemplate>
                        </asp:RoleGroup>
                        <asp:RoleGroup Roles="Member">
                        </asp:RoleGroup>
                        <asp:RoleGroup Roles="KingLion">
                        </asp:RoleGroup>
                    </RoleGroups>
                    <AnonymousTemplate>
                        <asp:HyperLink ID="loginHyperlink" runat="server" NavigateUrl="~/login.aspx">Login</asp:HyperLink>
                    </AnonymousTemplate>
                </asp:LoginView>
            </div>   
                <div id="bodyRight">
                <asp:SiteMapPath ID="SiteMapPath1" runat="server" ParentLevelsDisplayed="2" >
                </asp:SiteMapPath>
                <br />
                <br />
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">                    
                </asp:ContentPlaceHolder>
            </div>
        </div>
        <div id="footerArea">&copy 2009: Tullahoma Lions Club, 407 Lions Club Lane, Tullahoma TN 37388  (931) 455-9351</div>
      </div>
      </div>
      
    </form>
</body>
</html>
Main CSS file:

Code:
body
{
    
    padding-bottom: 1%;
    background-color: #b4cbe0;  
    /*background-color: #4d6267; */
    margin: 0%;
    padding-left: 1%;
    padding-right: 1%;
    height: 98%;
    padding-top: 1%;
}
#headerGraphic
{
    background-image: url(Images/HeaderImage.jpg);
    width: 700px;
    float: none;
    height: 180px;
    clear: both;
    position: static;
    background-repeat: no-repeat;
    background-color:Navy
}
#navigationArea
{
    /*background-image: url(Images/Header_bottom.jpg); */
    position: static;
    text-align: right;
    width: 690px;
    background-repeat: no-repeat; 
    font-family: Arial;
    height: 26px;
    color: yellow;
    font-size: 1em;
    vertical-align: middle;
    font-weight: bold;
    padding-bottom: 0px;
    margin: 0%;
    padding-left: 0%;
    padding-right: 10px;
    float: none;
    clear: both;
    padding-top: 0.3em;
    background-color: #b4cbe0;
}
#bodyArea
{
    float: left;
    background-image: url(Images/sidebarGraphic.jpg);
    background-color: white;
    width: 700px;
    background-repeat: repeat-y;

}

#bodyLeft
{
    position: static;
    text-align: center;
    padding-bottom: 10px;
    padding-left: 10px;
    width: 130px;
    padding-right: 10px;
    font-family: Arial;
    float: left;
    color: white;
    clear: left;
    font-size: 0.7em;
    vertical-align: top;
    padding-top: 10px;
}
#bodyRight
{
    clear: right;
    padding-right: 10px;
    padding-left: 10px;
    font-size: 0.8em;
    float: right;
    padding-bottom: 10px;
    vertical-align: top;
    width: 530px;
    color: #477897;
    padding-top: 10px;
    font-family: Arial;
    position: static;
    text-align: justify;
    overflow:visible
}

#footerArea
{
    /*background-image: url(Images/Header_bottom.jpg); */
    position: static;
    text-align: center;
    width: 700px;
    background-repeat: no-repeat;
    font-family: Arial;
    float: none;
    height: 30px;
    color: black;
    clear: both;
    font-size: 0.7em;
    vertical-align: middle;
    font-weight: bold;
}
.header
{
    font-size: 1.3em;
    float: left;
    width: 100%;
    color:#b4cbe0;
    border-bottom:#b4cbe0 .13em solid;
    font-family: 'Arial Black';
    font-variant: small-caps;
}
#pageWrapper
{
    width: 700px;
    margin: auto;
    border: solid 1pt #000;
}
The menu CSS:
Code:
.TLCMenu .AspNet-Menu-Horizontal
{
    position: relative;
    z-index: 300;
}
.TLCMenu ul.AspNet-Menu /* Tier 1 */
{
    float: right;
}
.TLCMenu ul.AspNet-Menu ul /* Tier 2 */
{
    width: 9em;
    left: 0%;
    background: #eeeeee;
    z-index: 400;
}
.TLCMenu ul.AspNet-Menu ul li /* Tier 2 list litems */
{
    width: 8.9em;
    border:1px solid #cccccc;
    float: left;
    clear: left;
    height: 100%;
}
.TLCMenu ul.AspNet-Menu ul ul /* Tier 3 */
{
    top: -0.5em;
    left: -6em;
}
.TLCMenu li /* all list items */
{
    font-size: x-small;
}
.TLCMenu li:hoveer, /* list items being hovered over */
.TLCMenu li.AspNet-Menu-Hover
{
    background: #477897;
}
.TLCMenu a, /* all anchors and spans (nodes with no link) */
.TLCMenu span
{
    color: #477897;
    padding: 4px 12px 4px 8px;
    background: transparent url(arrowright.gif) right center no-repeat;
}
.TLCMenu li.AspNet-Menu-Leaf a, /* leaves */
.TLCMenu li.AspNet-Menu-Leaf span
{
    background-image: none    !important;
}
.TLCMenu li:hover a, /* hovered text */
.TLCMenu li:hover span,
.TLCMenu li.AspNet-Menu-Hover a,
.TLCMenu li.AspNet-Menu-Hover span,
.TLCMenu li:hover  li:hover a,
.TLCMenu li:hover  li:hover span,
.TLCMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
.TLCMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover span,
.TLCMenu li:hover  li:hover li:hover a,
.TLCMenu li:hover  li:hover li:hover span,
.TLCMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
.TLCMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover span
{
    color: White;
    background: transparent url(activeArrowRight.gif) right center no-repeat;
}
.TLCMenu li:hover li a, /* The tier above this one is hovered */
.TLCMenu li:hover li span,
.TLCMenu li.AspNet-Menu-Hover li a,
.TLCMenu li.AspNet-Menu-Hover li span,
.TLCMenu li:hover  li:hover li a,
.TLCMenu li:hover  li:hover li span,
.TLCMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li a,
.TLCMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li span
{
    color: #477897;
    background: transparent url(activeArrowRight.gif) right center no-repeat;
}
I've tried for hours to find what is causing this. I would greatly appreciate suggestions on where the error is and how to fix it. Thanks.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Reddit!
Reply With Quote
  #2 (permalink)  
Old June 22nd, 2009, 06:36 PM
Registered User
Points: 8, Level: 1
Points: 8, Level: 1 Points: 8, Level: 1 Points: 8, Level: 1
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2009
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Smile Solution.
I found the problem in the following code:

Code:
    <!--[if lt IE 7]>

        <link runat="server" rel="stylesheet"
          href="~/CSS/BrowserSpecific/IEMenu6.css" type="text/css">
          <![endif]-->
The link did not end with /> and putting in the / solved the rendering.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Reddit!
Reply With Quote
Reply

« Previous Thread | Next Thread »

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off
Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
CSS - editing the css style sheet doesn't take effect immediately sayo ASP.NET 3.5 Basics 6 March 13th, 2009 03:32 AM
CSS HELP:! CSS EXPANDIBLE BACKGROUND FOR TITLE phpuser2000 CSS Cascading Style Sheets 2 December 19th, 2007 12:36 AM
Rich's new CSS book: Beginning CSS 2nd Edition jminatel BOOK: Beginning CSS: Cascading Style Sheets for Web Design ISBN: 978-0-7645-7642-3 0 June 15th, 2007 12:55 PM
Render and credentials TonyStoker Reporting Services 0 May 17th, 2006 06:53 PM
Render to Printer kirbykn BOOK: Professional SQL Server Reporting Services ISBN: 0-7645-6878-7 0 April 21st, 2005 04:17 PM



All times are GMT -4. The time now is 03:18 AM.

Contact Us - Wrox - Privacy Statement - Top

Powered by vBulletin® Version 3.6.8
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.
© 2008 Wiley Publishing, Inc