Solved

CSS and base href

Posted on 2006-06-13
19
3,402 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

 
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
 
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

756 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