ErrorDocument 404 not working with routing

Question

I tried using this code on .htacces to have my own custom 404 on my page,.

ErrorDocument 404 http://mysite.com/404.shtml

when i visit the page that does not exist on the site. it must show something like this

but this is the one it shows

here is my complete htaccess

<files .htaccess>
    order allow,deny
    deny from all
</files>
php_value memory_limit 170M

RewriteEngine on


Options +FollowSymlinks
Options -Indexes



RewriteCond %{REQUEST_URI} (.+)$  [NC]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
AddDefaultCharset utf-8
RewriteRule (.*) index.php

RewriteEngine on 
RewriteCond %{HTTP_HOST} ^www.mysite.com.*$ [NC]
RewriteRule ^(.*)$ http://mysite.com%{REQUEST_URI} [L,R=301]  

ErrorDocument 404 http://mysite.com/404.shtml

The location of my htaccess is located along with the 404.shtml and the index.php of the site

Removing this code would fix the problem. How can i make it work with routing.

   RewriteCond %{REQUEST_URI} (.+)$  [NC]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    AddDefaultCharset utf-8
    RewriteRule (.*) index.php

Answer 1

Instead of referencing the entire url with ErrorDocument 404 http://mysite.com/404.shtml, name the document relative to your web root. In this case, /404.shtml.

Answer 2

Use these codes in your .htaccess for capture 404 error pages.

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /404.html [L]
</IfModule>

Now your all 404 requests will goto /404.html. You can also use /404.php to code more dynamically. Also make sure that rewrite module is enabled in your apache.