CSS may not be applying to my page


(Cynthia Taylor) #1

Hello,

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!


(Mark Sealey) #2

Cynthia,

What is in /index_files/ on your server; and what are its permissions?

Is oops404.png in that directory?

That’s the graphic that’s supposed to load at the top centre.

Have you specified the units (e.g. pixels) in any custom CSS you’ve applied to the text, ‘OOPS! Something went wrong…’ ?


(LJ) #3

Part of the problem with custom 404’s is what your host will allow. Some will be OK with redirected 404’s and others not.

At it’s simplest, you could call your custom page 404.shtml or 404.html and see what happens.

If this doesn’t play ball you could add:

RewriteEngine on
ErrorDocument 404 /404.html

to your .htaccessfile. This would redirect the standard 404 page to http://www.educationoasis.com/404.html

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.


(LJ) #4

Found this from doobox in another post:

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.


(Cynthia Taylor) #5

hello,

This is everything that is in the errors folder where the custom 404 page resides:

errors (folder) 755
.DS_Store (file) 644
404 (folder) 755
.DS_Store (file) 644
index_files (folder) 755
elevator-images (folder) 777
.DS_Store (file) 644
top.png (file) 777
oops404.png (file) 644
stacks_page_page200.css (file) 644
stacks_page_page200.js (file) 644
index.html (file) 644

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.


(Cynthia Taylor) #6

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!


(Mark Sealey) #7

Cynthia,

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


(Cynthia Taylor) #8

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!


(Cynthia Taylor) #9

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!


(Cynthia Taylor) #10

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!


(LJ) #11

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.


(scott williams) #12

@manofdogz, but what happens if you have an error that is deeper than the root, like …/contacts/bad_page?


(LJ) #13

no worky any more…


(scott williams) #14

That’s why you need the .htaccess rules or rewrite


(LJ) #15

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.


(scott williams) #16

I fought with mine in the beginning hence the other thread.
I’m not clear if she has the actual 404 file in the root, I suspect not though.


(LJ) #17

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!


(LJ) #18

Glad I saw this thread - I really should set up custom 404’s for my client sites - now I know how to!


(scott williams) #19

I had what I think is the same problem as @cynthia

Mine started working when I put the full url to the error page in the .htaccess file. Http://…/… Whatever the path and file name is.

Later do box showed me how to put the rewrite rule in.


(Mark Sealey) #20

Cynthia,

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 :slight_smile:

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.

If it does not, then something else is going on.

Good luck!