Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS files not loading properly in Development server

Status
Not open for further replies.

iaresean

Programmer
Mar 24, 2003
570
ZA
Hi All;

I have a wierd problem. I am dev'ing a site at the moment and when I browse to it via IIS it loads 100%. However, as soon as I want to perform debugging the css files do not load properly. Using my firefox dev plugins I checked the contents of the css files being loaded, and instead of them containing their original css, they had a copy of the pages generated html in it! What the hell???

Do you think it may be caused because the debugger runs on the ASP.NET Development Server as opposed to IIS?

I am using a master page, in which I have the css scripts inserted, like so:

Code:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="backend.master.cs" Inherits="sat_backend" %>

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

<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" >
<head id="Head1" runat="server">
	<title>CMS</title>
	
	<link href="css/main.css" rel="stylesheet" media="screen" type="text/css" />
	<link href="css/frame.css" rel="stylesheet" media="screen"type="text/css" />
</head>
<body>

This is very strange behaviour.

Perhaps I just need to restart my machine. :)

I will try the restart after this post and see if it has an effect.

Regards

Sean. [peace]
 
Aaargh!

The restart didn't work. Was kinda hoping it would be that easy. :)

Anyone have a clue on what is going on here?

Probably the strangest thing to happen to me in the ASP.NET 2.0 world as of yet.

Sean. [peace]
 
Rather than looking at the page in IIS, run the page under the dev server and have a look at it in IE and FireFox. Have a look at the source and see if the CSS files are pointing to the right location. Idealy, give us a link to the site if you can or paste the resulting markup and CSS files here.


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 
Hi ca8msm;

I have checked it in both FireFox and IE. It runs fine in IIS, the problem comes when running in the Dev Server.

Here is a copy of the generated code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]

<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" >
<head id="ctl00_Head1"><title>
	CMS
</title><link href="css/main.css" rel="stylesheet" media="screen" type="text/css" />
	<link href="css/frame.css" rel="stylesheet" media="screen"type="text/css" />
<style type="text/css">
	.ctl00_smFooter_0 { background-color:white;visibility:hidden;display:none;position:absolute;
left:0px;top:0px; }
	.ctl00_smFooter_1 { text-decoration:none; }
	.ctl00_smFooter_2 {  }
	.ctl00_smFooter_3 { border-style:none; }
	.ctl00_smFooter_4 { width:80px; }
	.ctl00_smFooter_5 { background-color:#EAEAEA;width:80px;padding:
2px 0px 2px 0px; }

</style></head>
<body>

	<form name="aspnetForm" method="post" action="Default.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="aspnetForm">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />

<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNTY4MzU1MzExD2QWAmYPZBYCAgMPZBYEAgMPPCsADQEADxYCHgtfIURhd
GFCb3VuZGdkZAIFD2QWAgIBD2QWAmYPZBYCAgEPZBYCZg9kFgICDQ8QDxYCHgdDaGVja2Vka
GRkZGQYAQUeX19Db250cm9sc1JlcXVpcmVQb3N0QmFja0tleV9fFgIFJmN0bDAwJE1haW4kT
G9naW5BcmVhJExvZ2luMSRSZW1lbWJlck1lBSdjdGwwMCRNYWluJExvZ2luQXJlYSRMb2dpb
jEkTG9naW5CdXR0b25lx7WdVR/tdqeiYtvyTYAsQQM0tQ==" />
</div>

