I was having trouble with a custom 404 page I created. Anyway, it all seems OK now, except, it seems like the CSS isn’t being completely applied to the webpage. An image in the top center doesn’t display, only a placeholder for it. Also, some of the text near the image near the top of the page is crunched together. In the Layout, I had placed some margins and padding to layout the page a little nicer. In my RW Preview, it looks exactly how I want it to. But the published copy has the problems I described above. Does anyone have any suggestions as to what is causing this? I really would appreciate any help as it is starting to drive me crazy. I really have been working hard on this, but I still can’t seem to get it just right. If you go to the site, and add text to the URL for a page that doesn’t exist, it pulls-up the custom 404 page. At least it does for me. I’ll put an example link here. Example of an invalid URL I tried to look at the source code, but I’m not that great with it, and I couldn’t tell what was wrong. Thank You!
If your host doesn’t allow this, another option is to set up a page in cPanel > Error Pages (or whatever your host offers). This will have some options for customising which, whilst not a styled RW page like your website, would still achieve the aim of something better than a standard 404.
A better way if you are publishing with page relative url’s, would be to redirect to the 404 page, instead of having it served from the incorrect url.
So instead of having this in your htaccess file :
ErrorDocument 404 /404.html
Put this at the end of your htaccess file :
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule . /404.html [L,R=301]
What does this do ?
The first line turns RewriteEngine on.
The second line sets a condition for the third line, ensuring that it’s a non-existant file and passing the requested filename (using a server variable (%{})).
The third line matches everything, replaces it with the path to your 404.html in the root, and sets two flags, the first (L) to stop any more rewrite rules from being applied, and the second (R=301) to force an external redirect using the error code 301.
Note: You need to make sure apache has ‘mod rewrite’ on and most web hosts do have this on by default otherwise you can ask your hosting provider if it’s not working.
I added the words (folder) and (file) so that you can see how they appear to me in my Transmit FTP program. I also added the permission numbers as they show as an octal: number, also in Transmit. The .DS_Store files are not showing in the published area, but they do show in my local list. I think that may be because they are hidden. I had them indented for you the way they show in Transmit, but that didn’t replicate in here - sorry. I think the elevator images is from the elevator stack I’m using from Joe Workman. So I believe the oops404.png is in the index_files folder (directory). I don’t think I applied an exact pixel size to the text, but I did apply some margins and padding to those text areas to make them look better on the page. Thanks for your help! I’m sorry for the delay, I was away all day.
I think my hosting is pretty flexible with what I can add. I already tried the 404.shtml page, but it kept pulling up a weird looking 404 page, and I did add it to the .htaccess file as you said. I think it was pulling up a page that was a little bit older that I tried to create just before I switched webhosts. My current host doesn’t have cPanel, but maybe they have something similar to try the Error Pages as you said. If I can’t get the current 404 page to work, maybe I can look into that. Thank You!
Concentrating on the two issues of why the image isn’t appearing, and the layout of the text:
1 - the image, oops404.png, either isn’t at http://www.educationoasis.com/index_files/, can’t be served because of the configurations described by @manofdogz, or have the wrong permissions; so I’d try setting oops404.png to 755
2 - in your margin/padding CSS try adding ‘px’ after the values you put in… Inspect Element when I looked last night says they’re missing… you have, for example, ‘margin:10;’ instead of ‘margin 10 px;’ etc
OK, maybe I should give this a try. But won’t that still lead to the current custom 404 page that I have, which means the formatting will still show up incorrectly? I’m sorry, but I don’t understand all this very well. it’s a shame that I have the custom 404 page all done and it’s just what I want, only that little bit of text won’t display properly along with the image not showing. Oh well, I’ll try what you said and see if that helps. Thank You!
The oops404.png image does appear to be in the index_files under the 404 folder under the errors folder. Isn’t that where it’s suppose to be? I don’t believe I have an index_files folder in the root, just a folder called files which I think is for the home page. I changed the permissions for the image file to 755, but it still isn’t displaying.
For the text area, I used a Text Stack. I just used the spinners to add some margin to all four sides in the Page Inspector. It just gives me a number; I don’t know how to add px to the values in RW. In the text stack area that says: “OOPS! Something went wrong. The webpage you’re looking for can’t be found. You may want to try a search, or one of the links below.” I just applied margins as: Top: 30 Bottom: 50 Left: 100 and Right: 100. Thank you!
When I do a Preview in RW, and when I do a Preview Page With . . . Google Chrome (or whatever) in RW, the page looks exactly how I wanted it to. It’s just the published one is messing up with the image and text alignment somehow. I’ll try to upload a screenshot here if it works so you can see how it’s suppose to look as it did in the Preview with a Browser. Thanks!
Interestingly, I have just created a dummy custom 404 page for a small live site. Set folder to root (/), gave it a filename of 404.shtml instead of 404.html, turn off in navigation obviously - and it works perfectly, no htaccess redirects or anything.
Just a small site - take a look: http:/kentwoodshavings.co.uk . add /anything you like and up comes my joke 404 page complete with all styling and a Pizza.
agreed but Cynthia’s didn’t appear to be pulling the CSS even at first level - which is why I figured that maybe adding .shtml would solve that problem at least if she has not been using it - maybe I missed part of the thread. using just .html didn’t work at all for me.
as @swilliam correctly stated - no htaccess rewrite stops the 404 from working properly (i.e. no css) when there is a deeper URL error. So I created a .htaccess file and entered:
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule . /404.shtml [L,R=301]
The correctly rendered 404 page now shows at any level of error. Hope this helps @cynthia - you’ve spent a lot of time on this!
Between customization of .htaccess files, your server’s setup and the correct paths and permissions in RW, I’m sure we’ll get this sorted out
For the moment, I’ll just circle back to the png:
The oops404.png image does appear to be in the index_files under the 404 folder under the errors folder. Isn't that where it's suppose to be? I don't believe I have an index_files folder in the root, just a folder called files
The way the URL you mention is coded does need a graphic called oops404.png in /index_files/ if that’s how you have custom 404s set up. If it’s not there, you’ll get a broken image question mark - as was happening previously, but you seem to have amended it tonight?
As a first step may I suggest that you manually upload an ‘Error’ page with the name 404.html to the root of your docroot, set its permissions to 755 and see whether it - graphics and all - displays when you enter: http://www.educationoasis.com/404.html
If it does, then you’ll need to force it to be the default 404 page by editing the .htaccess file as outlined here too.
If it does and the graphic still does not display, then we can troubleshoot that separately.
