View Full Version : 404 custom page styling problem

06-18-2010, 11:20 AM
Hi guys,

I've set up a custom 404 error page, in case old links are referring to content which has been moved or deleted.

Now I have a small problem here for which I am not able to find an answer on google. The 404 error page shows correctly in the root with the right styling. But when I am in a sub directory, no styling is used. Just the plain text, which look rather silly. Locally (on my workstation) the 404 pages within directories are styled correctly, but online not.

To summarise:

www.test.com/404 shows and works correctly. But add an extra '/', as in www.test.com/wronglink/wronglink2 the 404 error page loses its styling.

How do I fix that?

Code .htaccess:

ErrorDocument 404 /404.html

edit: not sure where to put this thread. So I put into the category where I found the most 404 questions. I apologize if this is the wrong thread.

06-18-2010, 11:35 AM
Could you post the html source of your 404.html page?
I think it's something to do with the path of CSS/image files. The use of absolute paths to refer all files from the client side may solve the issue. Take a look at the post at http://www.codingforums.com/showthread.php?p=784167#post784167

06-18-2010, 12:24 PM
You mean like this?

<?xml version="1.0" encoding="iso-8859-2"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<link rel="shortcut icon" href="images/faviconproducts.ico" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>******* </title>
<meta http-equiv="Content-Language" content="en" />
<meta name="description" content="******* " />
<meta name="keywords" content="******* " />
<meta name="robots" content="index, follow" />
<meta http-equiv="Page-Enter" content="revealtrans(duration=0.0)" />
<meta http-equiv="Page-Exit" content="revealtrans(duration=0.0)" />

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie6-and-down.css"" />
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie7.css" />
<!--[if gt IE 7]>
<link rel="stylesheet" type="text/css" href="css/css_stylesheet.css" />
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="css/css_stylesheet.css" />

<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-833604-5']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);



<div id="shadow_container">
<div id="shadow_top"></div>
<div id="shadow_center"></div>
<div id="shadow_bottom"></div>

<div id="main_container">
<div id="logo_products">
<a style="display:block;height:100%;width:100%;" href="index.html" title="Back to startpage"></a>

<div id="main_navigation">
<li><a href="index.html" class="products">HOME</a></li>
<li><a href="products.html" class="products">PRODUCTS</a></li>
<li><a href="about.html" class="products">ABOUT</a></li>
<li><a href="stores.html" class="products">STORES</a></li>
<li><a href="news.html" class="products">NEWS</a></li>
<li><a href="contact.html" class="products">CONTACT</a></li>

<div id="artwork_container_products">

<div id="main_opacity">

<div id="sub_navigation">
<li><a href="index.html" class="products_small">WHAT THE ...</a></li>

<div id="subject">
<p class="products_subject">404 Error</p>

<div id="content_products">
<h1><a class="playsets" href="index.html">Link not found!</a></h1>
<a href="index.html"><img src="images/snail.jpg" class="imagecenter1" title="Snail"/></a>
<br /><p>Oops. The link you just clicked has been moved.</p>
<p>Try this <a href="index.html" title="******* "><strong>link instead.</strong></a></p>



I've also noticed the links do not work either [online, locally everything works great].

09-21-2010, 08:37 PM
I finally found a solution to me 404 problem (no styled 404 in incorrect links with subdirectores, like www.yoursite.com/wrong/wrong.html).

Normally I don't like bumping old old posts, but this was a serious problem for me to justify the bump. Naturally, with solution. :thumbsup:

ErrorDocument 404 /notfound.html
ErrorDocument 404 http://www.yoursite.com/notfound.html

Text in purple is new added line in the .htaccess file. I read somewhere this is not the perfect solution, but it works for me in FF and IE. I think you can delete the first line, but it is not bothering me.