3

I'm writing a ASP.NET Web Application and I'm running into trouble getting the CSS styles to be applied. Currently I have a Master Page and one Content Page. My Master page is getting the CSS style applied to it, but the Content page is not. The funny thing is in design view the style is being applied to the Content page but once it is ran the browser doesn't apply it. I've tried internal and external style sheets. Inline does work but I'd like to avoid inline. Here is some sample code of what I have and tried

Master Page: 

<head runat="server">
    <title></title>
    <link rel="stylesheet" type="text/css" href="~/Styles/MasterStyleSheet.css" />
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>

Content Page:

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <link rel="stylesheet" type="text/css" href="~/Styles/LoginStyleSheet.css" />
    <!-- <link href='<%= ResolveUrl("~/Styles/LoginStyleSheet.css") %>' rel="stylesheet" type="text/css" /> I tried this as well-->
</asp:Content>

I've added the simple css file just so people could see that the syntax is correct: LoginStyleSheet.css

#usrLabel {
    color:Blue;
    background-color:Aqua;
}

#Label4 {
    background-color:Black;
}

Any help would be greatly appreciated

Update #1

HTML output for header:

<head>
    <title></title>

    <link rel="stylesheet" type="text/css" href="../Styles/MasterStyleSheet.css" />

    <!-- <link href="&lt;%= ResolveUrl(&quot;~/Styles/MasterStyleSheet.css&quot;) %>" rel="stylesheet" type="text/css" /> -->
    <!-- <link rel="stylesheet" type="text/css" href="../Styles/LoginStyleSheet.css" /> -->
    <!-- <link href='/Styles/LoginStyleSheet.css' rel="stylesheet" type="text/css" /> -->
    <!-- <link rel="stylesheet" type="text/css" href="~/Styles/LoginStyleSheet.css" /> -->
    <!-- <link rel="stylesheet" type="text/css" href="../Styles/LoginStyleSheet.css" /> -->
    <!-- <link rel="stylesheet" type="text/css" href="/Styles/LoginStyleSheet.css" /> -->
</head>

A lot of <link> elements are currently commented out but those are all different ways I've tried.

Update #2

First I appreciate the many responses. They have all been geared towards figuring out why my external css file won't work. However, if i try internal css style sheet it still doesn't work. Only inline css works. Perhaps if we could figure out what was wrong with why internal css styling wont work that would solve the same issue with external css style sheets

KyleMit
  • 30,350
  • 66
  • 462
  • 664
