Strange padding in div

[Anonymous]

Greetings,

Why is there what appears to be padding in the div just above the words 404 Error on this page?

When I add padding it throws everything noticeably off. Also, is there a better way to control the spacing between paragraphs? When I add padding the margin is applied as well. I’m assuming there’s a better way and have been searching, but I’m not sure what I’m looking for, so my search terms are likely off.

Best Regards.

[paulob]

Hi Michael,

I’m not seeing any padding above the words ‘404 error’ apart from the normal line-height. Or is that what you meant?

To control the spacing of the p element you are better of using margins as then you can utilise the collapsing margin behaviour when they meet other elements that may have greater margin on them. If you use vertical padding then that will not collapse with the margin of following elements and generally you want your margins to collapse (although not always).

Just set something like p {margin:0 0 1em} and you will be fine. Also remember that margins will pass through the top or bottom of a parent if nothing is in the way so for example you may want to add a 1px padding top and bottom to your div to stop any margins pushing through the element.

I see you have used text-indent but that will only indent the first line of text so again you would be better off using margins f you want the whole p element to have a gap at the sides.

Were the words “Off Coarse” supposed to be “Off Course” or were you dong some play on words?

[Anonymous]

Greeting Paul,

I wondered if that space had something to do with the line height but didn’t mess with that as I dismissed it in the end.

The text indent is something I had just learned about and had been applying it on a few pages I have been working on. I’m not sure it’s useful on a page with so few lines.

The use of the word “coarse ” was an inside joke to myself and I didn’t correct it before putting the page on the server. I’ve been having trouble with the background image loading slow. I interlaced it to see if that would improve things and it looks “rough” starting out and thus the use of “coarse”. I’m still not happy with it an will likely go with code to preload the image on the main page so it will be available. I have one other large background that will cause similar issues I’m sure. I will change the word coarse with course to get me back on the correct path.

Is all of the code before line #327 needed for a page like this?

Best Regards.

[paulob]

I’ve been having trouble with the background image loading slow

That image is 1200k and that’s more than all the resources I’d use for most small sites :) You certainly don’t want a 1200k image for your 404 page and you don’t want to pre-load it on your home page either as that makes every user suffer the consequences.

I just optimised the image into Fireworks and even at 120k it looks presentable but even then I would still wince at using 120k image! No one will care if the 404 image is a little grainy (and indeed for that particular image it adds to it rather than detracts) but they will certainly complain if you add a 1200k image!!

You can’t go for print quality on the web unless you want to alienate your users especially on a 404 page. The user should be told quickly and efficiently they are on the wrong page and not have to wait for a 1200k image to load to be told that.

Is all of the code before line #327 needed for a page like this?

No most of that code would not be necessary apart from the body margins. You should have the css external anyway so that it is cached on the home page. However if you have not followed the same theme into your 404 page then there is no need for that file and a shortened version would be fine (as users may arrive there by accident anyway if they had typed something incorrectly even before visiting the home page).

[Anonymous]

Greetings Paul,

I’ve deleted most of the CSS and the page appears to be ok. I also added a better looking background image and manipulated the colors a bit. It’s still a large file but seems to load faster on my side. I have a very good ISP. The updated page is here. Thoughts?

Best Regards.

[paulob]

Hi Michael,

Yes that’s much better and a 1/4 of the filesize of the other one.

Even though it may not seem as important these days you have to keep a careful eye on page weight.

[Author]

Posts