Solved

Firefox centering problem

Posted on 2004-08-08
9
995 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

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 67
Are these icons a web font? 3 23
toggle content 12 29
center navbar (navigation menu) on web page 3 26
When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…

730 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