Div not considering width&height in Fire Fox. Please help!!

[jammy]

Hi,

I have a div tag with css styles and underneath I have few images. The calculation is the div should always take the greatest width and height of the images and assign to div width and height. Though I see the correct values for width and height (625px; 625 px) while debugging (using firebug) in firefox, the whole page gets moved left and right depending on the image size. I am seeing this problem only in firefox.

The css file includes the tag as

Code:

.imagemediumcontainer {
display: table-cell;
text-align: center;
vertical-align: middle;
height:625px;
width: 625px
}
.imagemediumcontainer * {
vertical-align: middle;
}

.click {cursor:pointer}
.imagesmallcontainer {
background-color:#ffffff;
border:2px solid #CCCCCC;
float:left;
height:65px;
margin:8px 4px 2px 0px;
overflow:hidden;
width:65px
}
.hoverover {
clear:both;
float:left;
font-size:11px;
padding-bottom:2px;
padding-top:2px;
width:300px
}

Code:

Pdt1 Price: $10.00 List Price: $10.00 Savings: $0.00

Please note: When I hover over the small images, it displays the medium images but not occupying the whole div space ie 625 width and 625 height. Looks like it is taking the image size and the whole table moves left to right ONLY in firefox not in IE.

FIrefox version: 3.0.11

Please do the needful.

Thanks & Regards,
C. Jamuna

[Author]

Posts