What am i doing wrong with CSS in Firefox?

•

What is DaniWeb IT Discussion Community?

You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 427,765 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,684 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our HTML and CSS advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 1687 | Replies: 5

•

Join Date: Feb 2006

Location: Leeds innit

Posts: 29

Reputation: punkrockbboy is an unknown quantity at this point

Rep Power: 3

Solved Threads: 0

punkrockbboy punkrockbboy is offline

Offline

Light Poster

What am i doing wrong with CSS in Firefox?

Jun 20th, 2006

I've been scratching my head on this all night, i'm trying to position in CSS a image in the {body} element (i hope that is the right term, i'm still new to all this).

Heres what i have right now:

Help with Code Tags

(Toggle Plain Text)

body {
background-color: #ffffff; 
     color:#000000;
     background-image: url(chapter11bkg.jpg);
     background-repeat: no-repeat;
     background-position: left bottom;
     }

No matter what i do i cannot get the "background-position: left bottom" part to work, thing is if i remove that part of the code the image will appear.

Now i use Mozilla Firefox to preview all changes i make to the CSS, when i tried it out in IE it did work though, is there a problem with positioning images in CSS in Mozilla? is there anything i can do to make it work?

Cheers.

Last edited by cscgal : Jun 20th, 2006 at 10:19 pm.

bboykrillin[DOT]com always under construction!!!

krillin art: cause i like to draws and stuff

•

Join Date: Dec 2004

Posts: 1,590

Reputation: tgreer is an unknown quantity at this point

Rep Power: 7

Solved Threads: 35

tgreer

Offline

Made Her Cry

Re: What am i doing wrong with CSS in Firefox?

Jun 20th, 2006

According the CSS specification, it's "bottom left", not "left bottom". Try that and let us know. You can't trust IE, it will do all sorts of wild things. You actually can't trust ANY browser if you don't have a proper DOCTYPE set in your pages. You have a partial, incomplete DOCTYPE.

•

Join Date: Feb 2006

Location: Leeds innit

Posts: 29

Reputation: punkrockbboy is an unknown quantity at this point

Rep Power: 3

Solved Threads: 0

punkrockbboy punkrockbboy is offline

Offline

Light Poster

Re: What am i doing wrong with CSS in Firefox?

Jun 21st, 2006

Hey thanks for the reply, i tried changing the CSS to "bottom left" as you suggested but it made no difference, Mozilla still wont display it but IE will, it's very frustrating.

This here is my DOCTYPE:
[html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Chapter 11</title>
<link rel="stylesheet" type="text/css" href="chapter11.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>[/html] Incidently, i found this site the other night while trying to figure out a solution and it presents the same problem, when i use Mozilla the background image does not display correctly at all (the image is told to display "center" but it appears at the top of the page, with only half visable) but works just fine in IE:

www.w3schools.com

Last edited by tgreer : Jun 21st, 2006 at 8:14 pm.

bboykrillin[DOT]com always under construction!!!

krillin art: cause i like to draws and stuff

•

Join Date: Dec 2004

Posts: 1,590

Reputation: tgreer is an unknown quantity at this point

Rep Power: 7

Solved Threads: 35

tgreer

Offline

Made Her Cry

Re: What am i doing wrong with CSS in Firefox?

Jun 21st, 2006

Yes, that doctype isn't complete. Read this article on doctypes.

The problem you've encountered is related to the "box model", and each browser has a different one. Consider this zen-like question: where is the "center" of an empty element? How do you align a round smiley face with the bottom of something?

You can see there are lots of ways to answer those questions, and when a browser answers them in a way we don't expect, we're puzzled.

So here are my suggestions:

Don't use the "background-position" attribute.
Don't use a background image at all in the "body" tag.
Do use a DIV or SPAN to contain your image.
Do use the CSS "position" to control that SPAN or DIV.

Last edited by tgreer : Jun 21st, 2006 at 12:13 pm.

•

Join Date: Feb 2006

Location: Leeds innit

Posts: 29

Reputation: punkrockbboy is an unknown quantity at this point

Rep Power: 3

Solved Threads: 0

punkrockbboy punkrockbboy is offline

Offline

Light Poster

Re: What am i doing wrong with CSS in Firefox?

Jun 21st, 2006

Yeah cheers for that, i must admit i wouldn't normally use the "background position" attribute, but it's part of a tutorial in chapter 11 of this book i am reading right now (HTML with XHTML and CSS - fifth edition - by Elizabeth Castro) and it never mentioned any problems like this that i might encounter, so thanks for your help.

I have to admit, i can't wait to get a better grasp on all this CSS stuff, right now it's all very frustrating, i'm more of an artist, i see things visually, not in code, but if i want a job as a web designer i need to understand this kind of thing, oh well, back to the books!

Thanks again! :mrgreen:

Last edited by punkrockbboy : Jun 21st, 2006 at 6:02 pm.

bboykrillin[DOT]com always under construction!!!

krillin art: cause i like to draws and stuff

•

Join Date: Dec 2004

Posts: 1,590

Reputation: tgreer is an unknown quantity at this point

Rep Power: 7

Solved Threads: 35

tgreer

Offline

Made Her Cry

Re: What am i doing wrong with CSS in Firefox?

Jun 21st, 2006

You're quite welcome. That is a good book, though, to start with. It's a good foundation, you just have to learn the real-world lessons. Feel free to post any other questions you have.