DIV is picking max-width value as width value for DIV.
Posted
by Lokesh
on Stack Overflow
See other posts from Stack Overflow
or by Lokesh
Published on 2010-06-08T11:50:12Z
Indexed on
2010/06/08
11:52 UTC
Read the original article
Hit count: 711
Filed under:
max-width
I am facing a problem after applying max-width hack for IE7.
In mozilla, width of the div is flexible and adjustable as per the image width in the div.
But in IE7 it is taking the max-width as width of DIV.
Below is my HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link rel="stylesheet" type="text/css" media="all" href="style/food.css" />
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href="style/ie7.css" />
<![endif]-->
</head>
<body>
<div class="main_content_inner_ko">
<div class="product_item">
<img src="images/product_icons/BigNTasty.png" alt="Big N’ Tasty"/><div class="small_title">Big N’ Tasty</div>
<table class="product_information" cellpadding="0" border="0" cellspacing="0">
<tbody>
<tr>
<td class="red_bold"></td>
<td></td>
<td class="small_italic">(Daily Value)</td>
</tr>
<tr>
<td class="red_bold">Calories</td>
<td>460</td>
<td class="small_italic"></td>
</tr>
<tr>
<td class="red_bold">Total Fat</td>
<td>24g</td>
<td class="small_italic">(37%)</td>
</tr>
<tr>
<td class="red_bold">Carbs</td>
<td>37g</td>
<td class="small_italic">(12%)</td>
</tr>
<tr>
<td class="red_bold">Protein</td>
<td>24g</td>
<td class="small_italic"></td>
</tr>
<tr>
<td class="red_bold">Sodium</td>
<td>720mg</td>
<td class="small_italic">(30%)</td>
</tr>
<tr>
<td colspan="3" class="notes">Note: Values shown are for the default size and/or flavor.</td>
</tr>
<tr><td colspan="3"><a href="#" class="acts_as_button en_learn_more_and_customize"></a></td></tr>
<tr><td colspan="3"><a href="#" class="acts_as_button en_add_to_my_meal_builder"></a></td></tr>
</tbody>
</table>
</div>
<div class="product_item">
<img src="images/product_images/x115/chicken/PremCrispyChickenRanchBLT.png" height="115" width="115" alt="Premium Cripsy Chicken Ranch BLT"/><div class="small_title">Premium Cripsy Chicken Ranch BLT</div>
<table class="product_information" cellpadding="0" border="0" cellspacing="0">
<tbody>
<tr>
<td class="red_bold"></td>
<td></td>
<td class="small_italic">(Daily Value)</td>
</tr>
<tr>
<td class="red_bold">Calories</td>
<td>460</td>
<td class="small_italic"></td>
</tr>
<tr>
<td class="red_bold">Total Fat</td>
<td>24g</td>
<td class="small_italic">(37%)</td>
</tr>
<tr>
<td class="red_bold">Carbs</td>
<td>37g</td>
<td class="small_italic">(12%)</td>
</tr>
<tr>
<td class="red_bold">Protein</td>
<td>24g</td>
<td class="small_italic"></td>
</tr>
<tr>
<td class="red_bold">Sodium</td>
<td>720mg</td>
<td class="small_italic">(30%)</td>
</tr>
<tr>
<td colspan="3" class="notes">Note: Values shown are for the default size and/or flavor.</td>
</tr>
<tr><td colspan="3"><a href="#" class="acts_as_button en_learn_more_and_customize"></a></td></tr>
<tr><td colspan="3"><a href="#" class="acts_as_button en_add_to_my_meal_builder"></a></td></tr>
</tbody>
</table>
</div>
<div class="product_item">
<img src="images/product_images/x115/sandwiches/FiletOFish.png" height="115" width="99" alt="Filet O Fish"/>
<div class="small_title">Filet O Fish</div>
<table class="product_information" cellpadding="0" border="0" cellspacing="0">
<tbody>
<tr>
<td class="red_bold"></td>
<td></td>
<td class="small_italic">(Daily Value)</td>
</tr>
<tr>
<td class="red_bold">Calories</td>
<td>460</td>
<td class="small_italic"></td>
</tr>
<tr>
<td class="red_bold">Total Fat</td>
<td>24g</td>
<td class="small_italic">(37%)</td>
</tr>
<tr>
<td class="red_bold">Carbs</td>
<td>37g</td>
<td class="small_italic">(12%)</td>
</tr>
<tr>
<td class="red_bold">Protein</td>
<td>24g</td>
<td class="small_italic"></td>
</tr>
<tr>
<td class="red_bold">Sodium</td>
<td>720mg</td>
<td class="small_italic">(30%)</td>
</tr>
<tr>
<td colspan="3" class="notes">Note: Values shown are for the default size and/or flavor.</td>
</tr>
<tr><td colspan="3"><a href="#" class="acts_as_button en_learn_more_and_customize"></a></td></tr>
<tr><td colspan="3"><a href="#" class="acts_as_button en_add_to_my_meal_builder"></a></td></tr>
</tbody>
</table>
</div>
<div class="product_item">
<img src="images/product_icons/BigNTasty.png" height="115" width="99" alt="Big N’ Tasty"/>
<div class="small_title">Big N’ Tasty</div>
<table class="product_information" cellpadding="0" border="0" cellspacing="0">
<tbody>
<tr>
<td class="red_bold"></td>
<td></td>
<td class="small_italic">(Daily Value)</td>
</tr>
<tr>
<td class="red_bold">Calories</td>
<td>460</td>
<td class="small_italic"></td>
</tr>
<tr>
<td class="red_bold">Total Fat</td>
<td>24g</td>
<td class="small_italic">(37%)</td>
</tr>
<tr>
<td class="red_bold">Carbs</td>
<td>37g</td>
<td class="small_italic">(12%)</td>
</tr>
<tr>
<td class="red_bold">Protein</td>
<td>24g</td>
<td class="small_italic"></td>
</tr>
<tr>
<td class="red_bold">Sodium</td>
<td>720mg</td>
<td class="small_italic">(30%)</td>
</tr>
<tr>
<td colspan="3" class="notes">Note: Values shown are for the default size and/or flavor.</td>
</tr>
<tr><td colspan="3"><a href="#" class="acts_as_button en_learn_more_and_customize"></a></td></tr>
<tr><td colspan="3"><a href="#" class="acts_as_button en_add_to_my_meal_builder"></a></td></tr>
</tbody>
</table>
</div>
<div class="product_item">
<img src="images/product_images/x115/chicken/PremCrispyChickenRanchBLT.png" height="115" width="115" alt="Premium Cripsy Chicken Ranch BLT"/>
<div class="small_title">Premium Cripsy Chicken Ranch BLT</div>
<table class="product_information" cellpadding="0" border="0" cellspacing="0">
<tbody>
<tr>
<td class="red_bold"></td>
<td></td>
<td class="small_italic">(Daily Value)</td>
</tr>
<tr>
<td class="red_bold">Calories</td>
<td>460</td>
<td class="small_italic"></td>
</tr>
<tr>
<td class="red_bold">Total Fat</td>
<td>24g</td>
<td class="small_italic">(37%)</td>
</tr>
<tr>
<td class="red_bold">Carbs</td>
<td>37g</td>
<td class="small_italic">(12%)</td>
</tr>
<tr>
<td class="red_bold">Protein</td>
<td>24g</td>
<td class="small_italic"></td>
</tr>
<tr>
<td class="red_bold">Sodium</td>
<td>720mg</td>
<td class="small_italic">(30%)</td>
</tr>
<tr>
<td colspan="3" class="notes">Note: Values shown are for the default size and/or flavor.</td>
</tr>
<tr><td colspan="3"><a href="#" class="acts_as_button en_learn_more_and_customize"></a></td></tr>
<tr><td colspan="3"><a href="#" class="acts_as_button en_add_to_my_meal_builder"></a></td></tr>
</tbody>
</table>
</div>
<div class="product_item">
<img src="images/product_images/x115/sandwiches/FiletOFish.png" height="115" width="99" alt="Filet O Fish"/>
<div class="small_title">Filet O Fish</div>
<table class="product_information" cellpadding="0" border="0" cellspacing="0">
<tbody>
<tr>
<td class="red_bold"></td>
<td></td>
<td class="small_italic">(Daily Value)</td>
</tr>
<tr>
<td class="red_bold">Calories</td>
<td>460</td>
<td class="small_italic"></td>
</tr>
<tr>
<td class="red_bold">Total Fat</td>
<td>24g</td>
<td class="small_italic">(37%)</td>
</tr>
<tr>
<td class="red_bold">Carbs</td>
<td>37g</td>
<td class="small_italic">(12%)</td>
</tr>
<tr>
<td class="red_bold">Protein</td>
<td>24g</td>
<td class="small_italic"></td>
</tr>
<tr>
<td class="red_bold">Sodium</td>
<td>720mg</td>
<td class="small_italic">(30%)</td>
</tr>
<tr>
<td colspan="3" class="notes">Note: Values shown are for the default size and/or flavor.</td>
</tr>
<tr><td colspan="3"><a href="#" class="acts_as_button en_learn_more_and_customize"></a></td></tr>
<tr><td colspan="3"><a href="#" class="acts_as_button en_add_to_my_meal_builder"></a></td></tr>
</tbody>
</table>
</div>
<div class="product_item">
<img src="images/product_icons/BigNTasty.png" height="115" width="99" alt="Big N’ Tasty"/>
<div class="small_title">Big N’ Tasty</div>
<table class="product_information" cellpadding="0" border="0" cellspacing="0">
<tbody>
<tr>
<td class="red_bold"></td>
<td></td>
<td class="small_italic">(Daily Value)</td>
</tr>
<tr>
<td class="red_bold">Calories</td>
<td>460</td>
<td class="small_italic"></td>
</tr>
<tr>
<td class="red_bold">Total Fat</td>
<td>24g</td>
<td class="small_italic">(37%)</td>
</tr>
<tr>
<td class="red_bold">Carbs</td>
<td>37g</td>
<td class="small_italic">(12%)</td>
</tr>
<tr>
<td class="red_bold">Protein</td>
<td>24g</td>
<td class="small_italic"></td>
</tr>
<tr>
<td class="red_bold">Sodium</td>
<td>720mg</td>
<td class="small_italic">(30%)</td>
</tr>
<tr>
<td colspan="3" class="notes">Note: Values shown are for the default size and/or flavor.</td>
</tr>
<tr><td colspan="3"><a href="#" class="acts_as_button en_learn_more_and_customize"></a></td></tr>
<tr><td colspan="3"><a href="#" class="acts_as_button en_add_to_my_meal_builder"></a></td></tr>
</tbody>
</table>
</div>
<div class="product_item">
<img src="images/product_icons/BigNTasty.png" height="115" width="99" alt="Big N’ Tasty"/>
<div class="small_title">Big N’ Tasty</div>
<table class="product_information" cellpadding="0" border="0" cellspacing="0">
<tbody>
<tr>
<td class="red_bold"></td>
<td></td>
<td class="small_italic">(Daily Value)</td>
</tr>
<tr>
<td class="red_bold">Calories</td>
<td>460</td>
<td class="small_italic"></td>
</tr>
<tr>
<td class="red_bold">Total Fat</td>
<td>24g</td>
<td class="small_italic">(37%)</td>
</tr>
<tr>
<td class="red_bold">Carbs</td>
<td>37g</td>
<td class="small_italic">(12%)</td>
</tr>
<tr>
<td class="red_bold">Protein</td>
<td>24g</td>
<td class="small_italic"></td>
</tr>
<tr>
<td class="red_bold">Sodium</td>
<td>720mg</td>
<td class="small_italic">(30%)</td>
</tr>
<tr>
<td colspan="3" class="notes">Note: Values shown are for the default size and/or flavor.</td>
</tr>
<tr><td colspan="3"><a href="#" class="acts_as_button en_learn_more_and_customize"></a></td></tr>
<tr><td colspan="3"><a href="#" class="acts_as_button en_add_to_my_meal_builder"></a></td></tr>
</tbody>
</table>
</div>
<div class="product_item">
<img src="images/product_images/x115/sandwiches/FiletOFish.png" height="115" width="99" alt="Filet O Fish"/>
<div class="small_title">Filet O Fish</div>
<table class="product_information" cellpadding="0" border="0" cellspacing="0">
<tbody>
<tr>
<td class="red_bold"></td>
<td></td>
<td class="small_italic">(Daily Value)</td>
</tr>
<tr>
<td class="red_bold">Calories</td>
<td>460</td>
<td class="small_italic"></td>
</tr>
<tr>
<td class="red_bold">Total Fat</td>
<td>24g</td>
<td class="small_italic">(37%)</td>
</tr>
<tr>
<td class="red_bold">Carbs</td>
<td>37g</td>
<td class="small_italic">(12%)</td>
</tr>
<tr>
<td class="red_bold">Protein</td>
<td>24g</td>
<td class="small_italic"></td>
</tr>
<tr>
<td class="red_bold">Sodium</td>
<td>720mg</td>
<td class="small_italic">(30%)</td>
</tr>
<tr>
<td colspan="3" class="notes">Note: Values shown are for the default size and/or flavor.</td>
</tr>
<tr><td colspan="3"><a href="#" class="acts_as_button en_learn_more_and_customize"></a></td></tr>
<tr><td colspan="3"><a href="#" class="acts_as_button en_add_to_my_meal_builder"></a></td></tr>
</tbody>
</table>
</div>
<div class="product_item">
<img src="images/product_icons/BigNTasty.png" height="115" width="99" alt="Big N’ Tasty"/>
<div class="small_title">Big N’ Tasty</div>
<table class="product_information" cellpadding="0" border="0" cellspacing="0">
<tbody>
<tr>
<td class="red_bold"></td>
<td></td>
<td class="small_italic">(Daily Value)</td>
</tr>
<tr>
<td class="red_bold">Calories</td>
<td>460</td>
<td class="small_italic"></td>
</tr>
<tr>
<td class="red_bold">Total Fat</td>
<td>24g</td>
<td class="small_italic">(37%)</td>
</tr>
<tr>
<td class="red_bold">Carbs</td>
<td>37g</td>
<td class="small_italic">(12%)</td>
</tr>
<tr>
<td class="red_bold">Protein</td>
<td>24g</td>
<td class="small_italic"></td>
</tr>
<tr>
<td class="red_bold">Sodium</td>
<td>720mg</td>
<td class="small_italic">(30%)</td>
</tr>
<tr>
<td colspan="3" class="notes">Note: Values shown are for the default size and/or flavor.</td>
</tr>
<tr><td colspan="3"><a href="#" class="acts_as_button en_learn_more_and_customize"></a></td></tr>
<tr><td colspan="3"><a href="#" class="acts_as_button en_add_to_my_meal_builder"></a></td></tr>
</tbody>
</table>
</div>
<div class="product_item">
<img src="images/product_icons/BigNTasty.png" height="115" width="99" alt="Big N’ Tasty"/>
<div class="small_title">Big N’ Tasty</div>
<table class="product_information" cellpadding="0" border="0" cellspacing="0">
<tbody>
<tr>
<td class="red_bold"></td>
<td></td>
<td class="small_italic">(Daily Value)</td>
</tr>
<tr>
<td class="red_bold">Calories</td>
<td>460</td>
<td class="small_italic"></td>
</tr>
<tr>
<td class="red_bold">Total Fat</td>
<td>24g</td>
<td class="small_italic">(37%)</td>
</tr>
<tr>
<td class="red_bold">Carbs</td>
<td>37g</td>
<td class="small_italic">(12%)</td>
</tr>
<tr>
<td class="red_bold">Protein</td>
<td>24g</td>
<td class="small_italic"></td>
</tr>
<tr>
<td class="red_bold">Sodium</td>
<td>720mg</td>
<td class="small_italic">(30%)</td>
</tr>
<tr>
<td colspan="3" class="notes">Note: Values shown are for the default size and/or flavor.</td>
</tr>
<tr><td colspan="3"><a href="#" class="acts_as_button en_learn_more_and_customize"></a></td></tr>
<tr><td colspan="3"><a href="#" class="acts_as_button en_add_to_my_meal_builder"></a></td></tr>
</tbody>
</table>
</div>
<div class="product_item">
<img src="images/product_icons/BigNTasty.png" height="115" width="99" alt="Big N’ Tasty"/>
<div class="small_title">Big N’ Tasty</div>
<table class="product_information" cellpadding="0" border="0" cellspacing="0">
<tbody>
<tr>
<td class="red_bold"></td>
<td></td>
<td class="small_italic">(Daily Value)</td>
</tr>
<tr>
<td class="red_bold">Calories</td>
<td>460</td>
<td class="small_italic"></td>
</tr>
<tr>
<td class="red_bold">Total Fat</td>
<td>24g</td>
<td class="small_italic">(37%)</td>
</tr>
<tr>
<td class="red_bold">Carbs</td>
<td>37g</td>
<td class="small_italic">(12%)</td>
</tr>
<tr>
<td class="red_bold">Protein</td>
<td>24g</td>
<td class="small_italic"></td>
</tr>
<tr>
<td class="red_bold">Sodium</td>
<td>720mg</td>
<td class="small_italic">(30%)</td>
</tr>
<tr>
<td colspan="3" class="notes">Note: Values shown are for the default size and/or flavor.</td>
</tr>
<tr><td colspan="3"><a href="#" class="acts_as_button en_learn_more_and_customize"></a></td></tr>
<tr><td colspan="3"><a href="#" class="acts_as_button en_add_to_my_meal_builder"></a></td></tr>
</tbody>
</table>
</div>
<div class="product_item">
<img src="images/product_images/x115/chicken/PremCrispyChickenRanchBLT.png" height="115" width="115" alt="Premium Cripsy Chicken Ranch BLT"/>
<div class="small_title">Premium Cripsy Chicken Ranch BLT</div>
<table class="product_information" cellpadding="0" border="0" cellspacing="0">
<tbody>
<tr>
<td class="red_bold"></td>
<td></td>
<td class="small_italic">(Daily Value)</td>
</tr>
<tr>
<td class="red_bold">Calories</td>
<td>460</td>
<td class="small_italic"></td>
</tr>
<tr>
<td class="red_bold">Total Fat</td>
<td>24g</td>
<td class="small_italic">(37%)</td>
</tr>
<tr>
<td class="red_bold">Carbs</td>
<td>37g</td>
<td class="small_italic">(12%)</td>
</tr>
<tr>
<td class="red_bold">Protein</td>
<td>24g</td>
<td class="small_italic"></td>
</tr>
<tr>
<td class="red_bold">Sodium</td>
<td>720mg</td>
<td class="small_italic">(30%)</td>
</tr>
<tr>
<td colspan="3" class="notes">Note: Values shown are for the default size and/or flavor.</td>
</tr>
<tr><td colspan="3"><a href="#" class="acts_as_button en_learn_more_and_customize"></a></td></tr>
<tr><td colspan="3"><a href="#" class="acts_as_button en_add_to_my_meal_builder"></a></td></tr>
</tbody>
</table>
</div>
<div class="product_item">
<img src="images/product_images/x115/sandwiches/FiletOFish.png" height="115" width="99" alt="Filet O Fish"/>
<div class="small_title">Filet O Fish</div>
<table class="product_information" cellpadding="0" border="0" cellspacing="0">
<tbody>
<tr>
<td class="red_bold"></td>
<td></td>
<td class="small_italic">(Daily Value)</td>
</tr>
<tr>
<td class="red_bold">Calories</td>
<td>460</td>
<td class="small_italic"></td>
</tr>
<tr>
<td class="red_bold">Total Fat</td>
<td>24g</td>
<td class="small_italic">(37%)</td>
</tr>
<tr>
<td class="red_bold">Carbs</td>
<td>37g</td>
<td class="small_italic">(12%)</td>
</tr>
<tr>
<td class="red_bold">Protein</td>
<td>24g</td>
<td class="small_italic"></td>
</tr>
<tr>
<td class="red_bold">Sodium</td>
<td>720mg</td>
<td class="small_italic">(30%)</td>
</tr>
<tr>
<td colspan="3" class="notes">Note: Values shown are for the default size and/or flavor.</td>
</tr>
<tr><td colspan="3"><a href="#" class="acts_as_button en_learn_more_and_customize"></a></td></tr>
<tr><td colspan="3"><a href="#" class="acts_as_button en_add_to_my_meal_builder"></a></td></tr>
</tbody>
</table>
</div>
<div class="product_item">
<img src="images/product_icons/BigNTasty.png" height="115" width="99" alt="Big N’ Tasty"/>
<div class="small_title">Big N’ Tasty</div>
<table class="product_information" cellpadding="0" border="0" cellspacing="0">
<tbody>
<tr>
<td class="red_bold"></td>
<td></td>
<td class="small_italic">(Daily Value)</td>
</tr>
<tr>
<td class="red_bold">Calories</td>
<td>460</td>
<td class="small_italic"></td>
</tr>
<tr>
<td class="red_bold">Total Fat</td>
<td>24g</td>
<td class="small_italic">(37%)</td>
</tr>
<tr>
<td class="red_bold">Carbs</td>
<td>37g</td>
<td class="small_italic">(12%)</td>
</tr>
<tr>
<td class="red_bold">Protein</td>
<td>24g</td>
<td class="small_italic"></td>
</tr>
<tr>
<td class="red_bold">Sodium</td>
<td>720mg</td>
<td class="small_italic">(30%)</td>
</tr>
<tr>
<td colspan="3" class="notes">Note: Values shown are for the default size and/or flavor.</td>
</tr>
<tr><td colspan="3"><a href="#" class="acts_as_button en_learn_more_and_customize"></a></td></tr>
<tr><td colspan="3"><a href="#" class="acts_as_button en_add_to_my_meal_builder"></a></td></tr>
</tbody>
</table>
</div>
<div class="clear"></div>
</div>
</body>
Below is the css code:
div.small_title
{ font-size: 10px; color: #929292; text-align: center; max-width: 115px; line-height: 13px; padding-top: 5px; margin: 0 auto; } .product_item { position: relative; float:left; min-width: 35px; max-width: 189px; width: auto !important; text-align:center;
border: 1px solid #CCC;
}
Please help me!
Cheers!! Lokesh Yadav
© Stack Overflow or respective owner
