CODEWITHSUNDEEP
htmlapache.htaccess
Sackling
Sackling

Reputation: 1820

base href causing this?

Hi I have a spip website that I need to get working on my localmachine.

I copied everything over and the site seems to be "working" with all the databases.

The problem is I think there is a base href set.

The stylesheet in the header was linked like this:

<link rel="stylesheet" type="text/css" href="/css/style.css" />

and was not working as it was going to the root of the localhost instead of the website folder.

However changing the link to this (without the forward slash) works perfectly.

<link rel="stylesheet" type="text/css" href="css/style.css" />

The problem is I have tons of links on the site that are all acting like this. Is there anywhere I can look to see what is causing this? I can't find a base href set anywhere and the htaccess file seems to have no effect.

Upvotes: 0

Views: 1965

Answers (2)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201598

URLs that start with / (absolute-path references) are useful only when the document is on an HTTP server or it has its base URL set (via the base tag) to refer to an absolute HTTP URL. If you try to use them in a local HTML document (without a base tag), the base URL used will be a file:// URL, so a URL like /foo/bar gets interpreted as file://foo/bar, which normally won’t work – you would need to have a foo/bar that constitutes the full path name of a resource in your computer’s file system.

So sites that should be downloadable for local use simply must not use URLs that start with /.

Upvotes: 0

techfoobar
techfoobar

Reputation: 66663

Resource URLs and link hrefs that begin with a slash (/) do not use the <base href="xyz"> value. They tell the browser to fetch the resource from the root of the host/domain path.

For example, if you have:

<base href="http://mysite.com/res/">

<!-- style sheet 1 -->
<link rel="stylesheet" type="text/css" href="/css/style.css" />

<!-- style sheet 2 -->
<link rel="stylesheet" type="text/css" href="css/style.css" />

style sheet 1 will attempt to fetch it from http://mysite.com/css/style.css regardless of the base href value, since its URL starts with a / indicating host document root.

style sheet 2 however will use the base href value and attempt to fetch it from http://mysite.com/res/css/style.css

Possible Solutions

  1. Update your HTML/PHP/JSP etc. to remove the / prefix from all your style sheet urls, links, images etc. You should probably be able to find and replace this using a good editor like Notepad ++

  2. Ugly way - Modify those URLs using some JS after your page loads. This has a problems that the user will likely see wrong/incomplete content before the JS completes execution.

Upvotes: 3

Related Questions