Inconsistent #include css look

Question

For some reason, I'm having a problem with these two pages on my website that should have some elements look the same, but for some reason, they look a little bit different.

I have some included asp files which are linked to the same CSS files, so that is why I believe they should be the same. The spacing looks off on the about.asp page though. The index.asp page looks great, however.

Here are the two pages:

http://www.marioplanet.com/index.asp
http://www.marioplanet.com/about.asp

Any ideas as to why these are kind of screwy?

Answer 1

Looking at those pages with Chrome's devtools (or Firebug in Firefox) will show that the SlideShow.css in index.asp has a * style in it (that is, every element) to set padding to 0, which makes the padding and margin of your body (and everything else) zero.

This is very bad practice on the part of whoever made SlideShow.css, and is what is mostly screwing up your layout. An css include that is intended to be used modularly (as with a drop-in slideshow) should never use a * style block, because that affects every element in the page. It should have all of its style blocks prefixed with some class to limit its effects to the slideshow module.

Looking at your SlideShow.css, it looks like you may have pasted in some CSS from elsewhere, which is where it may have been introduced. You also shouldn't include <style> tags in external CSS files.

If you remove the SlideShow.css include, your pages should look much more similar. From there, you can edit SlideShow.css to remove the * style and add the include back in, making sure it doesn't screw everything up again, but still lets your slideshow do its thing, or just find a different slideshow module.

Answer 2

There is extra spacing on the about page, because the spacing gets removed by a style in SlideShow.css on the index page:

* {
    margin:0;
    padding:0;
}

The above looks like a simplistic implementation of a reset.css style.