[x]
Posted via EE Mobile

Search, ask, and monitor your questions on the go with EE Mobile. Visit Experts Exchange from your mobile device and never be out of touch again.
09/17/2008 at 06:39AM PDT, ID: 23738454
[x]
Attachment Details
[x]
The Solution Rating System

With so many solutions, how can you tell which solutions are most likely to help you and which ones are not? To provide you with a tool to use, we rate our solutions based on various elements that most accurately determine if a solution is a quality solution. To explain what factors affect the solution rating, here are the elements we take into consideration when formulating our solution rating.

  • The Grade of the Solution
  • The Zone Rank of the Expert Providing the Solution
  • The Number of Author and Expert Comments
  • The Number of Experts Contributing
  • The Feedback of the Community

Your Input Matters
Because of the way the system is set up, the most important variable in this equation is you. As a member of Experts Exchange, you are able to cast your vote on the quality of the solutions in regard to how complete, accurate, helpful and easy to understand each solution is. When you provide your feedback, each rating is adjusted accordingly. So, if you see a solution that has a poor rating that you think is a good solution, let us know by rating it. As you do, the rating will be adjusted and will become more accurate for other members of our site.

If you have any suggestions that you would like to make for our rating system, please ask a question in the Suggestions Zone of Community Support.

Thank you!
9.2

Image Inside Table Shifts Cells Beneath it in IE7

Asked by mikerowaves in Extensible HTML (XHTML), Cascading Style Sheets (CSS)

Tags: CSS/XHTML, FF3, IE7

Hello Experts,

I am running into a problem with my client's site. I have a product image within a table, within a table. When the product image is inside the table in a cell as intended, it shifts the remaining cells of the table (.item_contents) underneath it to the left about 10px when viewed in IE7. When I check the site in Firefox, the cells underneath it are spaced correctly. The image is enclosed in a colspan="2" in order to span the width of the two columns below it. The column on the left with the "header" class is supposed to be spaced 105px as my code shows, and the column on the right does not have a width set so that the browser automatically calculates the difference.

I know it is a problem with the image because I commented the image tag out and the cells operate as they should between both browsers. I can't for the life of me figure it out. The other table on the right is spaced correctly no matter what browser you view the site in and it is all text-based, so I know that this is where the problem lies. I have attached my HTML/CSS pertaining to the problem.

Also, if it helps, you can view the product page at: http://www.everwired.com/clients/cfs/beta/products.php?catID=4&prodID=1&itemID=1

Thanks in advance as always.
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:

// The CSS
table#item_frame {
	width:592px;
	margin:4px 4px 10px 2px;
	background:transparent;
}
 
table#item_frame td#left {
	width:237px;
	background:transparent;
}
 
table#item_frame td#spacer {
	width:6px;
	background:transparent;
}
 
table#item_frame td#right {
	width:349px;
	background:transparent;
}
 
table.item_contents {
	width:100%;
	background:transparent;
}
 
table.item_contents td {
	padding:4px;
	border-bottom:1px solid #cacaca;
	font:normal 11px verdana;
	line-height:18px;
	color:#333;
	text-align:left;
}
 
table.item_contents td a {
	font:normal 11px verdana;
	line-height:18px;
	color:#b20522;
}
 
table.item_contents td a:hover {
	text-decoration:none;
}
 
table#item_frame td#left table.item_contents td img {
	width:229px;
	height:215px;
	margin:0px;
	padding:0px;
	border:0px;
}
 
table.item_contents td.title {
	font:bold 12px verdana;
	color:#333;
	border-bottom:1px solid #cacaca;
}
 
