Sasith Sasith - 7 months ago 7
HTML Question

Absolute positioned div's width not equal to child image's width issue in firefox

I absolute positioned div and image inside that. the problem is in the firefox the partent div's width is more than child image. In chorme and ie it looks fine. Anyone can help? here is the
link.
scroll down and look at the map in left.

here is html

<div class="rm">
<img src="images/ride_map.jpg" alt="ride map" class="img-responsive center-block" />
<div class="path"><img src="images/path1.png" alt="ride map" class="img-responsive animated infinite flash"/></div>
<div class="path2"><img src="images/path2.png" alt="ride map" class="img-responsive animated infinite flash"/></div>
<div class="path3"><img src="images/path3.png" alt="ride map" class="img-responsive animated infinite flash"/></div>
<div class="path4"><img src="images/path4.png" alt="ride map" class="img-responsive animated infinite flash"/></div>
<div class="path5"><img src="images/path5.png" alt="ride map" class="img-responsive animated infinite flash"/></div>
<div class="path6"><img src="images/path6.png" alt="ride map" class="img-responsive animated infinite flash"/></div>
<div class="path7"><img src="images/path7.png" alt="ride map" class="img-responsive animated infinite flash"/></div>
<div class="path8"><img src="images/path8.png" alt="ride map" class="img-responsive animated infinite flash"/></div>
<div class="path9"><img src="images/path9.png" alt="ride map" class="img-responsive animated infinite flash"/></div>
<div class="path10"><img src="images/path10.png" alt="ride map" class="img-responsive animated infinite flash"/></div>
</div>


here is css

/*day1*/

.path {
position: absolute;
bottom: 4.8%;
left: 23.4%;
height: 22.6%;
}
.path img {
padding: 0 !important;
background: transparent !important;
height: 100%;
}
/*day2*/

.path2 {
position: absolute;
bottom: 4.7%;
left: 43%;
height: 13.5%;
}
.path2 img {
padding: 0 !important;
background: transparent !important;
height: 100%;
}
/*day3*/

.path3 {
position: absolute;
bottom: 16.5%;
right: 11.7%;
height: 13%;
}
.path3 img {
padding: 0 !important;
background: transparent !important;
height: 100%;
}
/*day4*/

.path4 {
position: absolute;
bottom: 27.5%;
right: 12%;
height: 21%;
}
.path4 img {
padding: 0 !important;
background: transparent !important;
height: 100%;
}
/*day5*/

.path5 {
position: absolute;
right: 17.7%;
bottom: 46.8%;
height: 21%;
}
.path5 img {
padding: 0 !important;
background: transparent !important;
height: 100%;
}
/*day6*/

.path6 {
position: absolute;
right: 33.5%;
top: 18%;
height: 16%;
}
.path6 img {
padding: 0 !important;
background: transparent !important;
height: 100%;
}
/*day7*/

.path7 {
position: absolute;
left: 24.5%;
top: 9%;
height: 10.6%;
}
.path7 img {
padding: 0 !important;
background: transparent !important;
height: 100%;
}
/*day8*/

.path8 {
position: absolute;
left: 24.2%;
top: 9.1%;
height: 26%;
}
.path8 img {
padding: 0 !important;
background: transparent !important;
height: 100%;
}
/*day9*/

.path9 {
position: absolute;
left: 22%;
top: 33.5%;
height: 34%;
}
.path9 img {
padding: 0 !important;
background: transparent !important;
height: 100%;
}
/*day10*/

.path10 {
position: absolute;
left: 23.3%;
top: 65.5%;
height: 9%;
}
.path10 img {
padding: 0 !important;
background: transparent !important;
height: 100%;
}

Answer

I had to add width attribute to paths, after that it worked fine.

/*day1*/
.path {
    position: absolute;
    bottom:4.8%;
    left: 23.4%;
    height: 22.6%;
    width: 22%;
}
.path img{
    padding: 0 !important;
    background: transparent !important;
    height: 100%;

}

/*day2*/
.path2 {
    position: absolute;
    bottom: 4.7%;
    left: 43%;
    height: 13.5%;
    width: 29%;

}
.path2 img{
    padding: 0 !important;
    background: transparent !important;
    height: 100%;

}

/*day3*/
.path3 {
    position: absolute;
    bottom: 16.5%;
    right: 11.7%;
    height: 13%;width: 20%;

}
.path3 img{
    padding: 0 !important;
    background: transparent !important;
    height: 100%;

}

/*day4*/
.path4  {
    position: absolute;
    bottom: 27.5%;
    right: 12%;
    height: 21%;width: 8%;

}
.path4 img{
    padding: 0 !important;
    background: transparent !important;
    height: 100%;

}

/*day5*/
.path5 {
    position: absolute;
    right: 17.7%;
    bottom: 46.8%;
    height: 21%;width: 18.78%;
}
.path5 img{
    padding: 0 !important;
    background: transparent !important;
    height: 100%;

}

/*day6*/
.path6 {
    position: absolute;
    right: 33.5%;
    top: 18%;
    height: 16%;width: 16%;

}
.path6 img{
    padding: 0 !important;
    background: transparent !important;
    height: 100%;

}

/*day7*/
.path7 {
        position: absolute;
    left: 24.5%;
    top: 9%;
    height: 10.6%;width: 28.55%;



}
.path7 img{
    padding: 0 !important;
    background: transparent !important;
    height: 100%;

}

/*day8*/
.path8 {
    position: absolute;
    left: 24.2%;
    top: 9.1%;
    height: 26%;width: 7.8%;

}
.path8 img{
    padding: 0 !important;
    background: transparent !important;
    height: 100%;

}

/*day9*/
.path9 {
position: absolute;
    left: 22%;
    top: 33.5%;
    height: 34%;width: 5%;


}
.path9 img{
    padding: 0 !important;
    background: transparent !important;
    height: 100%;

}

/*day10*/
.path10 {
     position: absolute;
    left: 23.3%;
    top: 65.5%;
    height: 9%;
    width: 3%;
}
.path10 img{
    padding: 0 !important;
    background: transparent !important;
    height: 100%;

} 
Comments