Solved

Firefox centering problem

Posted on 2004-08-08
9
993 Views
Last Modified: 2008-02-01
Hi,

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 http://www.pencilofnature.co.uk

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.
0
Comment
Question by:wesbird
  • 3
  • 3
  • 2
  • +1
9 Comments
 
LVL 36

Accepted Solution

by:
Zyloch earned 300 total points
ID: 11747652
Hi

Try adding this to your p.image style:

display:table;
margin:auto;

Regards,
Zyloch
0
 
LVL 7

Author Comment

by:wesbird
ID: 11747701
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?
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11747732
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 is...well...in 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)
0
Is Your AD Toolbox Looking More Like a Toybox?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

 
LVL 7

Author Comment

by:wesbird
ID: 11747794
hmmmm,

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.
0
 
LVL 17

Assisted Solution

by:mreuring
mreuring earned 50 total points
ID: 11747954
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,

 Martin
0
 
LVL 31

Assisted Solution

by:seanpowell
seanpowell earned 150 total points
ID: 11748045
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:

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

should just be this:

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



And...

<li><a href="javascript:Popup('http://www.networkdevelopers.co.uk')"><font style="font-size: 80%">Site Design</font></a></li>

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

<li><a href="javascript:Popup('http://www.networkdevelopers.co.uk')"><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>
<div id="cont1">
      <img id="pic0" onload="javascript:Loaded();">
      <p id="cap0"></p>
</div>

Time for booze...
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11748052
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.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11748069
>> 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 :-)
0
 
LVL 7

Author Comment

by:wesbird
ID: 11752280
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 ;-)

mreuring,

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.




0

Featured Post

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

823 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question