Wednesday, May 18, 2011

The Base Tag

Whenever someone asks me to help troubleshoot a problem with their site, if I can't immediately see the problem or fix it using Firebug, I download the page as an HTML only file. Then you have to deal with pages that have relative links to code, style sheets or images:
<link href="/css/main.css" rel="stylesheet">
which you will probably have to use your editor to find and replace each one. A big time saver is using the apparently less known base tag, in which you add the base URL to the site.
<base href="">
Then if you need to modify a file for testing, just download it to your computer (e.g. your desktop), open it in your browser, then copy the URL. Replace the file's url with this one, since the relative URL will look to the base tag instead of your desktop:
<link href="file:///C:/Desktop/main.css">
Now when you open the page in your browser, it should look exactly like the online page.  :)