[Solved] Real problem centreing images in Firefox/Safari

I don't know if this is how it works, but when I had a problem like that it turned out to be because the thing I was using 'text-align: center;' on didn't really know what I was on about.

See, I think when you set text-align, you're saying "Anything within this should be aligned" but of course, there is nothing within the image. Instead I'm thinking you'll be wanting to use margins to center the image.

I'll have to check that though...

mmm...interesting...well, I'm not 100% sure if I'm catching what you trying to do, but I'm gonna give it a shot anyway, ok?

what you could do, is apply a class to the image or the div that contains the image, lets call that, '.imagePosition'. and lets say that the image has a width of 100px.

So basically, wat you'd do is position the class at 50% from the left, and then set the left-margin to '-100' (half of the images width), this will bring the image into the center of the page!!

so something more like this:

.imagePosition
{
position:relative;
left:50%;
margin-left:-100px;
}


I hope thats what you trying to do...i know that this way of doing things works pretty much on all major browsers.

Or if you went with PeterPans suggestion of creating a div to hold the image in, you could then just do this...

.imagePosition
{ 
text-align: center;
}

But you probably don't want a seperate div JUST to contain an image do you?

Try #header {text-align: center;} and remove display: block from the img declaration. text-align: center only works on inline level elements which img normally is but you've got it declared as display: block for some reason (may i as what that reason is?).

If you must leave it as display: block for some reason then you will need to do something like this:
#header img{
display: block;
width: 200px; /* or whatever the width of the image is */
margin: 0 auto;
}

sorted it! thanks so much guys....i just did what triumph said and removed the display: block; line and hey presto it works!