CODEWITHSUNDEEP
htmlcss
Pierce McGeough
Pierce McGeough

Reputation: 3086

Why CSS is cropping the bottom of my image?

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;
    }
}

Upvotes: 0

Views: 1403

Answers (1)

AvGraph
AvGraph

Reputation: 26

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)

Upvotes: 1

Related Questions