Click here to Skip to main content
15,899,825 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hello all, i am facing a very peculiar problem, maybe i am wrong i dont know. Here is my problem,i have a masterpage and a nested masterpage that inherits from the masterpage. All the Content pages inherits the nested masterpage. I have a stylesheet file(clientstyle.css) that is placed in the masterpage and is used for all the underlying pages. The problem i am facing is that elements(tags) h1,h2,h3,h4 defined for a particular class is not recognized...instead the style of a different class is applied to it. Actually, i had couple of css files, but later for convinience i merged all of them into one and placed it into the masterpage file. Everything works but just the heading tags...here is the perpetrator
C#
.PanelSmallStyle1
{
	height: 160px;
	width: 200px;
	margin: 0;
	padding: 0;
	background-color: White;
}

 .PanelSmallStyle1 h1,h2,h3,h4
{
	margin: 0;
	padding: 5px;
	background-color: Blue;
	color: White;
	height: 30px;
	text-align: center;
}
.PanelSmallStyle1 img
{
	margin: 0;
	padding: 0;
	height: 130px;
	width: 100%;
}

this class is applied to the markup when i clearly stated that i want to apply the following...
C#
.NestedWrapper
{
	margin :0px;
    padding :0px;
}
.NestedWrapper h1,h2,h3,h4 
{
	text-decoration: underline;
    color: #4b18a7;
    text-align: center;
}
.NestedWrapper p,ul,hr
{
	color: #464444;
    font-family: arvo,serif;
    text-align: justify;
}

And the markup where i want to apply the class is...
ASP.NET
<div class="NestedWrapper">
        <h2>Plan Your Travel</h2>
        <asp:Image ID="dfdfdf" ImageUrl="~/Images/Plan-Your-Travel/dfsdf.gif"
            runat="server" /><br />
        <!--Tab Container for Planning your travel-->
        <cc1:TabContainer ID="TabContainer1"  runat="server".........

No matter what i do the h2 tag always takes the .PanelSmallstyle1 classes h1,h2...definition...i inspected the elements in google and in firefox...i know there are work arounds for this but i want to know the reason why this is not working...am i lacking knowledge in css??....and FYI i have double checked everything...there are no conflicting classes within the file...moreover in the inspect element feature of the browser, the panelsmallstyle1 class is shown as the matching css rule??...and the class nestedwrapper is at the bottom. the definition should not be able to overwrite the nestedwrapper class right??
Posted
Comments
Zaf Khan 2-Dec-12 10:15am    
Which browser are you using?
Minghang 2-Dec-12 11:36am    
google,chorme,ie

1 solution

use !important after the properties in the class which you want to use for that. e.g -

CSS
.NestedWrapper h1,h2,h3,h4
{
    text-decoration: underline !important;
    color: #4b18a7 !important;
    text-align: center !important;
}


u will get desired result......
 
Share this answer
 
Comments
Minghang 4-Dec-12 0:52am    
thankyou kiran for the info...i didn't know we could do that...thankx for the reply...however i did it in a different way...but i learnt something new...thankx for that
minghang
kiRan Rayat 5-Dec-12 3:22am    
my pleasure..... :)

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900