Mozilla, backgrounds and CSS

[Miisa]

I was wondering if any of you fine, brainy, wizard-like people could help me out?

I am making a website right now with multiple pages, and am using CSS to make the pages unified yet easily changable. But I am having problems with the background. It shows up just fine in IE and Opera, but not in Mozilla browsers (Netscape or Firefox). Neither the background image or color will work.

Do I really have to add the background to every single page or am I just doing something wrong?

Thanks for any hints.

[fragment]

That sounds odd, you can certainly add background colours and images in CSS that work across all browsers. The most basic way is:
body
{
background-image: url(background.gif);
background-color: red;
}
Is this how you are doing it? Do you have any content on the pages you're trying out so far?

[Miisa]

That looks essentially the same as my attempts:

body {
background-image:url(pics/L2.jpg);
background-color: #FAF0E6;
}


As I said it all works fine on the other browsers, and also the tables show up fine, but they have their own tags on each page to specify color and background. (I should really figure out a way to put those definitions on the CSS file, too, I just haven't got that far yet)

[fragment]

That looks like it should work - and a basic test page I just made up works in Firefox for me. I'm guessing some other CSS or HTML statement is preventing the background from appearing in Mozilla browsers - but I don't know what it could be. Usually Mozilla has the most well-behaved CSS, but obviously not in this case!

What I usually do in this kind of situation is try to identify the problem through a process of elimination. I'd start with a content-free html file and a style-sheet that only contains the background definition, and add everything back in one piece at a time until finding the problem. If you don't feel like doing that, I'd be happy to have a look for you (it's a rainy afternoon here!) just post the stylesheet and the html or point me to the URL if it's online.

[Miisa]

I'll give it a try. :)

[Miisa]

Ok, at first I panicked, because I couldn't even get a background color to show up in the most stripped form, but then I realised it had to be something to do with how the HTML document an CSS file were communicating. Couldn't find anything wrong with the HTML, so turned in deperation to the CSS. Because the other browsers hadn't complained, I hadn't reacted to that the "<!--" commands couldn't be in an external CSS file.:doh: I removed them and all was well. :)

Thanks, I feel so much better! :hug:

[fragment]

Glad you found it so easily and all's well. I didn't know that browsers treat "<!--" differently in CSS files. There's a few of these lovely little cross-browser quirks, welcome to the world of bashing your head against them!

(Actually, most commonly used things are pretty consistent across browsers these days, it's only occasionally that you'll turn up something like this.)

What's the website, Miisa? Are you going to post a link for us FFers when you're done?

[Miisa]

Actually, I am simultaneously doing a page where I have gathered up a bunch of word, excel, etc. files for my school, so I can put them all on a CD and have them easily accessible, and re-doing my homepage without those pesky and (apparently) distasteful frames.

The home pages will be similar in appearance to my current ones, but of course with the new formating and newer pictures, etc., and seems to be taking a while, especially as I don't have much time to do it, what with everything else.

But my school ones are basically ready, I am mostly still working on the content documents at this point. I already have it uploaded so I could ask my teachers to comment, it is here (http://www.geocities.com/ecmiisa/school/index.html), but I doubt if it will do you much good, as it is in Finnish. ;)

[fragment]

Well, I can't read it, but it looks nice! Simple, clean design, nice colour palette, and I like the image at the top.

As an aside, it's common practice to use languages the intended audience are unfamiliar with to demonstrate design ideas. It gets people to focus on the visual look and not on the content. Nonsense Latin, called lorem ipsum (http://www.lipsum.com/), is often used for this purpose, but I've worked on a couple of websites where the designer used his native Swedish. Now I can say that Finnish is equally good. :)

[Miisa]

Thanks! I planned out the colours after the picture (taken of a cliff in Ireland and then textured a bit). I want the primary function to be easy access to all the pages and documents, but prefer to have separate pages for each topic, rather than everything crammed on one page.

I have seen the lorem ipsum on pages occasionally when tying to teach myself stuff from various online tutorials and guides, but I hadn't realised it was a common practise. I bookmarked the generator, as I should take it up some time myself, too; usually I just write a rambling sentence in English and copy it several times. Having real paragraphs of different size and content would indeed be better when just testing the functionality of the page.

[JoeP]

Nice looking web page!

Don't you need a space between (eli Miisa) and ja? And something has gone wrong in the last para - täält&auml. There should be an extra semicolon ... täält&auml;.

[Miisa]

Yup, thanks, Joe. The missing space came from me removing my last name for "publication" here ;)

And I keep missing the &auml;'s, or parts of them, they are a royal pain in the posterior (some of the other pages have much more text). Luckily I have three weeks until it is due. I still have to cook up a company's balance sheets and all that other tedious business stuff. :(