• Locked
No replies
Mon, 2010-06-21 12:45
RobJ
Offline
newbie
Devon
Last seen: 8 years 16 weeks ago
Devon
Joined: 2010-06-21
Posts: 1
Points: 2

Your advice would be much appreciated.
The code below does what I want in Opera and IE but Firefox centres the middle image to the page and not to the gap between image 1 and 3.

<!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 prefered browser, and with IE.<br/>
Unfortunately it does not display correctly with FireFox.</h3>
</body>
</html>

Top
Tags: