background-position: left bottom; - Works in IE but not FF!

[anagoge]

Hey, I'm sure you good people will be able to help me out with this small problem. I have a background set to left bottom with no tiling. It works fine in Internet Explorer, but not Firefox.

Here's the webpage: http://www.openme.co.uk/aj/index.htm

Here's the body css:

body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 5px;
background-color: #f4efe9;
background-image: url(smile_05.jpg);
background-repeat: no-repeat;
background-position: left bottom;

Many thanks.

Oh, and one more thing. Why does Firefox not seem to let me use margin-bottom: 5px; but Internet Explorer does? Any help with this also?

[Bill Posters]

The image is correctly tucked into the bottom left corner when I view the page in FF1.0.4/Mac.
Also, I've just double-checked FF with body { margin-bottom: 5px; … and seems to be adding it properly.

Have you made any adjustments to those declarations recently? It may be that you need to refresh the page from the server (rather than the browser cache).
You can do this by holding down the control key when clicking on the refresh button (command for mac).

[anagoge]

Hmm that's very strange.

I'm using Firefox 1.0 on Windows and it's not showing the image or margin-bottom. As for the cache, I'm afraid that's not the issue, since that webpage is hosted on my computer anyway.

I'm about to download FF 1.0.4 now to see if that's why, but I know that's likely. Very strange.

[_Aerospace_Eng_]

The bottom 5px margin doesn't work for me. You could try putting it in the html css instead.
html {
margin-bottom:5px;
}
And yes the image works fine for me using FF 1.0.4 PC

[anagoge]

Just tried to install 1.0.4 and it wouldn't work for me so I'll have to look into why I can't install it. I don't see why a minor version change would be the issue with this though, it's straight forward CSS.

Does anyone happen to be running Firefox 1.0 or earlier that could confirm whether it's working or not?

[IKLOP]

According to w3schools (http://www.w3schools.com/css/pr_background-position.asp) the order should be "bottom left" instead of "left bottom". I wouldn't think the order matters, and it doesn't seem to in 1.4, but maybe 1.0 was more strict about it.

[anagoge]

That was the next thing I was going to try. Sadly it doesn't seem to work to though.

background-repeat: repeat; seems to work for some reason, but of course that's no good to me. Has to be no-repeat. I haven't got any more ideas!

[Pegasus]

What about putting the position as a percentage?

background-position: 0% 100%;

Would that work?

Peg

[anagoge]

Just tried your suggestion, Pegasus, but it didn't work.

[Pegasus]

You cleared your cache and everything? One of the suggestions made should have worked.

What happens when you remove this:

"http://www.w3.org/TR/html4/loose.dtd"

from the doctype?

Peg

[anagoge]

As I said, the file is hosted on my computer so the cache is not an issue. I can view the page locally, but it still doesn't show that bottom image.

Also, removing the doctype was one of the first things I tried, as I'd been able to solve problems in the past by doing the same thing. However, this time it didn't work.

[Pegasus]

Thing is, I see the bottom image. You have one with a happy face on the left at the top and a happy face on the right at the bottom. Hmmm....

[anagoge]

What version of Firefox are you using? As has been said by Bill Posters, he can see it using 1.0.4. I'm using 1.0 and can't see it.

[Pegasus]

I'm using Netscape7 on a Mac.

[_Aerospace_Eng_]

I do remember FF 1.0.1 having problems with background positioning, but that was on a PC. Peg and Bill are both on Macs. Change this
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 5px;
background-color: #f4efe9;
background-image: url(smile_05.jpg);
background-repeat: no-repeat;
background-position: left bottom;
}

to this

html {
margin:0 0 5px 0;
padding:0;
background-color: #f4efe9;
background-image: url(smile_05.jpg);
background-repeat: no-repeat;
background-position: bottom left;
}
body {
margin:0;
padding:0;
}
See if that works.

[anagoge]

ARGH that doesn't work either. I really appreciate all of your help, but it's just not working still. Aerospace, I've added the CSS you suggested and I've left it like that for you to see for yourself, but it's just not working.

[anagoge]

I managed to install Firefox 1.0.4 and the background works. However, surely it should work anyway on 1.0?

Many thanks for your help anyway.