Style Sheet not getting applied to content page

G

Guest

I have a master page and a content page but the stylesheet isnt getting
applied like how it looks in visual studio design view.

The master page is defined like this:

<%@ Master Language="VB" CodeFile="MasterPage.master.vb"
Inherits="MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head id="Head1" runat="server">
<title>Overbored.com</title>
<link rel="stylesheet" type="text/css" href="StyleSheet.css" />
</head>
<body>
<div id="wrapper">
<form id="Form1" runat="server">
<div id="header">
<span class="title">Overbored.com</span>
<span class="breadcrumb">Todo: Breadcrumb will go
here...</span>
</div>
<div id="content">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="navigation">
<span class="title">Overbored.com</span>
<div id="Div1">
<asp:Menu ID="menu1" DataSourceID="SiteMapDataSource1"
runat="server"></asp:Menu>
<asp:SiteMapDataSource ID="SiteMapDataSource1"
ShowStartingNode="false" runat="server" />
</div>
</div>
</form>
</div>
<div id="footer">
<a href="http://www.overbored.com/Portal">http://www.overbored.com</a>
</div>
</body>
</html>

The content page is defines like this:

<%@ Page Language="VB" MasterPageFile="~/MasterPage.master"
AutoEventWireup="false" CodeFile="Login.aspx.vb" Inherits="Login" %>



<asp:Content ID="LoginContent" ContentPlaceHolderID="MainContent"
Runat="Server">

<div>
<asp:Login ID="Login1" runat="server" BackColor="#EFF3FB"
BorderColor="#B5C7DE" BorderPadding="4"
BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana"
Font-Size="0.8em"
ForeColor="#333333">
<TitleTextStyle BackColor="#507CD1" Font-Bold="True"
Font-Size="0.9em" ForeColor="White" />
<InstructionTextStyle Font-Italic="True" ForeColor="Black" />
<TextBoxStyle Font-Size="0.8em" />
<LoginButtonStyle BackColor="White" BorderColor="#507CD1"
BorderStyle="Solid" BorderWidth="1px"
Font-Names="Verdana" Font-Size="0.8em" ForeColor="#284E98" />
</asp:Login>
</div>


</asp:Content>

The style sheet is in the root folder and is called StyleSheet.css

/*
The below CSS file was built using samples + techniques described by
Rachel Andrew in her book:
The CSS Anthology: 101 Essential Tips, Tricks & Hacks
*/

/* Overall Page */

body {
margin: 0;
padding-bottom: 2em;
background-color: #FFFFFF;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
border-top: 2px solid #3366CC;
}

/* Header Section */

#header {
border-top: 3px solid #3366CC;
border-bottom: 1px dotted #3366CC;
height: 3em;
}
#header .title {
font: 190% Arial, Helvetica, Georgia, "Times New Roman", Times, serif;
color: black;
background-color: transparent;
float: left;
margin-right: 2em;
margin-top: 0.3em;
margin-left: .8em;
}
#header .breadcrumb {
font: 90% Arial, Helvetica, Georgia, "Times New Roman", Times, serif;
color: #FFFFFF;
background-color: transparent;
float: right;
margin-right: 2em;
margin-top: 0.8em;
font-weight:bold;
}

#header a:link, a:visited {
color: #B51032;
}

/* Footer */

#footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1.5em;
background-color: #3366CC;
color: #3366CC;
border-top: #778899;
text-align: center;
}

#footer a:link, #footer a:visited {
padding: 0.8em 1em 0.5em 1em;
color: #FFFFFF;
background-color: transparent;
font-size: 80%;
}


/* Navigation */

#navigation {
width: 200px;
top: 5em;
left: 1em;
width: 13em;
position:absolute;
font-family: Arial, Helvetica, sans-serif;
font-size:90%;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
#navigation li {
border-bottom: 1px solid #ED9F9F;
}
#navigation li a:link, #navigation li a:visited {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
background-color: #B51032;
color: #FFFFFF;
text-decoration: none;
}
#navigation li a:hover {
background-color: #711515;
color: #FFFFFF;
}
#navigation ul ul {
margin-left: 12px;
}
#navigation ul ul li {
border-bottom: 1px solid #711515;
margin:0;
}
#navigation ul ul a:link, #navigation ul ul a:visited {
background-color: #ED9F9F;
color: #711515;
}
#navigation ul ul a:hover {
background-color: #711515;
color: #FFFFFF;
}

/* Main Content */

#content
{
margin-top:1em;
margin-left: 16em;
margin-right: 2em;
}
h1 {
font: 150% Arial, Helvetica, Georgia, "Times New Roman", Times, serif;
}
#content p {
font-size: 80%;
line-height: 1.6em;
}


In visual studio designer the content page looks right but when i run the
application the master page style is not applied. The content of the master
page is applied but not the style.

Please help!
 
G

Guest

Also, I took the source of my page and put in a blank txt file and saved as
an html file. in that page the style is getting applied correctly. Is it
somethign to do with the permissions of the css file?
 
G

Guest

Ok, I looked at the output when rendered in IE and it works but does not work
in Firefox. Any ideas how to fix this?
 
D

David Rees

The path to the stylesheet is hard-coded into your masterpage.

Get the "Live HTTP Headers" extension for Firefox and watch what requests it
makes to the server as it retrieves your ASPX pages, I'll bet you'll spot it
ask for the "StyleSheet.css" resource *from the same directory as the
document referencing it*. If the stylesheet is in the root of your website's
(i.e. right after the hostname) prepend "/" so it becomes "/stylesheet.css".
 
G

Guest

i have 2 folders set up. The stylesheet is at the root of the site. I tried
prepending a "/" so it becomes /stylesheet.css but that did not work.

Amit
 
M

Mark Rae

i have 2 folders set up. The stylesheet is at the root of the site. I
tried
prepending a "/" so it becomes /stylesheet.css but that did not work.
Click to expand...

That's hardly surprising...

Try this:

<link rel="stylesheet" type="text/css" href="~/StyleSheet.css" />
 
G

Guest

That did not work.

My masterpage now looks like this
<%@ Master Language="VB" CodeFile="MasterPage.master.vb"
Inherits="MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head id="Head1" runat="server">
<title>Overbored.com</title>
<link rel="stylesheet" type="text/css" href="~/Styles.css" />
</head>

I installed Live HTTP headers and this is my output.


http://localhost/Overbored/Softball/Login.aspx?ReturnUrl=/Overbored/Softball/PlayerStats.aspx

GET
/Overbored/Softball/Login.aspx?ReturnUrl=%2fOverbored%2fSoftball%2fPlayerStats.aspx HTTP/1.1
Host: localhost
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.8)
Gecko/20061025 Firefox/1.5.0.8
Accept:
text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
Cookie:
..ASPXANONYMOUS=LkfYgoBPxwEkAAAAZjllZTE5MzgtNjE3NS00YjcwLWI4OTMtYmZkNzdlOTVmZTRm0; ASP.NET_SessionId=oxousfnyrulg31f0yjyrjj2y
Cache-Control: max-age=0

HTTP/1.x 200 OK
Server: Microsoft-IIS/5.1
Date: Sun, 10 Dec 2006 23:31:29 GMT
X-Powered-By: ASP.NET
X-AspNet-Version: 2.0.50727
Cache-Control: private
Content-Type: text/html; charset=utf-8
Content-Length: 8099
----------------------------------------------------------
http://localhost/Overbored/Softball/Styles.css

GET /Overbored/Softball/Styles.css HTTP/1.1
Host: localhost
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.8)
Gecko/20061025 Firefox/1.5.0.8
Accept: text/css,*/*;q=0.1
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
Referer:
http://localhost/Overbored/Softball/Login.aspx?ReturnUrl=/Overbored/Softball/PlayerStats.aspx
Cookie:
..ASPXANONYMOUS=LkfYgoBPxwEkAAAAZjllZTE5MzgtNjE3NS00YjcwLWI4OTMtYmZkNzdlOTVmZTRm0; ASP.NET_SessionId=oxousfnyrulg31f0yjyrjj2y
Cache-Control: max-age=0

HTTP/1.x 401 Access Denied
Server: Microsoft-IIS/5.1
Date: Sun, 10 Dec 2006 23:31:29 GMT
WWW-Authenticate: Negotiate
WWW-Authenticate: NTLM
Connection: close
Content-Length: 4046
Content-Type: text/html
 
G

Guest

Ok, thanks guys I think I got it working now. I think it was a combination
of a permission error and a path error for the stylesheet. Thanks for the
tip on the Live HTTP headers...that enabled me to catch the permission error
and thanks for the stylesheet path tip. Looks likes it working.

Amit
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Justify-content not working 1
Help with my responsive home page 2
Working on mobile css menu with plenty of frustration! 2
Image on header 2
Buttons lining up 1
How do I fix this issue in sqaurespace code block? 1
Why is the e.target not working here? 1
How to position the *tooltip* comment on these buttons? 9

Members online

Total: 52 (members: 1, guests: 51)
Robots: 352

Forum statistics

Threads
473,968
Messages
2,570,154
Members
46,701
Latest member
XavierQ83

Latest Threads

Top