Solved

Firefox centering problem

Posted on 2004-08-08
9
992 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
 
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
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Help in CSS 5 36
Newbie CSS questions 4 25
Add code to body in wordpress site 8 37
Problem to ToolkitScriptManager 2 30
Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

705 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now