<script type="text/javascript">
<!--
var theForm = document.forms['aspnetForm'];
if (!theForm) {
    theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
// -->
</script>


<script src="/shopping/WebResource.axd?d=XhPc0C3K7Iv_ysCk1HmjTw2&amp;t=6330388960
40474032" type="text/javascript"></script>


<script src="/shopping/WebResource.axd?d=iRcacMypyzhxE3UT0PH5Pw2&amp;t=6330388960
40474032" type="text/javascript"></script>
<script src="/shopping/WebResource.axd?d=N3b-42IpHR2DLOXIG_zI3xChj8cb3AXPmSX0D17V
ulA1&amp;t=633038896040474032" type="text/javascript"></script>
<script type="text/javascript">
<!--
function WebForm_OnSubmit() {
if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return false;
return true;
}
// -->

</script>


		<div class="header">
			<h1>Title</h1>
			<!--<h2>menu to go in here</h2>-->
			<div class="menua">
			    <a href="help.aspx">Help</a> 
			    
			</div> 
			<div class="nav">

				
			</div>
		</div>

		
    <div class="shim column"></div>
	
	<div class="page" id="home">
	    <div id="sidebar">
	        
					<table id="ctl00_Main_LoginArea_Login1" cellspacing="0" cellpadding="0" border="0"
 style="border-collapse:collapse;">
	<tr>
		<td>

							<div class="login">
								<h4>Login to Site</h4>
								<label for="ctl00_Main_LoginArea_Login1_UserName" id="ctl00_Main_LoginArea_Login1_UserNameLabel" class="label">User Name</label>
								<input name="ctl00$Main$LoginArea$Login1$UserName" type="text" id="ctl00_Main_LoginArea_Login1_UserName" accesskey="u" class="textbox" />
								<span id="ctl00_Main_LoginArea_Login1_UserNameRequired" title="User Name	is required." style="color:Red;visibility:hidden;">*</span>
								<label for="ctl00_Main_LoginArea_Login1_Password" id="ctl00_Main_LoginArea_Login1_PasswordLabel" class="label">Password</label>
								<input name="ctl00$Main$LoginArea$Login1$Password" type="password" id="ctl00_Main_LoginArea_Login1_Password" accesskey="p" class="textbox" />

								<span id="ctl00_Main_LoginArea_Login1_PasswordRequired" title="Password is	required." style="color:Red;visibility:hidden;">*</span>
								<div><input id="ctl00_Main_LoginArea_Login1_RememberMe" type="checkbox" name="ctl00$Main$LoginArea$Login1$RememberMe" /><label for="ctl00_Main_LoginArea_Login1_RememberMe">Remember me	next time</label></div>
								<input type="image" name="ctl00$Main$LoginArea$Login1$LoginButton" id="ctl00_Main_LoginArea_Login1_LoginButton" class="button" src="gfx/button-login.gif" alt="login" style="border-width:0px;" />
								<p></p>
							</div>
						</td>
	</tr>
</table>

				
        </div>
        
        <div id="content">
		    <h3>Welcome	to the TITLE CMS</h3>
		    <p>This is your tool to manage the dynamic elements incorporated within the TITLE Website.</p>
		    <hr	/>
		    <h4>Please Note</h4>
		    <p>Should you have any queries regarding the usage of this CMS, please direct your queries to the following person: EMAILADDRESS</p>

	    </div>
    </div>


		<div class="footerbg">
			<div class="footer">
			    
				        <div id="ctl00_LoginArea_divPad" style="width:100%; height:17px;"></div>
				        Copy
				    
			</div>

		</div>

		
	
	
<script type="text/javascript">
<!--
var Page_Validators =  new Array(document.getElementById("ctl00_Main_LoginArea_Login1_UserName
Required"), document.getElementById("ctl00_Main_LoginArea_Login1_PasswordRequired"));
// -->
</script>

<script type="text/javascript">
<!--
var ctl00_Main_LoginArea_Login1_UserNameRequired = document.all ? document.all["ctl00_Main_LoginArea_Login1_UserNameRequired"] : document.getElementById("ctl00_Main_LoginArea_Login1_UserNameRequired");
ctl00_Main_LoginArea_Login1_UserNameRequired.controltovalidate = "ctl00_Main_LoginArea_Login1_UserName";
ctl00_Main_LoginArea_Login1_UserNameRequired.errormessage = "User Name is required.";
ctl00_Main_LoginArea_Login1_UserNameRequired.validationGroup = "Login1";
ctl00_Main_LoginArea_Login1_UserNameRequired.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
ctl00_Main_LoginArea_Login1_UserNameRequired.initialvalue = "";
var ctl00_Main_LoginArea_Login1_PasswordRequired = document.all ? document.all["ctl00_Main_LoginArea_Login1_PasswordRequired"] : document.getElementById("ctl00_Main_LoginArea_Login1_PasswordRequired");
ctl00_Main_LoginArea_Login1_PasswordRequired.controltovalidate = "ctl00_Main_LoginArea_Login1_Password";
ctl00_Main_LoginArea_Login1_PasswordRequired.validationGroup = "Login1";
ctl00_Main_LoginArea_Login1_PasswordRequired.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
ctl00_Main_LoginArea_Login1_PasswordRequired.initialvalue = "";
// -->
</script>

<div>

	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBQLp/pzcDQK44LSXDwLP3fKIDwKwkufIDALNppTVCF4pL1IkFLiOeWAfVJW
+kBu+tWbn" />
</div>

<script type="text/javascript">
<!--
var ctl00_smFooter_Data = new Object();
ctl00_smFooter_Data.disappearAfter = 500;
ctl00_smFooter_Data.horizontalOffset = 0;
ctl00_smFooter_Data.verticalOffset = 0;
// -->

</script>

<script type="text/javascript">
<!--
var Page_ValidationActive = false;
if (typeof(ValidatorOnLoad) == "function") {
    ValidatorOnLoad();
}

function ValidatorOnSubmit() {
    if (Page_ValidationActive) {
        return ValidatorCommonOnSubmit();
    }
    else {
        return true;
    }
}
// -->
</script>
        </form>
	
</body>
</html>


And I used JsView FireFox plugin to grab the contents of the css file (same for both), which came out as so:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]

<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" >
<head id="ctl00_Head1"><title>
	CMS
</title><link href="css/main.css" rel="stylesheet" media="screen" type="text/css" />
	<link href="css/frame.css" rel="stylesheet" media="screen"type="text/css" />
<style type="text/css">
	.ctl00_smFooter_0 { background-color:white;visibility:hidden;display:none;position:absolute;
left:0px;top:0px; }
	.ctl00_smFooter_1 { text-decoration:none; }
	.ctl00_smFooter_2 {  }
	.ctl00_smFooter_3 { border-style:none; }
	.ctl00_smFooter_4 { width:80px; }
	.ctl00_smFooter_5 { background-color:#EAEAEA;width:80px;padding:
2px 0px 2px 0px; }

</style></head>
<body>

	<form name="aspnetForm" method="post" action="Default.aspx?ReturnUrl=%2fshopping%2fsat%2fcss%2fmain.css" onsubmit="javascript:return WebForm_OnSubmit();" id="aspnetForm">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />

<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNTY4MzU1MzExD2QWAmYPZBYCAgMPZBYEAgMPPCsADQEADxYCHgtfIURhdG
FCb3VuZGdkZAIFD2QWAgIBD2QWAmYPZBYCAgEPZBYCZg9kFgICDQ8QDxYCHgdDaGVja2VkaGRk
ZGQYAQUeX19Db250cm9sc1JlcXVpcmVQb3N0QmFja0tleV9fFgIFJmN0bDAwJE1haW4kTG9naW
5BcmVhJExvZ2luMSRSZW1lbWJlck1lBSdjdGwwMCRNYWluJExvZ2luQXJlYSRMb2dpbjEkTG9n
aW5CdXR0b25lx7WdVR/tdqeiYtvyTYAsQQM0tQ==" />
</div>

<script type="text/javascript">
<!--
var theForm = document.forms['aspnetForm'];
if (!theForm) {
    theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
// -->
</script>


<script src="/shopping/WebResource.axd?d=XhPc0C3K7Iv_ysCk1HmjTw2&amp;t=6330388960
40474032" type="text/javascript"></script>


<script src="/shopping/WebResource.axd?d=iRcacMypyzhxE3UT0PH5Pw2&amp;t=6330388960
40474032" type="text/javascript"></script>
<script src="/shopping/WebResource.axd?d=N3b-42IpHR2DLOXIG_zI3xChj8cb3AXPmSX0D17V
ulA1&amp;t=633038896040474032" type="text/javascript"></script>
<script type="text/javascript">
<!--
function WebForm_OnSubmit() {
if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return false;
return true;
}
// -->

</script>


		<div class="header">
			<h1>TITLE</h1>
			<!--<h2>menu to go in here</h2>-->
			<div class="menua">
			    <a href="help.aspx">Help</a> 
			    
			</div> 
			<div class="nav">

				
			</div>
		</div>

		
    <div class="shim column"></div>
	
	<div class="page" id="home">
	    <div id="sidebar">
	        
					<table id="ctl00_Main_LoginArea_Login1" cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse;">
	<tr>
		<td>

							<div class="login">
								<h4>Login to Site</h4>
								<label for="ctl00_Main_LoginArea_Login1_UserName" id="ctl00_Main_LoginArea_Login1_UserNameLabel" class="label">User Name</label>
								<input name="ctl00$Main$LoginArea$Login1$UserName" type="text" id="ctl00_Main_LoginArea_Login1_UserName" accesskey="u" class="textbox" />
								<span id="ctl00_Main_LoginArea_Login1_UserNameRequired" title="User Name	is required." style="color:Red;visibility:hidden;">*</span>
								<label for="ctl00_Main_LoginArea_Login1_Password" id="ctl00_Main_LoginArea_Login1_PasswordLabel" class="label">Password</label>
								<input name="ctl00$Main$LoginArea$Login1$Password" type="password" id="ctl00_Main_LoginArea_Login1_Password" accesskey="p" class="textbox" />

								<span id="ctl00_Main_LoginArea_Login1_PasswordRequired" title="Password is	required." style="color:Red;visibility:hidden;">*</span>
								<div><input id="ctl00_Main_LoginArea_Login1_RememberMe" type="checkbox" name="ctl00$Main$LoginArea$Login1$RememberMe" /><label for="ctl00_Main_LoginArea_Login1_RememberMe">Remember me	next time</label></div>
								<input type="image" name="ctl00$Main$LoginArea$Login1$LoginButton" id="ctl00_Main_LoginArea_Login1_LoginButton" class="button" src="gfx/button-login.gif" alt="login" style="border-width:0px;" />
								<p></p>
							</div>
						</td>
	</tr>
</table>

				
        </div>
        
        <div id="content">
		    <h3>Welcome	to the TITLE CMS</h3>
		    <p>This is your tool to manage the dynamic elements incorporated within the TITLE Website.</p>
		    <hr	/>
		    <h4>Please Note</h4>
		    <p>Should you have any queries regarding the usage of this CMS, please direct your queries to the following person: EMAIL</p>

	    </div>
    </div>


		<div class="footerbg">
			<div class="footer">
			    
				        <div id="ctl00_LoginArea_divPad" style="width:100%; height:17px;"></div>
				        Copy
				    
			</div>

		</div>

		
	
	
<script type="text/javascript">
<!--
var Page_Validators =  new Array(document.getElementById("ctl00_Main_LoginArea_Login1_UserName
Required"), document.getElementById("ctl00_Main_LoginArea_Login1_PasswordRequired"));
// -->
</script>

<script type="text/javascript">
<!--
var ctl00_Main_LoginArea_Login1_UserNameRequired = document.all ? document.all["ctl00_Main_LoginArea_Login1_UserNameRequired"] : document.getElementById("ctl00_Main_LoginArea_Login1_UserNameRequired");
ctl00_Main_LoginArea_Login1_UserNameRequired.controltovalidate = "ctl00_Main_LoginArea_Login1_UserName";
ctl00_Main_LoginArea_Login1_UserNameRequired.errormessage = "User Name is required.";
ctl00_Main_LoginArea_Login1_UserNameRequired.validationGroup = "Login1";
ctl00_Main_LoginArea_Login1_UserNameRequired.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
ctl00_Main_LoginArea_Login1_UserNameRequired.initialvalue = "";
var ctl00_Main_LoginArea_Login1_PasswordRequired = document.all ? document.all["ctl00_Main_LoginArea_Login1_PasswordRequired"] : document.getElementById("ctl00_Main_LoginArea_Login1_PasswordRequired");
ctl00_Main_LoginArea_Login1_PasswordRequired.controltovalidate = "ctl00_Main_LoginArea_Login1_Password";
ctl00_Main_LoginArea_Login1_PasswordRequired.validationGroup = "Login1";
ctl00_Main_LoginArea_Login1_PasswordRequired.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
ctl00_Main_LoginArea_Login1_PasswordRequired.initialvalue = "";
// -->
</script>

<div>

	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBQLp/pzcDQK44LSXDwLP3fKIDwKwkufIDALNppTVCF4pL1IkFLiOeWAfVJW+
kBu+tWbn" />
</div>

<script type="text/javascript">
<!--
var ctl00_smFooter_Data = new Object();
ctl00_smFooter_Data.disappearAfter = 500;
ctl00_smFooter_Data.horizontalOffset = 0;
ctl00_smFooter_Data.verticalOffset = 0;
// -->

</script>

<script type="text/javascript">
<!--
var Page_ValidationActive = false;
if (typeof(ValidatorOnLoad) == "function") {
    ValidatorOnLoad();
}

function ValidatorOnSubmit() {
    if (Page_ValidationActive) {
        return ValidatorCommonOnSubmit();
    }
    else {
        return true;
    }
}
// -->
</script>
        </form>
	
</body>
</html>

But my main.css and frame.css do contain proper style definitions.

Strange as hell.

Regards

Sean. [peace]
 
Hmmm... I can't see what effect using the web server would have on the contents of a CSS file. However, rather than grabbing the contents of the CSS file with the add-on (just to rule out that as a potential problem) try just browsing to the css file (i.e. add "css/main.css" onto the path rather than the filename) and see if that shows the correct CSS.

Also, if you could get an example up on the net that replicates the problem it would help.


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 
Hi ca8msm;

I will try setting up a test environment.

In the mean time I tried accessing the css via the url path as you suggested, however, it kept on redirecting me back to the login page, even after I had logged in.

So then I edited the web.config file and commented out my allow roles items, after which I added '<allow users="*" />'. I thought perhaps the forms authentication was preventing me from accessing the css file.

I then ran the project again, and then it ran without any problems. The css was correct and the page was displaying as expected.

Very strange. How can my allow permissions for a folder affect the way css is grabbed/generated. Peculiar. :)

I will investigate further, just keeping you up to date.

Thanks again.

Sean. [peace]
 
Well, at least now it seems you can pinpoint why the error might be occuring even if we're not sure why! Maybe when you run the application on the development server it is running under an account that doesn't have access to the CSS folder?


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 
A very good point. However I don't know if that is the case. I am using forms based authentication. Also, the Webserver process is running under my windows login username, which has administrator priviledges.

We are definitely getting closer and closer.

Will be interesting to find out the exact cause of this situation. :)

Sean. [peace]
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top