page doesn't look right in FF

[PushCode]

I'm working on a site and all is looking good in IE 6 and IE 7, but there is one small issue in FF 2. There are two images that make up the header, and in FF 2, there is a small space between the two images.

You can see it here:

http://www.pushcode.com/clients/bednbiscuit/

I'm hoping this is something really simple.

Here is the css

html,body{
	margin:0;
	padding:0;
	background-image:url(../img/bg_lattice.gif);}
body{
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:12px;
	font-weight:normal;}
h2 {
	font-size:20px;
	font-weight:bold;
	color:#7478A8;}
h3 {
	font-size:18px;
	font-weight:bold;
	color:#9999CC;}  
div#wrapper {
	width: 850px;
	background-color:#FFFFFF;
	margin: 0px auto;}
div#container{
	background:#FFFFFF;
	width:752px;
	margin-left:36px;
	margin-right:36px;}
div#header{
	height:331px;
	width:777px;
	padding:0px;
	margin:0px;}
div#nav {
	height:33px;
	margin-left:42px;
}	
div#content_lft{
	background:#FFFFFF;
	float:left;
	width:263px;
	margin-left:6px;
	text-align:center;}
div#content{
	float:right;
	width:466px;
	padding-left:8px;}
div#extra{
	background:#CCC;
	float:right;
	width:489px;}
div#footer{
	background: #FFF;
	color: #080097;
	border:1px solid #7171A5;
	font-size:10px;
	margin:0px auto;
	clear:both;
	width:752px;
	height:22px;
	text-align:center;}
div#ftr_lft {
	float:left;
	width:150px;
	height:22px;
	border-right:1px solid #7171A5;
	background-color:#9EA1C2;}
.feature_hdr {
	font-size:16px;
	font-weight:bold;
	color:#FFFFFF;
	padding:3px;}
.feature_bdy {
	padding:10px;
	text-align:left;}
.bordered {
	border:2px solid #B55B35;}

Any ideas? I appreciate any help. Thanks!

 

[BillyRayPreachersSon]

Is there any whitespace between the images? Could you post the HTML?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[ChrisHunt]

It's because FF leaves a little whitespace at the bottom of each line to leave room for the descenders of p's, y's and so on. If you place an image inline with some text, you'll see it aligns by default with the baseline of the text rather than the absolute bottom of the line.

I tried a couple of ways of fixing this - reducing the [tt]line-height[/tt] to remove the descendant area, using the [tt]vertical-align[/tt] property to push the images up and down. Both worked, but the easiest method is probably to add this:

div#header img {
   display: block;
}

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[PushCode]

Thanks guys. BillyRay, there is no whitespace between the images.

Chris, adding that to my css solved the problem. Thanks!