Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Image getting cut out

Image getting cut out

Problem

I have the following code: http://jsfiddle.net/arp8x/

As you can see the image gets cut out. I cannot make it display entirely without taking the markers functionality away.

#wrapper-AddSensors_img { position: relative; } #wrapper-AddSensors_img img, #wrapper .marker { position: absolute; } #wrapper-AddSensors_img img { top: 0; left: 0; } #wrapper-AddSensors_img .marker { z-index: 100; }
Problem courtesy of: Cornwell

Solution

http://jsfiddle.net/NkCPA/1/

I have added these lines to the end of your stylesheet:

#wrapper-AddSensors_img > img:first-child {
    position: relative;
}

.swMain .stepContainer div.content {
    min-height: 300px;
    height: auto;
}

The relative positioning allows the #wrapper and .content divs to get the Height of the img. Setting the .content height to auto lets the browser calculate the correct height for large images, so you can use this code with other sized images too.

Solution courtesy of: Maria

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Image getting cut out

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×