We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you two Citrix podcasts. Learn about 2020 trends and get answers to your biggest Citrix questions!Listen Now

x

CSS not working in Master Page

techpr0
techpr0 asked
on
Medium Priority
1,068 Views
Last Modified: 2012-05-06
Got this neat little tab simulator from http://www.codeproject.com/KB/custom-controls/TabControl.aspx and all is good except my stylesheet isn't working. The black border is there before I run but when i run it's not there. How can I get this black box to appear so that this "tab" folder effect is acheived? It would be nice if I could get this CSS to work.
Form Code:
<%@ Page Language="VB" MasterPageFile="~/Users/MasterPage.master" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default"  title="PHL: Bullitin"%>
<%@ MasterType VirtualPath="~/Users/MasterPage.master"  %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
        <asp:Menu
            ID="Menu1"
            Width="168px"
            runat="server"
            Orientation="Horizontal"
            StaticEnableDefaultPopOutImage="False"
            OnMenuItemClick="Menu1_MenuItemClick">
            <Items>
                <asp:MenuItem ImageUrl="~/images/selectedtab.jpg" Text=" " Value="0"
                ToolTip="Filtered Results"></asp:MenuItem>
            <asp:MenuItem ImageUrl="~/images/unselectedtab.jpg" Text=" " Value="1"
                ToolTip="Enter Search Criteria"></asp:MenuItem>
         </Items>
        </asp:Menu>        
        <asp:MultiView 
            ID="MultiView1"
            runat="server"
            ActiveViewIndex="0">
           <asp:View ID="Tab1" runat="server"  >
                <table width="600" height="400" cellpadding=0 cellspacing=0>
                    <tr valign="top">
                        <td class="TabArea" style="width: 600px">
                            <br />
                            <br />
                            TAB VIEW 1
                            INSERT YOUR CONENT IN HERE
                            CHANGE SELECTED IMAGE URL AS NECESSARY
                        </td>
                    </tr>
                </table>
             </asp:View>
            <asp:View ID="Tab2" runat="server">
                <table width="600px" height="400px" cellpadding=0 cellspacing=0>
                    <tr valign="top">
                        <td class="TabArea" style="width: 600px">
                        <br />
                        <br />
                            TAB VIEW 2
                            INSERT YOUR CONENT IN HERE
                            CHANGE SELECTED IMAGE URL AS NECESSARY
                        </td>
                    </tr>
                </table>
            </asp:View>
            <asp:View ID="Tab3" runat="server">
                <table width="600px" height="400px" cellpadding=0 cellspacing=0>
                    <tr valign="top">
                        <td class="TabArea" style="width: 600px">
                        <br />
                        <br />
                          TAB VIEW 3
                          INSERT YOUR CONENT IN HERE
                          CHANGE SELECTED IMAGE URL AS NECESSARY
                        </td>
                    </tr>
                </table>
            </asp:View>
        </asp:MultiView>        
</asp:Content>
 
 
 
StyleSheet code:
.TabArea
        {
                    background-color: White;
                    font-size: x-small;
                    border-left: 1px solid black;
                    border-bottom: 1px solid black;
                    border-right: 1px solid black;
                    border-top:1px solid black;
                    position:absolute;
                    top:42px;
                    height:400px;
                    z-index:-25;
        }

Open in new window

Comment
Watch Question

It may be because, the stylesheet file location may be different than your Aspx using master page, OR if you are referring the stylesheet from your master page, then too it is not getting referenced, as it may be location in a different folder.  Just prefix the href with the folder name, where you have the href="StyleSheet.css" file.
Try putting the Style Sheet link into the Master Page itself rather than putting it in a ContentPlaceHolder inside the Master Page.

Putting it in a ContentPlaceHolder will put in an extra layer for the CSS rules to handle.

Author

Commented:
No luck, it even doesn't work if I put the style directly into the page. Like in the code snippet:
<%@ Page Language="VB" MasterPageFile="~/Users/MasterPage.master" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default"  title="PHL: Bullitin"%>
<%@ MasterType VirtualPath="~/Users/MasterPage.master"  %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<%--<link href="StyleSheet.css" rel="stylesheet" type="text/css" />--%>
 
<style type="text/css">
        .TabArea
        {
            background-color: White;
            font-size: x-small;
            border-left: 1px solid black;
            border-bottom: 1px solid black;
            border-right: 1px solid black;
            border-top:1px solid black;
            position:absolute;
            top:42px;
            height:400px;
            z-index:-25;
        }
