The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Nested Files can't find CSS styles
DavidN
post Jun 3 2015, 12:48 PM
Post #1





Group: Members
Posts: 4
Joined: 3-June 15
Member No.: 22,678



I have run into something that I just can't solve. The attachments below show the directory structure. This is a site for a farm with beef cattle. So in order to keep the site orderly, I have the cows and bulls in separate folders. The file under the Females folder "Donor_template" will not show up correctly in a browser if it is in the folder. But if you move it to the root, it shows up just fine.

The CSS files are in a CSS folder and show up fine as long as the file is in the root. I've added the ../ before the folder names and even went as far as adding ../../ to make sure I was getting up enough levels (tried even more and less levels). I've shown the code in the header that references the CSS file.

Can anyone see something that I'm not doing right based on my desired directory structure?

Ready do not want to have all the html files under the root, really want to keep that structure.

Attached Image
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 3 2015, 01:28 PM
Post #2


.
********

Group: WDG Moderators
Posts: 8,217
Joined: 10-August 06
Member No.: 7



QUOTE(DavidN @ Jun 3 2015, 07:48 PM) *

The file under the Females folder "Donor_template" will not show up correctly in a browser if it is in the folder.

The URL to that file seems to be:

CODE
www.yoursite.com/Females/donor_template.html

--is that correct? Note the uppercase directory name and lowercase filename. I also assume that "Site - Woodangus..." is the web root.

QUOTE
The CSS files are in a CSS folder and show up fine as long as the file is in the root.

Two CSS files are in a NOSCRIPT element, which means they're only loaded in browsers where javascript is disabled. The third CSS file is only shown to IE8 or older.

QUOTE
Ready do not want to have all the html files under the root, really want to keep that structure.

You can also use root relative URLs, like

CODE
/foo/bar.html

--at least if you only test on a server (online or local), and never directly from the local file system.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 3 2015, 02:09 PM
Post #3


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,369
Joined: 9-August 06
Member No.: 6



More peculiar that the CSS does show up if the HTML file is moved. It shouldn't, considering the NOSRIPT. wacko.gif


Also, do I understand it right that the HTML file itself doesn't show up if it isn't in the root folder or did you mean that the HTML isn't styled? If the HTML page doesn't show up, do you get an error code from the server? 404?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
DavidN
post Jun 3 2015, 03:12 PM
Post #4





Group: Members
Posts: 4
Joined: 3-June 15
Member No.: 22,678



QUOTE(pandy @ Jun 3 2015, 03:09 PM) *

More peculiar that the CSS does show up if the HTML file is moves. It shouldn't, considering the NOSRIPT. wacko.gif


Also, do I understand it right that the HTML file itself doesn't show up if it isn't in the root folder or did you mean that the HTML isn't styled? If the HTML page doesn't show up, do you get an error code from the server? 404?


Just that it wasn't styled. I did however find this and it worked. Added runat="server"

<noscript>
<link rel="stylesheet" href="../css/skel.css" runat="server"/>
<link rel="stylesheet" href="../style.css" runat="server"/>
</noscript>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 3 2015, 05:24 PM
Post #5


.
********

Group: WDG Moderators
Posts: 8,217
Joined: 10-August 06
Member No.: 7



CODE
runat="server"

seems to be an ASP.NET directive. Even if you do use .NET, how does it relate with stylesheets and NOSCRIPT elements? unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
DavidN
post Jun 3 2015, 08:11 PM
Post #6





Group: Members
Posts: 4
Joined: 3-June 15
Member No.: 22,678



QUOTE(Christian J @ Jun 3 2015, 06:24 PM) *

CODE
runat="server"

seems to be an ASP.NET directive. Even if you do use .NET, how does it relate with stylesheets and NOSCRIPT elements? unsure.gif



Spoke to soon. I was editing at work directly on the server. Got home, copied the files from the server to local. Republished to get get all in sync and broke again.

So I will backtrack and look at other suggestions.

So tempted to scrap the folder structure for the html files, this is a pain.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 3 2015, 10:38 PM
Post #7


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,369
Joined: 9-August 06
Member No.: 6



To start with remove those NOSCRIPT tags. They have nothing there to do.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 4 2015, 06:05 AM
Post #8


.
********

Group: WDG Moderators
Posts: 8,217
Joined: 10-August 06
Member No.: 7



In theory the NOSCRIPT elements could be used intentionally for non-javascript browsers, while other browsers would load their CSS files from the javascripts. If so, are the javascript files where they should be?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 4 2015, 12:28 PM
Post #9


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,369
Joined: 9-August 06
Member No.: 6



That sounds farfetched.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
DavidN
post Jun 6 2015, 07:36 AM
Post #10





Group: Members
Posts: 4
Joined: 3-June 15
Member No.: 22,678



Keeping in mind that I began this with a template to help learn responsive design and redesign a website, I based this on a template. Thru further testing, I have found that the <NOSCRIPT> tag, when removed allows for the CSS to show up. But at the same time, if removed it screws up the mobile display. So I've emailed the original author of the template and unless he has an answer for me, I'm probably gonna bite the bullet and place all my HTML files directly under the root.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 6 2015, 07:48 AM
Post #11


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,369
Joined: 9-August 06
Member No.: 6



Only, it doesn't make sense that the NOSCIPT doesn't stop the CSS form loading when the HTML is in the root directory. There's more to this. Does the style sheets use @import rules?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 6 2015, 07:52 AM
Post #12


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,369
Joined: 9-August 06
Member No.: 6



Could you link to the page in question so we can see what's really there?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 18th September 2019 - 06:54 PM