table.item_contents td.heading {
	border-right:1px solid #cacaca;
	width:105px;
}
 
 
// The HTML
<table id="item_frame" cellspacing="0" cellpadding="0" border="0" valign="top">
	<tr>
		<td id="left" valign="top">
			<table class="item_contents" cellpadding="0" cellspacing="0" valign="top">
				<tr>
					<td colspan="2" class="title">
						Product Image
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<img src="images/products/refrigeration<?php echo "$item_folder_name"; ?><?php echo "$itemID"; ?>.jpg" alt="<?php echo "$bc_item_name"; ?>" pbsrc="images/products/refrigeration<?php echo "$item_folder_name"; ?><?php echo "$itemID"; ?>.jpg" class="PopBoxImageSmall" onclick="Pop(this,50,'PopBoxImageLarge');" />
						<p class="enlarge">click image to enlarge</p>
					</td>
				</tr>
				<tr>
					<td colspan="2" class="title">
						General Information
					</td>
				</tr>
				<tr>
					<td class="heading">
						Product:
					</td>
					<td>
						<?php echo "$bc_item_name"; ?>
					</td>
				</tr>
				<tr>
					<td class="heading">
						Details:
					</td>
					<td>
						Laboratory/Pharmacy Storage
					</td>
				</tr>
				<tr>
					<td class="heading">
						Price:
					</td>
					<td>
						N/A
					</td>
				</tr>
				<tr>
					<td class="heading">
						Quote:
					</td>
					<td>
						<?php
							$item_name_array = explode(' ', $bc_item_name);
							$item_name_us = implode('_', $item_name_array);
						?>
						<a href="modules/quote_request.php?pname=<?php echo "$item_name_us"; ?>" rel="facebox">Get a Quote!</a>
					</td>
				</tr>
				<tr>
					<td colspan="2" class="title">
						Additional Resources
					</td>
				</tr>
				<tr>
					<td class="heading">
						Charts/Graphs &amp; Additional Images:
					</td>
					<td>
						N/A
					</td>
				</tr>
				<tr>
					<td class="heading">
						Adobe PDF:
					</td>
					<td>
						<a href="docs/refrigeration/Premier_Refrigs.pdf" target="_new">Download PDF</a>
					</td>
				</tr>
			</table>
		</td>
		<td id="spacer">
		</td>
		<td id="right" valign="top">
			<table class="item_contents" cellpadding="0" cellspacing="0" valign="top">
				<tr>
					<td colspan="2" class="title">
						Specifications
					</td>
				</tr>
				<tr>
					<td class="heading">
						Description:
					</td>
					<td>
						Designed to meet the demanding requirements of scientific and laboratory applications. Special cabinet incorporates industrial quality with a heavy duty refrigeration system to maintain your valuable products.
					</td>
				</tr>
				<tr>
					<td class="heading">
						Features:
					</td>
					<td>
						&raquo; Air-cooled condensing unit<br />	 
						&raquo; Automatic condensate evaporation<br />
						&raquo; Automatic defrost<br />
						&raquo; Casters - 1 &amp; 2 door<br />
						&raquo; 6" legs - 3 door<br />
						&raquo; Digital LED thermometer<br />
						&raquo; Door opening heaters<br />
						&raquo; Ducted air distribution<br />
						&raquo; Epoxy coated shelves<br />
						&raquo; Expansion valve system<br />
						&raquo; Fluorescent interior light<br />
						&raquo; Full glass doors<br />
						&raquo; Key locks<br />
						&raquo; Magnetic gasketing<br />
						&raquo; Adjustable control range<br />
						&raquo; Polyurethane foam insulation<br />
						&raquo; Stocked for same day shipment<br />
						&raquo; White exterior<br />
						&raquo; White interior<br />
						&raquo; Warranties: 1 year parts and labor<br />
						&raquo; 5 year compressor
					</td>
				</tr>
				<tr>
					<td class="heading">
						Optional Features:
					</td>
					<td>
						&raquo; Alarm systems<br />
						&raquo; Custom paint<br />
						&raquo; Extra shelves<br />
						&raquo; Left or right hand hinges<br />
						&raquo; Legs in lieu of casters<br />
						&raquo; Live quadplex outlet<br />
						&raquo; 2" sleeve with cover<br />
						&raquo; Up to 8 stainless steel drawers per door<br />
						&raquo; Solid doors<br />
						&raquo; Stainless steel exterior<br />
						&raquo; Stainless steel interior<br />
						&raquo; Temperature recorder
					</td>
				</tr>
				
			</table>
		</td>
	</tr>
</table>
 
Keywords: Image Inside Table Shifts Cells Beneath…
Title
1 IE7 Weird Table Bug
 
Loading Advertisement...
 
[+][-]09/17/08 01:44 PM, ID: 22503448

View this solution now by starting your 30-day free trial. Setting up your free trial is quick, easy, and secure. We will return you to this solution, unlocked, when you're done.

 

About this solution

Zones: Extensible HTML (XHTML), Cascading Style Sheets (CSS)
Tags: CSS/XHTML, FF3, IE7
Sign Up Now!
Solution Provided By: scrathcyboy
Participating Experts: 1
Solution Grade: A
 
 
[+][-]09/17/08 04:07 PM, ID: 22504591

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 30-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]09/17/08 08:31 PM, ID: 22506983

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 30-day free trial to view this Expert Comment or ask the Experts your question.

 
 
Loading Advertisement...
20091111-EE-VQP-91 / EE_QW_2_20070628