auwall12688
  • 389
  • 3
  • 11
  • 23
  • 3
    what does it look like when the html is rendered out? – Daniel A. White Jun 20 '12 at 15:15
  • 1
    When the page is rendered if you look at Chrome or IE Developer tools, is it showing the link to the master page style sheet? – Brian Jun 20 '12 at 15:20
  • Yes. and it looks like everything is generated correctly. I don't understand why the internal style sheet for the content page doesnt work either. only inline works. – auwall12688 Jun 20 '12 at 15:31
  • 1
    Can I suggest that you look at the HTML being sent to the browser, then navigate directly to each CSS file being referenced (by copy&paste into a new browser tab or window, or by using the wonderful [FireBug](http://http://getfirebug.com/) in FireFox) and double check that the files are actually accessible. If not, then either they're being referenced incorrectly, they're not in the location you think they are, or the permissions on the files are not setup correctly. – freefaller Jun 20 '12 at 15:41
  • @auwall12688 - can you clarify exactly what you mean by "external", "internal" and "inline". I believe "external" is the file being linked to via ``, and "inline" is if you use ` – freefaller Jun 20 '12 at 18:45
  • @freefaller I was confused by that until I realized that inline is like `
    ` and internal is where the CSS class is defined in the same page and referenced using `
    `
     – Trisped Jun 20 '12 at 18:57
  • @Trisped - ahhhh, yes, that makes more sense, thanks :-) – freefaller Jun 20 '12 at 19:01
  • @auwall12688 - I'm hoping the latest edit to my question below could be what you're after (fingers crossed) – freefaller Jun 20 '12 at 20:49

5 Answers5

4

As you have already realised, the following won't translate into an absolute path, because it is not an asp.net object...

<link rel="stylesheet" type="text/css" href="~/Styles/LoginStyleSheet.css" />

Instead, try using this...

<link rel="stylesheet" type="text/css" href="<%=VirtualPathUtility.ToAbsolute("~/Styles/LoginStyleSheet.css")%>" />

UPDATE (after updated question)...

If the HTML sent the browser is as follows, then I believe LoginStyleSheet.css is either in a different location, or has some file permissions that are stopping it being served correctly...

(I have removed commented out lines, and added the line starting with **... the ** should NOT be included)

<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="../Styles/MasterStyleSheet.css" />
  **<link rel="stylesheet" type="text/css" href="../Styles/LoginStyleSheet.css" />
</head>

ALSO @aRsen49 highlights a possibility in his answer... and that is that the CSS file is loading correctly, but the CSS is incorrect. Have you double checked that the CSS matches as it should (remembering that # denotes an id where as . denotes a class)?

FURTHER UPDATE

If @Trisped is correct in his assumption, I think I might have an idea what is going wrong...

If usrLabel and Label4 are asp objects (such as <asp:Label>), the fact you're using Masterpages means that the actual id of the controls in the HTML sent to the browser will not be usrLabel and Label4, but in fact they'll be something like ct100_Content1_usrLabel and ct100_Content1_Label4... so your CSS as you currently have it will not link up correctly.

So I would recommend you either update your CSS to use the id's sent to the browser, or (and this would be my preference) you should add CssClss="usrLabel" attributes to each of the objects, and then update your CSS to .usrLabel instead.

freefaller
  • 19,368
  • 7
  • 57
  • 87
  • Why not just use the razor helper that generates the URL for you. – IAmGroot Jun 20 '12 at 15:26
  • @Doomsknight, because I'm completely unaware of "the razor helper" you are referring to... I'm happy to retract my answer if there is an easier / more sensible solution – freefaller Jun 20 '12 at 15:28
  • That didn't work either. What I find the strangest is if I try to use and internal style sheet for the content page it still does not render correctly. – auwall12688 Jun 20 '12 at 15:29
  • What razor are you talking about. i thought that was just for mvc and this is a web form. – auwall12688 Jun 20 '12 at 15:31
  • @auwall12688, can you update your question with the exact contents of the `` that is being sent to the browser? – freefaller Jun 20 '12 at 15:32
  • @freefaller Its me thats mixed up :P I'm referring to MVC3 yes. My bad. – IAmGroot Jun 20 '12 at 22:55
1

Ok so here was the fix. So in my html the id was label4. However, because it was in a content page with a contentplaceholder id of ContentPlaceHolder1 once the html was actually generated the label's id was being changed from label4 to ContentPlaceHolder1_Label4. Therefore i had to change my css code. BTW f12 on ie works wonders. Thanks again for all the help. Sorry it was something as simple as an id being wrong.

auwall12688
  • 389
  • 3
  • 11
  • 23
  • Oops - didn't notice you'd answered your own question - after going away and having some food, I came to the same conclusion and updated my answer... well done for figuring it out. – freefaller Jun 20 '12 at 20:58
  • Yeah, with ASP I usually recommend not using CSS tied to the id, since adding the `runat` attribute usually results in the html id differing from what was entered in the ASPX page. Instead use class as freefaller indicated. F12 in IE is helpful, though I find Chrome to be more powerful and more intuitive. – Trisped Jun 20 '12 at 21:54
0

In your master page, define a HEAD element and then mention the link for CSS classes. Then it would work on all your content pages. I have found a good reference for you here

Community
  • 1
  • 1
DotNetFreak
  • 166
  • 5
0

If you use Visual Studios "drag and drop" the CSS sheet in your code.

If it still wont work, double check your CSS. For example: Did you create CSS Classes (CssClass = ) for ASPX Elements? Are Class names right? etc.

UPDATE

I know this might sound odd.. But Close down VS and restart it. Then Display the Page again. Furthermore.. When you display the page press F5! I believe your cache or similar might be the problem.

seN
  • 1,045
  • 14
  • 21
  • i just tried your suggestion. it works in design view but not in browser view still. i also find it weird that internal style sheets do not work as well. only inline works. – auwall12688 Jun 20 '12 at 16:30
  • I've restarted visual studios, cleared the cache and pressed f5. same results. – auwall12688 Jun 20 '12 at 17:33
  • Yes. It completely baffles me to why it does. And confuses me even more that internal style sheets wont work on the content page as well (even though design view is fine.) and i guess it should be noted that i've tried with ie9 and firefox. – auwall12688 Jun 20 '12 at 17:46
  • Also add the HTML Code from label4/usrLabel please. Both Labels are shown as an ID (#) but if you give it a CssClass it should be a class (.) – seN Jun 20 '12 at 17:48
0

Try:

  1. Open the page in Chrome
  2. Right click on an element which is applying the style (something in the master page) and select "Inspect element".
  3. In the window that pops up copy everything in the "Styles" panel (this panel is usually on the right side, just under computed style).
  4. Right click on an element which is not applying the style and select "Inspect element".
  5. Compare what is in the Styles with what you copied earlier.

If that does not get you on the right track then we will need one or both of the following:

  • The rendered html of a page which is not working. This should be the complete file. The page should not reference external resources like CSS or JS files.
  • A master page and content page which exhibit the issue.

Please note that these should be basic pages which exhibit the issue (not a production page with multiple controls on it).

Trisped
  • 5,705
  • 2
  • 45
  • 58