Solved

Firefox centering problem

Posted on 2004-08-08
9
994 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
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
align Linkedin sign to the right page 5 55
Bootstrap show icon when mobile text when computer or tablet 3 60
Change box shadow 1 29
Insert Button on a table 16 38
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

837 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