CSS and base href

I have a dynamic base href depending on if my page is run from localhost or my server.  
Reason why? Here > http:Q_21858289.html

When i order these tages like this;

<base href=>
<link href=type="text/css">    
<script src=></script>

they work when the page is the base root, however when the page is put into a sub folder, the javascript works but not the css file.

I can solve it by re-ordering:

<link href=type="text/css">    
<base href=>
<script src=></script>


However this seems quite odd.  I dont get why it is doing this, i thought the whole point of the base href was to tell the css file where to look.

My code changes the base href in the pageload.  If it's my server, it adds http://myserver.com/ and if it's on the localhost it changes it to http://localhost/appname/.

I've tried a few things, like ../NAME.css and /NAME.css


I am using <link href="NAME.css" rel="stylesheet" type="text/css" />  


Any ideas?  Thanks.
(And if i haven't made myself clear, please ask more questions and i'll try to explain further)
LVL 12
UnexplainedWaysAsked:
Who is Participating?
 
ThogekCommented:
That sounds like that'll get you what you need for now... and there might be ways to wrap it up to be a bit less work than it sounds (such as creating a literal control that automatically does your base+link.src logic and outputs a <style> element)... although it does still seem a bit less than ideal...
0
 
UnexplainedWaysAuthor Commented:
And a part 2 of this question:

When i say "it works", it only works when the css file is in the base root.  When i put it into a folder, it can't find it at all.  When i view the source of IE, it puts it as "FOLDER/FILE.css" and when i look in FF, it changes it to "../FOLDER/FILE.css".

Weird.

I have a feeling that they will be linked
0
 
UnexplainedWaysAuthor Commented:
This is getting really werid, i've even given the full path to the css file which is valid.  When i view source with a FF extention, it finds the file and embeds its in the source, and it found it.
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
jrramCommented:
Let me set this up and see what I get.
0
 
Extortioner15Commented:
I would suggest trying to put it in a special folder, and only put the HTML files in the root folder:
index.html -> root/index.html
css.css -> root/css/css.css

and then             <link href="css.css" rel="stylesheet" type="text/css">
0
 
UnexplainedWaysAuthor Commented:
It's actually asp.net with a masterpage.  It works in the root folder, but as soon as i put it into a css folder (or any folder) it wont work.
0
 
UnexplainedWaysAuthor Commented:
Turns out it's to do with the css and the images it links to (background's).  They don't follow the base href.
0
 
ThogekCommented:
Is the CSS file in a specific position in relation to the page or to the master page?  (It needs to be in relation to the page.  The location of the master page will have no meaning because it's contents will simply be rendered into the page using it.)
0
 
UnexplainedWaysAuthor Commented:
I have a base href for the location of all images and include files (css & js).  That seems to work, but the images inside the url (background-image:) dont seem to use the base href.  This was all thre images will work with the masterpage and the includes, but the contents of the css is whats causing the problem.
0
 
UnexplainedWaysAuthor Commented:
Back to square 1 lol, now i can't get the css file to be accessed from a file in a sub folder.

I have a base href to www.mysite.com and then the foldername/filename.css for the css 'link', however, it seems to be trying to find foldername/foldername/filename.css.

The only way i can get it to work is to directly link it to www.mysite.com/foldername/filename.css. I am unable to do this because of the way this site is developed (in another Q so i wont go into that).

Here is what i have tried:

 a   <link href="filename.css" rel="stylesheet" type="text/css" />    
 b   <link href="foldername/filename.css" rel="stylesheet" type="text/css" />  
 c   <link href="/foldername/filename.css" rel="stylesheet" type="text/css" />
 d   <link href="../foldername/filename.css" rel="stylesheet" type="text/css" />


When run in the root folder they give these results

a = foldername/filename.css
b = foldername/foldername/filename.css
c = /foldername/filename.css
d = foldername/filename.css


When run from a subfolder they give these results

a = ../foldername/filename.css
b = ../foldername/foldername/filename.css
c = /foldername/filename.css
d = ../foldername/filename.css


When run from the root folder

a -  works
b - dosn't
c - dosn't
d - works


When run from a sub folder

None work.
0
 
ThogekCommented:
Where, specifically, are your page and master page files in this directory structure?  When you say "when run in the root folder", do you mean that the page is in the root folder, or the master page, or...?
0
 
UnexplainedWaysAuthor Commented:
ok, here's the file system.

<root>
-Page1.aspx

[folderA]
   -Masterpage
   -css file
   -js file

[folderB]
   -Page2.aspx

When i talk about running from the root foler, i am talking about Page1.aspx, when i say a sub-folder, i mean Page2.aspx.  FolderA is to keep all the masterpage files together (css,js,img's etc)

0
 
ThogekCommented:
Got it.  That's much clearer.  :-)

Question:
Does your page or master page set runat="server" in either of the <link> or <head> elements?
0
 
ThogekCommented:
"When run in the root folder they give these results"
"When run from a subfolder they give these results"

What does this mean?  Give these results for what?  Is this the URL that appears in the "view source" HTML link element?  Or...?
0
 
UnexplainedWaysAuthor Commented:
The view source, yes.  It shows me what the browser "see's" then
0
 
UnexplainedWaysAuthor Commented:
"Does your page or master page set runat="server" in either of the <link> or <head> elements?"

Only in the <base href> thats because it's dynamically changed in the page load.  The links to the script/style is the same no matter what the base href is.
0
 
ThogekCommented:
Very weird.  If link and head elements are not runat="server", then you shouldn't be getting different URLs in the link tags in different browsers (which one of your comments above suggested you were seeing).

Very curious.  If I have time, I may experiment a bit and see if I can recreate the odd behaviors you describe...
0
 
UnexplainedWaysAuthor Commented:
Thanks, I have a quick hack that get's the file working.

I make the style sheet runat=server, then i make the href/src what it's meant to, then in the page load i say

link.src = base+ link.src.  

Automatically makes it the full path and that seems to work.  However, this line must be done per style sheet and that's not a good solution.  (but it works)
0
 
UnexplainedWaysAuthor Commented:
Thanks for the help.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.