Why CSS is cropping the bottom of my image? - html

Question

I have a logo and text on the page and my items are floated left but this causes the bottom of the logo to cut off. No minus margins or paddings are used. Looking with XRAY and webdeveloper style finder I see that the img is getting cut short with no other elements around it, (it is just floated left). If I remove the float from the .logo the image appears whole, but larger and out of position
Here is the jsfiddle http://jsfiddle.net/9LGRx/ It seems to be a FF bug, works ok in Chrome and Safari.
html > body > header > div.wrapper > a.logo > img
HTML code
<header>
<div class="wrapper">
<a href="/" class="logo">
<img src="images/logo.png" alt="Showhouse logo">
</a>
<h1>Welcome to ShowHouse</h1>
<p class="text">
Show off your property management skills with ShowHouse - the only online property
management software that will effortlessly handle and help to improve every aspect of
your <strong>residential</strong> and <strong>commercial lettings</strong>, <strong>sales</strong> and <strong>block management</strong>.
</p>
</div>
</header>
SCSS Code
h1{
color: #fff;
float: left;
clear: both;
}
img{
max-width: 100%;
float: left;
}
header{
background-image: url('../images/header-bg.jpg');
float: left;
width: 100%;
/*height: 417px;*/
.logo{
float: left;
width: 60%;
margin: 20px 0 20px 0;
}
.logo img{
max-width: 100%;
}
.text{
float: left;
clear: both;
color: $color-white;
font-size: 1.2em;
margin-top: -10px;
}
}

Answer 1

Try adding this to your css:
.logo img{
max-width: 100%;
display: block;
height: 150px;
}
(put the real height of your image or the height you want to display)