</style> 
 
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
        <asp:Menu
            ID="Menu1"
            Width="168px"
            runat="server"
            Orientation="Horizontal"
            StaticEnableDefaultPopOutImage="False"
            OnMenuItemClick="Menu1_MenuItemClick">
            <Items>
                <asp:MenuItem ImageUrl="~/images/selectedtaborigFR.jpg" Text=" " Value="0"
                ToolTip="Filtered Results"></asp:MenuItem>
            <asp:MenuItem ImageUrl="~/images/unselectedtabFCNU.jpg" Text=" " Value="1"
                ToolTip="Enter Search Criteria"></asp:MenuItem>
         </Items>
        </asp:Menu>
        
        <asp:MultiView 
            ID="MultiView1"
            runat="server"
            ActiveViewIndex="0">
           <asp:View ID="Tab1" runat="server"  >
                <table width="600" height="400" cellpadding=0 cellspacing=0>
                    <tr valign="top">
                        <td class="TabArea" style="width: 600px">
                            <br />
                            <br />
                            TAB VIEW 1
                            INSERT YOUR CONENT IN HERE
                            CHANGE SELECTED IMAGE URL AS NECESSARY
                        </td>
                    </tr>
                </table>
             </asp:View>
            <asp:View ID="Tab2" runat="server">
                <table width="600px" height="400px" cellpadding=0 cellspacing=0>
                    <tr valign="top">
                        <td class="TabArea" style="width: 600px">
                        <br />
                        <br />
                            TAB VIEW 2
                            INSERT YOUR CONENT IN HERE
                            CHANGE SELECTED IMAGE URL AS NECESSARY
                        </td>
                    </tr>
                </table>
            </asp:View>
            <asp:View ID="Tab3" runat="server">
                <table width="600px" height="400px" cellpadding=0 cellspacing=0>
                    <tr valign="top">
                        <td class="TabArea" style="width: 600px">
                        <br />
                        <br />
                          TAB VIEW 3
                          INSERT YOUR CONENT IN HERE
                          CHANGE SELECTED IMAGE URL AS NECESSARY
                        </td>
                    </tr>
                </table>
            </asp:View>
        </asp:MultiView>       
</asp:Content>

Open in new window

Try the following
<%@ Page Language="VB" MasterPageFile="~/Users/MasterPage.master" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default"  title="PHL: Bullitin"%>
<%@ MasterType VirtualPath="~/Users/MasterPage.master"  %>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<%--some stuff--%> 
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
        <asp:Menu
            ID="Menu1"
            Width="168px"
            runat="server"
            Orientation="Horizontal"
            StaticEnableDefaultPopOutImage="False"
            OnMenuItemClick="Menu1_MenuItemClick">
            <Items>
                <asp:MenuItem ImageUrl="~/images/selectedtaborigFR.jpg" Text=" " Value="0"
                ToolTip="Filtered Results"></asp:MenuItem>
            <asp:MenuItem ImageUrl="~/images/unselectedtabFCNU.jpg" Text=" " Value="1"
                ToolTip="Enter Search Criteria"></asp:MenuItem>
         </Items>
        </asp:Menu>
        
        <asp:MultiView 
            ID="MultiView1"
            runat="server"
            ActiveViewIndex="0">
           <asp:View ID="Tab1" runat="server"  >
                <table width="600" height="400" cellpadding=0 cellspacing=0>
                    <tr valign="top">
                        <td class="TabArea" style="width: 600px">
                            <br />
                            <br />
                            TAB VIEW 1
                            INSERT YOUR CONENT IN HERE
                            CHANGE SELECTED IMAGE URL AS NECESSARY
                        </td>
                    </tr>
                </table>
             </asp:View>
            <asp:View ID="Tab2" runat="server">
                <table width="600px" height="400px" cellpadding=0 cellspacing=0>
                    <tr valign="top">
                        <td class="TabArea" style="width: 600px">
                        <br />
                        <br />
                            TAB VIEW 2
                            INSERT YOUR CONENT IN HERE
                            CHANGE SELECTED IMAGE URL AS NECESSARY
                        </td>
                    </tr>
                </table>
            </asp:View>
            <asp:View ID="Tab3" runat="server">
                <table width="600px" height="400px" cellpadding=0 cellspacing=0>
                    <tr valign="top">
                        <td class="TabArea" style="width: 600px">
                        <br />
                        <br />
                          TAB VIEW 3
                          INSERT YOUR CONENT IN HERE
                          CHANGE SELECTED IMAGE URL AS NECESSARY
                        </td>
                    </tr>
                </table>
            </asp:View>
        </asp:MultiView>       
