Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1044
  • Last Modified:

CSS not working in Master Page

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

0
techpr0
Asked:
techpr0
  • 6
  • 3
  • 2
1 Solution
 
CB_ThirumalaiCommented:
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.
0
 
wolfman007Commented:
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.
0
 
techpr0Author 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

0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
wolfman007Commented:
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

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


0
 
techpr0Author 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

0
 
techpr0Author Commented:
Come on guys, this is a simple one.
0
 
CB_ThirumalaiCommented:
Please post the location of below with respect to the Root.
- Master Page
- Content Page
- Stylesheet Page
0
 
techpr0Author 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.
0
 
CB_ThirumalaiCommented:
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
0
 
techpr0Author 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.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 6
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now