Firefox centering problem


I'm having problems using CSS to center an image with Firefox.  The site seems to be OK with IE6 . 2800, so perhaps it's my understanding of cross platform CSS nuances that's the problem.

What I don't understand is that whilst the "gallery" page on the site centers OK (though the JS browser detection needs a clean up), I can't seem to find any combination of CSS that will center the image on the "index.html" page correctly in firefox.

The site was a gift for friend and is non-paying so I haven't had huge amounts of time to investigate this yet.

The site is at

I think the problem may be in the p.image class section in the CSS stylesheet.

Because the site is for a photographer, lots of people that are likely to view it are Apple fans, so good cross platform compatibility is my required end goal.

I'd like to tidy up the gallery for non-IE6 viewers too, the CSS and JS browser detection in there is a bit lumpy, but that's another question I guess.

Any suggestions are welcome.
Who is Participating?
ZylochConnect With a Mentor Commented:

Try adding this to your p.image style:


wesbirdAuthor Commented:
Thanks Zyloch,

That will be an easy 500 for you I guess.

We'll return to the other thread about buttons tomorrow.

Out of curiosity, why did this work?  Any comments about the gallery?
I must say the gallery is pretty neat, especially the transitions ;)

This worked because text-align:center only really works for IE because its CSS support developer terms...crappy.

To tell the truth though, I'm not quite sure why it has to be display:table or even if it has to be display:table. sean could probably tell you that if you keep this question open a bit more. I know the margin:auto; will set the margins to be equal on both sides and therefore centering it.

(Just out of curiousity, try changing display:table to display:block or display:inline; just to see what happens)
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

wesbirdAuthor Commented:

seems like IE behaves differently to firefox on display:block.

I'll leave this open just in case Sean can enlighten us a little more.

Cheers until tomorrow.  Time for food.
mreuringConnect With a Mentor Commented:
Hmm, had a look at it:
p.image {
      font-size: 0.8em;
      text-align: center;
      color: #7d6340;
      padding: 1.25em 1.25em 0.25em 0.25em;

p.image img {
      display: block;
        margin: 0 auto;
      border: 0px solid #7d6340;

Does the trick too you know :) Saves you from some hacking around.
To explain, it's the image you wanted centered, but at the same time you wanted some text in the same (P)element not to be on the same line as the image (which would be seen as a single character at this time). If you then make the image 'display:block;' the text will move to the next line, but the image should no longer be centered, as it is no longer text (display: inline would make it text again). This is where IE goes wobbly, so to speak, IE continues, succesfully, to try and center the block-type element. For CSS2 browsers you can add the 'margin: 0 auto' to center the block-type element, et voila.
Extra info: 'float: absmiddle' That's not valid CSS2, it's possibly a microsoft extention, I've never heard of it in floats though.

 Hope this helps,

seanpowellConnect With a Mentor Commented:
Well - I do have some questions in the meantime, if that's okay.

What's up with these? None of them are valid CSS...

xxborder: 10px inset red;
xxborder-width: 2;
mmargin: 1em 0;
ppadding: 10px 0 10px 10px;
align: left;
align: center;
align: right;
border: 1;
float: absmiddle;

Also, all your ul headings:

<div><a href="#">Reviews of Susie's Work</a></div>

should just be this:

<li><a href="#">Reviews of Susie's Work</a>


<li><a href="javascript:Popup('')"><font style="font-size: 80%">Site Design</font></a></li>

Out with the old, in with the new...

<li><a href="javascript:Popup('')"><span style="font-size: 80%">Site Design</span></a></li>

The tables around the images - they can go too :-)

This is sufficient:

<div id="cont0">
      <img id="pic1" onload="javascript:Loaded();" src="javascript:FirstImage();">
      <p id="cap1"></p>
<div id="cont1">
      <img id="pic0" onload="javascript:Loaded();">
      <p id="cap0"></p>

Time for booze...
Wow, how do you find these things anyways? Anyways, I just saw the weirdest question in the world. The person asked: How do you close Internet Explorer and accepted the person who said to click the X in the top right hand corner... Now that's an odd question if I ever saw one.
>> how do you find these things..
A Really Big Flashlight

>>who said to click the X in the top right hand corner
That's interesting, I always wondered what that was for. Learn something new everyday :-)
wesbirdAuthor Commented:
Hi Sean,

about this rubbish:

xxborder: 10px inset red;
xxborder-width: 2;
mmargin: 1em 0;
ppadding: 10px 0 10px 10px;
align: left;
align: center;
align: right;
border: 1;
float: absmiddle;

Yes, that's exactly what it is -- the xx and mm and pp stuff is a relic from debugging that I should have removed from the production page.  I was using borders (by removing the x!) to debug where exactly things are appearing and I need to ditch this ASAP.

As for the <font>, can we just pretend that didn't happen until I fix it ;-)


Not sure where the absmiddle appeared from.  It was probably some attempt at wishful thinking in absence of my understanding at the time.

Thanks for the review everybody.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.