Forums

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

.imagemediumcontainer {
    display: table-cell;
    text-align: center;
    vertical-align: middle;            
     height:625px;
    width: 625px	
}
.imagemediumcontainer * {
    vertical-align: middle;
}
<!--[if lt IE 8]>
.imagemediumcontainer span {
    display: inline-block;
    height: 100%;
}
<![endif]-->

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

<table cellspacing=\"0\" cellpadding=\"0\" border=\"0\" width=\"100%\">
 <tbody>
    <tr valign=\"top\">
      <td>
        <div id=\"divMediumContainer\" class=\"imagemediumcontainer\" style=\"height: 625px; width: 625px;\">
             <span/>
           <img id=\"imgMedium\" class=\"click\" src=\"/FreeBird/stores/f/fb/media/00/afd1414122803c4dea9db3_m.JPG\"/>
         </div>
         <div id=\"divSmallImage_1\" class=\"imagesmallcontainer\">
             <img id=\"imgSmall_1\" width=\"65\" calcoffset=\"65\" style=\"\"         src=\"/FreeBird/stores/f/fb/media/00/afd1414122803c4dea9db3_s.JPG\"/>
           </div>
         <div id=\"divSmallImage_2\" class=\"imagesmallcontainer\">
              <img id=\"imgSmall_2\" width=\"65\" calcoffset=\"65\" style=\"\"  src=\"/FreeBird/stores/f/fb/media/00/afd1414122803d3766b62c_s.JPG\"/>
         </div>
        <div id=\"divSmallImage_3\" class=\"imagesmallcontainer\">
               <img id=\"imgSmall_3\" width=\"65\" calcoffset=\"65\" style=\"\" src=\"/FreeBird/stores/f/fb/media/00/afd1414122803d58b1d43d_s.jpg\"/>
        </div>
       <div id=\"divSmallImage_4\" class=\"imagesmallcontainer\">
              <img id=\"imgSmall_4\" height=\"65\" calcoffset=\"65\" style=\"\"       src=\"/FreeBird/stores/f/fb/media/00/afd1414122803d79fc6cd7_s.jpg\"/>
       </div>
         <div class=\"hoverover\">
               <img src=\"/FreeBird/stores/f/fb/images/store_version1/hoverOver.gif\"/>
             </div>
       </td>
<td>
<img height=\"1\" border=\"0\" width=\"6\" src=\"/FreeBird/stores/f/fb/images/store_version1/pixel.gif\"/>
</td>
<td width=\"75%\">
<h1>Pdt1</h1>
<div style=\"border: 1px solid rgb(204, 204, 204); padding: 10px; width: 250px; margin-top: 5px;\">
Price:
<span class=\"large_price\">$10.00</span>
<br/>
List Price: $10.00
<b>Savings: $0.00</b>
<br/>
</div>
<p> </p>
<form action=\"/FreeBird/servlet/fb/Cart\" method=\"post\" name=\"cartadd\">
<input type=\"hidden\" value=\"add\" name=\"smode\"/>
<input type=\"hidden\" value=\"1\" name=\"product_no\"/>
<div class=\"quantity\">
</div>
</form>
<p/>
</td>
</tr>
</tbody>
</table>

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

treehouse : what would you like to learn today?

Forums

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