Why is my CSS code not displaying properly on Firefox?

Question

This is the second time I ask this question, since when I first posted it, I have the files on a server not open to the public.
--
I'm learning CSS using the book called "Beginning CSS Web Development: From Novice to Professional" by Simon Collison, distributed by Apress.

I'm just in the first three chapters and I already have a display issue. The book's description shows up properly in IE but not in Firefox. There are nothing fancy yet, since it's still early in the book, but I feel I can't proceed unless I figure out what I did wrong three chapters into the book.

I downloaded most of the base templates from the apress website, and just followed along with the book. The result is here:

http://home.ca.rr.com/trashcanltd/cssclass/

The CSS files are here:

http://home.ca.rr.com/trashcanltd/cssclass/default.css
http://home.ca.rr.com/trashcanltd/cssclass/external.css
http://home.ca.rr.com/trashcanltd/cssclass/layout.css

Thanks.

For those that were not able to download the CSS files, here they are in text form. I could'nt add them earlier because of the character limit.

default.css

p {
color:#f00;
font-size:12px;
}

external.css

@import url("default.css");
@import url ("layout.css");

layout.css

#header {
height: 100px;
width: 100%;
border: 1px solid #999;
}

/* Container holds all visible page elements */
#container {
padding: 20px;
border: 1px solid #000;
background: #CCC;
}
/* Define styling of our reusable box */
.box {
margin: 10px;
padding: 20px;
border: 1px solid #000;
}

Answer 1

Firefox isn't seeing "layout.css". The only thing I can see different between the two import statements is the space between "url" and "(" in the second one. Try deleting the space and see if that does it.

If you haven't already, get the web developer toolbar for Firefox. It has handy links to CSS and HTML validators (among many useful tools). When I run your page it reports "Parse Error - url ("layout.css");".

I'd guess that space isn't supposed to be there, but IE is more tolerant of the error.

Answer 2

Yuchniuk is right: css is different on different browsers and even on different versions of the same darned browser. Best you can do is make it tolerably close, acceptable compromise sometimes. See CSS Hacks, or CSS The Definitive Guide for a few... IE is notorious for ignoring a few of the true standards. I have five browsers and can't get identical results in any of 'em...

Answer 3

Your problem is with the H1 element inside the header DIV. Mozilla properly retains the line-height, padding and margin for H1, while IE incorrectly inherits those attributes for H1 from the DIV.

Simply set your #header h1 element to have margin-top and padding-top of 0, and it will display properly.

Answer 4

Blue-ish BG: no longer displayed variety: no longer displayed 2 borders on left and the superb option: displayed tried with the two Firefox & Opera and that they displayed the comparable ingredient. wish this helps :)

Answer 5

CSS (and HTML for that matter) show up differently on different browsers.

On my website, I use a lot of CSS. I try to make it work the same in both browsers. I tried your CSS links and they do not work.

If you can give me more info, it would be a big help.

Contact me at http://www.yuchniuk.com

Answer 6

It looks like you got it working, cuz it looks the same now in both Firefox & IE (got boxes displayed where they didn't used to in Firefox).

Answer 7

Hi,

For starters, it would appears tha you are not
loading the css from the correct external urls.

This is where I actually found them!

http://home.ca.rr.com/trashcanltd/cssclass/css/

Maybe you shoudl fix this first, then see what happens? :o)