ErrorDocument 404 not working with routing - .htaccess

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.