</asp:Content>

Open in new window

Author

Commented:
Didn't work, received an error: Error 12      Only Content controls are allowed directly in a content page that contains Content controls.


Author

Commented:
I've even tried putting the style directly in the <td> with no luck. Looks fine in the design view but not there when ran. When ran, the tabs look and work correctly but no style attributes applied. Help!
like this:
<%@ Page Language="VB" MasterPageFile="~/Users/MasterPage.master" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default"  title="PHL: Bullitin"%>
<%@ MasterType VirtualPath="~/Users/MasterPage.master"  %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
        <asp:Menu
            ID="Menu1"
            Width="168px"
            runat="server"
            Orientation="Horizontal"
            StaticEnableDefaultPopOutImage="False"
            OnMenuItemClick="Menu1_MenuItemClick">
            <Items>
                <asp:MenuItem ImageUrl="~/images/selectedtaborigFR.jpg" Text=" " Value="0"
                ToolTip="Filtered Results"></asp:MenuItem>
            <asp:MenuItem ImageUrl="~/images/unselectedtabFCNU.jpg" Text=" " Value="1"
                ToolTip="Enter Search Criteria"></asp:MenuItem>
         </Items>
        </asp:Menu>
        
        <asp:MultiView 
            ID="MultiView1"
            runat="server"
            ActiveViewIndex="0">
           <asp:View ID="Tab1" runat="server"  >
                <table width="600" height="400" cellpadding=0 cellspacing=0>
                    <tr valign="top">
                        <td style="width: 600px;background-color: White;
            font-size: x-small;
            border-left: 1px solid black;
            border-bottom: 1px solid black;
            border-right: 1px solid black;
            border-top:1px solid black;
            position:absolute;
            top:42px;
            height:400px;
            z-index:-25;">
                            <br />
                            <br />
                            TAB VIEW 1
                            INSERT YOUR CONENT IN HERE
                            CHANGE SELECTED IMAGE URL AS NECESSARY
                        </td>
                    </tr>
                </table>
             </asp:View>
            <asp:View ID="Tab2" runat="server">
                <table width="600px" height="400px" cellpadding=0 cellspacing=0>
                    <tr valign="top">
                        <td style="width: 600px; background-color: White;
            font-size: x-small;
            border-left: 1px solid black;
            border-bottom: 1px solid black;
            border-right: 1px solid black;
            border-top:1px solid black;
            position:absolute;
            top:42px;
            height:400px;
            z-index:-25;">
                        <br />
                        <br />
                            TAB VIEW 2
                            INSERT YOUR CONENT IN HERE
                            CHANGE SELECTED IMAGE URL AS NECESSARY
                        </td>
                    </tr>
                </table>
            </asp:View>
        </asp:MultiView>         
</asp:Content>

Open in new window

Author

Commented:
Come on guys, this is a simple one.
Please post the location of below with respect to the Root.
- Master Page
- Content Page
- Stylesheet Page

Author

Commented:
Master Page: www/users/masterpage.master
Content Page: www/users/default.aspx
StyleSheet Page: www/users/StyleSheet.css

But like I said, I even placed the style sheet attributes in the <td> style like so: <td style="width: 600px;background-color: White;
            font-size: x-small;
            border-left: 1px solid black;
            border-bottom: 1px solid black;
            border-right: 1px solid black;
            border-top:1px solid black;
            position:absolute;
            top:42px;
            height:400px;
            z-index:-25;">


And to my amazement it still didn't work.
Have you tried placing your CSS in the master page.  The content page won't accept the stylesheet link or the reference to the CSS file.  Try putting it in the master page as
        <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
and let me know
Commented:
Sorry guys, it ended up being the z-index and the position attibutes. They don't work well with master pages. I had to put the menu in a table to assign it a z-index then there it was. The z-index was causing it to show up behind everything else on the page. With a few more adjustments I had a usable soloution. I had to do away with the black box around the whole content page and just go with one across the top because the black border on the sides and bottom wouldn't grow/shrink with the page.

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.