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

first div expanding beyond specified size?

first div expanding beyond specified size?

Problem

have four items that just show a bg image until you hove and then it displays text, bg image is then set to none.

The first element is expanding beyond the height of the other three. I really just wanted them all to stay at 200x200px. All the images used for backgrounds are 200x200px.

Should the .p1top be positioned differently such as absolute?

.p1top {
    height:200px;
    margin-left:45px;
    background-repeat: no-repeat;
    background-image: url(protect.png);
    width:200px;
    text-align:center;
    background-color:transparent;
    line-height: 0px;
    color: transparent;
    font-size: 16px;
    font-weight: 300;
    text-transform: uppercase;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}
.p1top :hover {
    height:200px !important;
    width:200px;
    background-image:none;
    background-color:#7D8093;
    line-height: 20px;
    color: #FFFFFF;
}
.p2top :hover {
    width:200px;
    background-image:none;
    background-color:#7D8093;
    line-height: 20px;
    color: #FFFFFF;
}
.p2top {
    background-repeat: no-repeat;
    background-image: url(build.png);
    float:left;
    margin-left:-15px;
    width:200px;
    text-align:center;
    background-color:transparent;
    line-height: 0px;
    color: transparent;
    font-size: 16px;
    font-weight: 300;
    text-transform: uppercase;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}
/*.p2top :hover {width:200px; background-color:#7D8093;line-height: 20px; color: #FFFFFF; }*/
 .p3top {
    background-repeat: no-repeat;
    background-image: url(savebg.png);
    margin-left: -20px;
    width:200px;
    text-align:center;
    background-color:transparent;
    line-height: 0px;
    color: transparent;
    font-size: 16px;
    font-weight: 300;
    text-transform: uppercase;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}
.p3top :hover {
    width:200px;
    background-color:#7D8093;
    line-height: 20px;
    color: #FFFFFF;
}
.p4top {
    background-repeat: no-repeat;
    background-image: url(help.png);
    margin-left: -20px;
    width:200px;
    text-align:center;
    background-color:transparent;
    line-height: 0px;
    color: transparent;
    font-size: 16px;
    font-weight: 300;
    text-transform: uppercase;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}
.p4top :hover {
    width:200px;
    background-color:#7D8093;
    line-height: 20px;
    color: #FFFFFF;
}
Problem courtesy of: tkINtenn

Solution

You have defined the height only in .p1top but not in other divs, so you need to set that's div height also. Then you could define position such as absolute but for this you should wrap all of these div with a div positioned relatively. If you post a jsfiddle that would be very much sensible.

Solution courtesy of: Bhojendra Nepal

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

first div expanding beyond specified size?

×

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

Get updates delivered right to your inbox!

Thank you for your subscription

×