CSS Forum

**RobJ** · 06-21-2010, 10:14 AM

Your advice would be much appreciated.
The code below does what I want in Opera, Chrome and IE but Firefox centres the middle image to the page and not to the gap between image 1 and 3.
Any suggestions as to how I get Firefox to render the same way as Opera and IE?

Cheers - Rob

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Image Positions</title>
<style type="text/css">
body {
	width: 90%;
	margin-right: auto;
	margin-left: auto;
}
.clearfloat_Right {
	clear:right;
	height:0;
	font-size: 1px;
	line-height: 0px;
}
img.one{
	float: left;
	border: medium ridge #003;
	margin-right: 10px;
}
img.two{
	display: block;
	margin-right: auto;
	margin-left: auto;
	border: thin solid #000;
}
img.three{
	text-align: center;
	border: medium ridge #003;
	float: right;
}
</style>
</head>
<body>
<img src="" class="one" alt="Image_One_Float_Left" width="180" height="180" name="Image One - Float Left" title="Image One - Float Left"  />
<img src="" class="three" alt="Image_Three_Float_Right" width="400" height="130" name="Image Three - Float Right"  title="Image Three - Float Right" />
<img src="" class="two" alt="Image_Two_centered_in_Gap" width="200" height="130"  name="Image Two - Centred" title="Image Two - Centred" />
<br class="clearfloat_Right"/> 
<h3 >This layout works fine with Opera, my preferred browser, and with Chrome and IE.<br/>
Unfortunately it does not display correctly with FireFox.</h3>
</body>
</html>

**chrishirst** · 06-21-2010, 11:59 AM

Because Opera & IE have it wrong (Opera is a IE wannabee in some rexpects).

Floated elements exist in a different "plane" to non-floated

use a document flow (source code) of

HTML Code:

<div id="wrapper">
    <div style="float:right;">Three</div>
    <div style="float:left;">One</div>
    <div style="float:none;margin:0 auto;">Two</div>
</div>

Then the three elements exist in the same plane, and you end up with this

**RobJ** · 06-21-2010, 01:04 PM

Thanks for the help.
Didn't work initially but when I changed
<div style="float:none;margin:0 auto;">Two</div> to
<div style="float:none;margin:0 auto; text-align:center;">Two</div>
it worked beautifully. All four browsers now rendering the same.
Thanks again for your help.
Cheers - Rob

**chrishirst** · 06-21-2010, 01:10 PM

You should not need text-align:center if you use a valid DTD

**RobJ** · 06-21-2010, 05:47 PM

I am using this DTD

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

When I take out text-align:center then the middle image becomes left aligned.
Perhaps I have done something between removing the CSS from the html file and putting it into a CSS file. I have just had a play and can't see anything obvious. Perhaps CSS specificity has played a hand - can't see where though. It works now and so I'm a happy bunny. Thanks again for pointing the way.
Cheers
Rob

**chrishirst** · 06-21-2010, 06:10 PM

Have you set the images to display:block; ?

My example uses divs which are block elements. Image elements are inline which behave differently when floated.
The margin: 0 auto; centering rule does not apply to inline elements either.

**RobJ** · 06-21-2010, 07:20 PM

I did have it set to display:block before I posted my problem but currently it is unset. I have just added it and removed text-align:center and firefox reverts to it's unique position of not displaying 'image two' in the centre of the gap but to the centre of the page.

I am happy with the solution I have it works. May not be good CSS but it works.
Happy to try something else if you have a suggestion. Can you get it to work on your system?

Cheers
Rob

**chrishirst** · 06-21-2010, 07:28 PM

click the link in post #2

**chrishirst** · 06-21-2010, 07:32 PM

Quote:

centre of the gap but to the centre of the page.

It will be in the centre of it's parent container.

So if the parent container is the body element ...

**RobJ** · 06-21-2010, 07:40 PM

Chris - Thanks for your effort.
I did open your link in post 2. It worked a treat as is until I replaced the TEXT with and IMG. But I followed the concept and order and found a solution that works. Don't understand why I need align-text:centre but it works and using Display:Block doesn't help.
You have spent enough time on me - Much appreciated.

Cheers
Rob

**chrishirst** · 06-21-2010, 07:50 PM

Gve us a URL so we can see what is happening.

**RobJ** · 06-21-2010, 07:59 PM

I will put one up to-morrow. The page is a php page and used as an include so is getting it's DTD and css file from the main page. Main page is still under development and not a pretty sight. I will sanitise it and publish it to-morrow as a simple single page.

Cheers
Rob

**RobJ** · 06-21-2010, 08:21 PM

Couldn't go to bed without doing it. Have uploaded the page here
http://www.doctor.johnson.name/Three...reeImages.html

**LadynRed** · 06-22-2010, 08:54 AM

What's wrong with floating all 3 of them?

**chrishirst** · 06-22-2010, 09:14 AM

The middle image is missing BTW

**RobJ** · 06-22-2010, 11:58 AM

LadynRed asked

Quote:

What's wrong with floating all 3 of them?

I would like the middle image to be central to the gap between images 1 and 3. Don't see how to do that if all three are floating.

chrishirst wrote

Quote:

The middle image is missing BTW

yep - just a placeholder - not been designed yet. Don't suppose graphic design is one of your many skills. It certainly isn't mine The site is for a friend who is a Falconer and an Artist and will be selling his paintings and prints through the site.

Cheers
Rob

**chrishirst** · 06-22-2010, 12:23 PM

Quote:

Don't suppose graphic design is one of your many skills.

I "get by" is the best way to describe my GD skills. Ideas certainly, artistic skills somewhat lacking.

I'm certainly nowhere near as good as any of the designers we have as members which may of course the way to go.

**chrishirst** · 06-22-2010, 12:27 PM

Logo idea!

Falcon, sat on Gauntlet which is holding an artists palette.

**RobJ** · 06-22-2010, 12:39 PM

Brilliant idea and thanks for the link.

Hadn't appreciated the depth of this site. If we can't come up with a graphic then I may well enlist some help with a Design Contest.

Thanks for all your help.

Cheers
Rob

**LadynRed** · 06-22-2010, 03:21 PM

Quote:

I would like the middle image to be central to the gap between images 1 and 3. Don't see how to do that if all three are floating.

Why not? Floating them doesn't mean you're stuck with the 3 divs, or images, mashed all together to one side.