Question

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.

Answer 1

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.