[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Why isn't my style class working?

Posted on 2011-04-26
11
Medium Priority
?
284 Views
Last Modified: 2012-06-21
Hi, I'm using asp.net 3.5
<span id="resultLabel" class="ResultTitle" style="font-size: xx-large">Find a Doctor Search Results<br /><br /></span>
Unless i have the font-size here otherwise font is small.  The class i defined here is not being applied at all.  How to fix this?  thnks.
PhysicianResults.css
SearchPhysicians.ascx
SearchResults.html
0
Comment
Question by:lapucca
  • 3
  • 3
  • 3
  • +2
11 Comments
 
LVL 13

Expert Comment

by:jonahzona
ID: 35471903
It is probably because you are giving the Span both an ID AND and a class.

Try adjusting your CSS to look like the following:

.ResultTitle, #resultLabel {
	border-bottom: 3px double;
	font-size:xx-large; 
	color:Gray;
}

Open in new window


Alternatively you might simply need to tell your class that it is a span.

span.ResultTitle, span#resultLabel {
	border-bottom: 3px double;
	font-size:xx-large; 
	color:Gray;
}

Open in new window


I personally am not a big fan of spans. Anytime I use them I put the CSS inline. Maybe try using a div instead.
0
 
LVL 22

Expert Comment

by:remorina
ID: 35471913
Hi lapucca,
I have tested your code and it seems to work fine and the CSS is working.

Did you ensure that your CSS is in the correct path/folder and is being loaded? you currently have it inside CSS folder.
You can ensure if it is being loaded by viewing the page in Firefox, vieweing the source and checking the path of the "PhysicianResults.css" and seeing if it's correct.

Also you seem to be loading the CSS inside the <body> section where it should be within the <head> section
0
 
LVL 15

Expert Comment

by:Juan Ocasio
ID: 35471932
is this your complete css file?  Where is the id defined?  Also make sure the class is defined after the id
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:lapucca
ID: 35471970
Hi Rem, If you remove the inline font-size then it won't work.  Also, the doesn't give me the double underline either.
Iocassio, what id are you ref?
Thank you.
0
 
LVL 15

Expert Comment

by:Juan Ocasio
ID: 35471985
id="resultLabel"  Where is this defined?
0
 
LVL 22

Expert Comment

by:remorina
ID: 35472076
Hi lapucca,
Have you made sure the CSS file is being correctly loaded as I mentioned earlier? it seems that the whole file is not being loaded.

Please double check its path is correct, try browsing with Firefox, view page source "CTRL+U" then click the "PhysicianResults.css" link in the source code to check if it displays your CSS and that it's correct and not a broken link.

Cheers!
0
 
LVL 20

Expert Comment

by:informaniac
ID: 35472978
"id="resultLabel" where is this defined?"What are you trying to say?
0
 
LVL 15

Accepted Solution

by:
Juan Ocasio earned 1000 total points
ID: 35474402
Your span tag has and id="resultLabel".  This id must be defined somewhere.  the css file you attached only referenced the class ResultTitle but nothing more.
0
 

Author Comment

by:lapucca
ID: 35478171
For asp.net controls Id is just there.  I didn't know if I use it for span then it has to be defined somewhere?  I thought the css file has the class name defined which was used in span then it should be good enough.  
I then removed the span and just use an asp.net label control.  Still nothing is working with css. The CSS folder was under the usercontrol folder, I moved it to the root and it still doesn't work.  
Rem, I did check page source view and in both locations the css file was not loaded.  I wonder if this is because this css file is ref in a user control that is used in  this aspx file.  Attached is a screen shot of my current folder tree in vs.  Maybe one of you can help me on how to ref this css file so it would be loaded.  Thank you.
CSS.jpg
0
 
LVL 22

Assisted Solution

by:remorina
remorina earned 1000 total points
ID: 35480070
lapucca,
Referencing CSS in user controls can sometimes be confusing depending on your application's structure and whether it's set as a virtual folder or is accessed using your server's root (http://localhost).

Also ASP.NET is known for altering the paths in many situations, this article might be helpful
http://aspnetresources.com/blog/more_on_url_rebasing_in_master_pages 

If you currently have the css file on the root folder try using
<link href="/PhysicianResults.css" rel="stylesheet" type="text/css" />
or try
<link href="<%= BaseURL %>/PhysicianResults.css" rel="stylesheet" type="text/css" />

Open in new window


You need to identify where your css file resides in the web server environment independently, once you're able to point the browser to the CSS file sucessfully using the correct path, you should be able to point to it correctly.

Hope this helps.
0
 

Author Closing Comment

by:lapucca
ID: 35480114
Thank you all.  I think it's the user control that's making this more complicated than it should be.  I'm just going to include the style in the code, <style type="text/css">  that seems to work for sure.
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

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

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Suggested Courses
Course of the Month18 days, 3 hours left to enroll

829 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