PDA

View Full Version : Temporary image not centering in firefox?


LeoNeo
03-10-2006, 01:14 PM
Hi all,

I've had to place a temporary image centred in the middle of the browser for someone that I have to design their website.

I'm using CSS for the centering and it looks fine in IE but in FireFox it's in the middle, at the top with the top half missing.

Have look if I've confused you in someway

www.m40media.com

Now can someone help solve this problem?

Here is the CSS code I'm using

body {
background-image: url(m40media_temphome.jpg);
background-repeat: no-repeat;
background-position: 50% 50%;
}
#wrapper {
position: absolute;
height: 500px;
width: 700px;
left: 50%;
top: 50%;
padding-top: -250px;
padding-left: -350px;
}


Thanks :cry:

d a v e
03-10-2006, 01:43 PM
looks like the negative padding values
http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A%2F%2Fwww.m40media.com%2F

LeoNeo
03-10-2006, 01:50 PM
Changed them but still no joy in FireFox :?:

d a v e
03-10-2006, 02:05 PM
strange...

anyway this works

xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>index</title>

<link href="index_files/layout.css" rel="stylesheet" type="text/css" /></head>
<body>

</body></html>



and for css


body {
background-image: url(../m40media_temphome.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
}
and point it to wherever your image ;)

it's the fixed background that makes the difference

LeoNeo
03-10-2006, 02:19 PM
strange...

anyway this works

xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>index</title>

<link href="index_files/layout.css" rel="stylesheet" type="text/css" /></head>
<body>

</body></html>



and for css


body {
background-image: url(../m40media_temphome.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
}
and point it to wherever your image ;)

it's the fixed background that makes the difference

What do you mean point it to wherever your image ;)

I don't understand what you mean? :?

d a v e
03-10-2006, 02:21 PM
i mean in the css check that the pathway to the image matches the image relative location on your site, as i saved it to my desktop and put it a different folder

LeoNeo
03-10-2006, 02:43 PM
d a v e

Thanks for your patience in this, but I am not gettin any joy.

Maybe it's me not know how to do it even though it sounds simple

This is what i have done

xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>index</title>
<link href="index_files/layout.css" rel="stylesheet" type="text/css" />
</head>

<body>
</body>
</html>

CSS

body {
background-image: url(www.m40media.com/htdocs/images/m40media_temphome.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
}

Once again thanks!

d a v e
03-10-2006, 02:55 PM
everything is here
http://members.tiscali.fi/dave_pirjo/test-area/m40/m40.html

LeoNeo
03-10-2006, 03:21 PM
Sorry mate but ain't got a clue what I'm doin. :oops:

body {
background-image: url(www.m40media.com/htdocs/images/m40media_temphome.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
}

I think the only thing I am stuck on is the path__ background-image: url(www.m40media.com/htdocs/images/m40media_temphome.jpg);

I can't work out the path, surely theirs two paths one for local the other for remote.

Could you paste up your CSS with your path so I can get an idea of what to do please.

Once gain :oops:

d a v e
03-10-2006, 03:46 PM
no problem! we'll get you there in the end :)

body {
background-image: url(m40media_temphome.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;

}

if you place the image in the same directory as the html page then it will right

LeoNeo
03-10-2006, 04:14 PM
Finally!!!!!

Thanks d a v e

I had the image in a seperate folder. :D

Also I was getting confused with

(../m40media_temphome.jpg)

and

<link href="index_files/layout.css"


Silly me.

Thanks for your help and patience sir.

You da Guv'na

:D

d a v e
03-10-2006, 05:07 PM
welcome. why not use something like topstyle lite for your css?
http://www.bradsoft.com/download/index.asp
it's free and it makes it easier to write your stylesheets 8)

LeoNeo
03-10-2006, 06:40 PM
Just downloaded it mate.

By the way is better using this than using Dreamweaver do think :?:

d a v e
03-10-2006, 06:58 PM
well dreamweaver 8 has pretty solid css support and authoring, but i still prefer to fire up topstyle

LeoNeo
03-11-2006, 05:05 PM
Ok cheers for your advice d a v e!

Really appreciated!!!!!