Solved

Why CSS Styles are not applying to User Controls when referred it in .aspx page which using content controls.

Posted on 2012-03-19
10
400 Views
Last Modified: 2012-04-14
I created a footerPage.ascx user control for footer content of .aspx page.I am registering it in page which using content and Table controls.The User control using css style sheets.

When I registered the user control in page by <%@ Register TagPrefix="ctr" TagName="Footer" Src="../footerPage.ascx" %>the styles are not applying to User Control.
Markup:
<asp:TableFooterRow>
 <asp:TableCell>
 <ctr:Footer ID="FtrPage" runat="server"  />
   </asp:TableCell>
</asp:TableFooterRow>

Please any suggestions.

Thanks
0
Comment
Question by:KavyaVS
  • 5
  • 4
10 Comments
 
LVL 20

Assisted Solution

by:BuggyCoder
BuggyCoder earned 350 total points
ID: 37737656
0
 

Author Comment

by:KavyaVS
ID: 37737712
The css file is under App_Themes folder.
I am referring it in web.config file by using this line  <pages theme="Default_Theme">

Is there anything else I need to do.

Thanks
0
 
LVL 20

Assisted Solution

by:BuggyCoder
BuggyCoder earned 350 total points
ID: 37737726
0
 

Author Comment

by:KavyaVS
ID: 37738149
I am referring the css file in .ascx file.
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="footerPage.ascx.cs" Inherits="Products.footerPage" %>
    <link href="~/css/Products.css" rel="stylesheet" type="text/css" />


I am confused with the links you sent.
Please let me know what to do. I am  already refering it in .ascx file.

Thanks
0
 
LVL 20

Assisted Solution

by:BuggyCoder
BuggyCoder earned 350 total points
ID: 37738681
please don't refer it in ascx file, refer it in aspx file....
remove its reference from ascx file and add it to aspx file....
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 19

Assisted Solution

by:Albert Van Halen
Albert Van Halen earned 150 total points
ID: 37739627
What are your style rules.
If you're using id selectors you're (probably) screwed; because the server ids are different than the ids on the client.
You're better of with a class selector

Specify the CssClass property on your asp:table, for example : mytable.
Then in your css refer to that table via the class selector.
TABLE.mytable

Open in new window

Use this as the context in other rules
TABLE.mytable TR TD {
}
TABLE.mytable THEAD, TABLE.mytable TFOOT {
}

Open in new window

0
 

Author Comment

by:KavyaVS
ID: 37747022
This is my User Control.
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="footerPage.ascx.cs" Inherits="products.footerPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <link href="~/css/products.css" rel="stylesheet" type="text/css" />
 <div id="footer_bkgd_int">
        <br />
            <div id="footer_icons" class="grid_11">
                <img id="footer_icon1" src="../assets/footer.icon.gif" />
                    <img id="footer_icon2" src="../assets/footer.icon2.gif" />
            </div>
            <div id="footer_content" class="grid_11">
                Copyright 2012. All rights reserved.
                   
                    <br/><br/>
                    This web site,is the only authorized web site.
                    <br/><br/>            
                   
                </div>
     </div>  
This is the css class I am applying to user control.
.grid_11
{

 display:inline;

 float: left;

 position: relative;

 margin-left: 10.0px;

 margin-right: 10.0px;

}

I tried to use this css in .aspx page by two ways.
1.When I tried to add link to css in .aspx page it is giving the error.
<link href="~/css/product.css" rel="stylesheet" type="text/css" />
content is not supported outside script or content regions.

2.<asp:TableFooterRow >
 <asp:TableCell >
 <ctr:Footer ID="FtrPage" runat="server"  />
   </asp:TableCell>
</asp:TableFooterRow>

I tried to add the class grid_11 at user control mark up.But it is not working. How to make it work.


Thanks
0
 
LVL 20

Accepted Solution

by:
BuggyCoder earned 350 total points
ID: 37747086
Remove this line from your ascx
<link href="~/css/products.css" rel="stylesheet" type="text/css" />

Add the css file in your aspx, don't remove the class used in the div in ascx.
--Aspx page--
<head>
<link href="~/css/products.css" rel="stylesheet" type="text/css" />
</head>
At Runtime, when html reponse is bieng sent to the client, the class name that you div in user control refers to will be found in the css you have put in your aspx code and thus will be applied automatically.
0
 

Author Comment

by:KavyaVS
ID: 37748793
I added this line in .aspx page.
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
  <link href="~/css/products.css" rel="stylesheet" type="text/css" />
</asp:Content>

I Removed this line from ascx.I didn't remove the class used in the div in ascx.
<link href="~/css/products.css" rel="stylesheet" type="text/css" />

But there is no change. The css styles are not applying to user control.

Are there any other suggestions please.

Thanks
0
 

Author Closing Comment

by:KavyaVS
ID: 37847440
Thanks
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…

932 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now