Solved

CSS and base href

Posted on 2006-06-13
19
3,387 Views
Last Modified: 2013-11-19
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)
0
Comment
Question by:UnexplainedWays
19 Comments
 
LVL 12

Author Comment

by:UnexplainedWays
ID: 16893954
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
 
LVL 12

Author Comment

by:UnexplainedWays
ID: 16894668
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
 
LVL 13

Expert Comment

by:jrram
ID: 16904543
Let me set this up and see what I get.
0
 
LVL 1

Expert Comment

by:Extortioner15
ID: 16904558
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
 
LVL 12

Author Comment

by:UnexplainedWays
ID: 16909606
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
 
LVL 12

Author Comment

by:UnexplainedWays
ID: 16920110
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
 
LVL 15

Expert Comment

by:Thogek
ID: 16921719
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
 
LVL 12

Author Comment

by:UnexplainedWays
ID: 16926193
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
 
LVL 12

Author Comment

by:UnexplainedWays
ID: 16926499
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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
LVL 15

Expert Comment

by:Thogek
ID: 16928264
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
 
LVL 12

Author Comment

by:UnexplainedWays
ID: 16928797
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
 
LVL 15

Expert Comment

by:Thogek
ID: 16932134
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
 
LVL 15

Expert Comment

by:Thogek
ID: 16932140
"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
 
LVL 12

Author Comment

by:UnexplainedWays
ID: 16932391
The view source, yes.  It shows me what the browser "see's" then
0
 
LVL 12

Author Comment

by:UnexplainedWays
ID: 16932737
"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
 
LVL 15

Expert Comment

by:Thogek
ID: 16935271
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
 
LVL 12

Author Comment

by:UnexplainedWays
ID: 16939233
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
 
LVL 15

Accepted Solution

by:
Thogek earned 500 total points
ID: 16943810
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
 
LVL 12

Author Comment

by:UnexplainedWays
ID: 16943825
Thanks for the help.
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL (http://www.experts-exchange.com/articles/201/Handling-Date-and-Time-in-PHP-and-MySQL.html) several years ago, it seemed like now was a good time to updat…
I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now