Menu
Originally I was going to build this using only CSS. But there are so many elements that need to be lined up perfectly like in a table. So now I am building it in a table with CSS and have hit a road block. You can se the bottom of this page, the middle bar doesn’t line up with the bottom of my corners and there is an odd space between projector mounts and cp-3025. This all happened when I started puttin the Features, Specs, and downloads in.
Here is the messed up page with the middle text:
[url]http://maxwho.com/mm5/merchant.mvc?Screen=MMStorePro60&Store_Code=M
Here is a page that works as long as I don’t put middle info
[url]http://maxwho.com/mm5/merchant.mvc?Screen=MMStoreTilt60&Store_Code=M
The code for the broken table:
[CODE]
<table width=”753″ border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″ background=”FFFFFF”>
<tr>
<td width=”142″ scope=”col”><img src=”/mm5/graphics/00000001/flatPanelTV.gif” alt=”box1″ /></td>
<td scope=”col” valign=”top”><div class=”middleBottom”>
<table><tr><td class=”middleBottomText”><b>MountMaster™ Pro-60</b></td><td class=”middleBottomTextRight”><b>Premium Wall Mount for 32″-60″ FPTVs </b></td>
</tr></table></div> </td>
<td><img src=”/mm5/graphics/00000001/RTopCorner.gif” alt=”corner” border=”0″ height=”41″ width=”16″/></td>
</tr>
<tr>
<td class=”style1heading”><div align=”left” class=”style3″>X-Large: 32-60" </div></td><td rowspan=”16″>
<table width=”550″ align=”center” height=”165″>
<tr><td colspan=”3″ rowspan=”2″ height=”159″ width=”200″ valign=”top”><img src=”/mm5/graphics/00000001/MMpro60pic.jpg”/></td>
<td colspan=”3″ rowspan=”2″ height=”159″ width=”200″ valign=”top”>
<div class=”productTextBox”><div class=”productTextPrice”>$199.99</div><br />
<form method=”post” action=”&mvt:global:sessionurl;”>
<input type=”hidden” name=”Action” value=”ADPR”>
<input type=”hidden” name=”Screen” value=”MMStorePro60″>
<input type=”hidden” name=”Store_Code” value=”&mvte:store:code;”>
<input type=”hidden” name=”Product_Code” value=”10860″>
<input type=”hidden” name=”Category_Code” value=”TV”>
<mvt:item name=”product_attributes” param=”product:id” />
<mvt:item name=”fonts” param=”body_font”>
<div class=”productText”>Quantity: </font> <input type=”text” name=”Quantity” value=”1″ maxlength=”2″ style=”width:2em; text-align:center; align: right;”></div><br>
<input type=”image” src=”/mm5/graphics/00000001/MMStoreATC.gif” border=”0″>
</form>
</div></td>
<td width=”120″ height=”159″ align=”center” valign=”top”><div class=”topRightcornerQuantity”><font family=”HelveticaNeue, sans-serif” size=”2″>Quantity in your cart:<br>
</font><mvt:item name=”minibask” param=”brief”/><br>
<a href=”/mm5/merchant.mvc?Screen=MMStoreCart&Store_Code=M”>View Cart</a>
<a href=”/mm5/merchant.mvc?Screen=OINF&Store_Code=M”>Checkout</a></td></div></tr>
</table>
<table align=”center”><tr><td width=”156″><span class=”style44″>Features</span></td>
<td width=”172″><span class=”style44″>Specifications</span></td>
<td width=”158″><span class=”style44″>Downloads</span></td>
<td width=”10″> </td>
</tr>
<tr>
<td width=”156″><span class=”style42″>Dynamic 20° tilt for the perfect viewing angles </span></td>
<td width=”172″><span class=”style42″>For FPTV Sizes: 32"-60" </span></td>
<td width=”158″><span class=”style42″>Manual (.PDF 68kb) </span></td>
<td width=”10″> </td>
</tr>
<tr>
<td width=”156″><span class=”style42″>High-strength aluminum alloy construction. </span></td>
<td width=”172″><span class=”style42″>Material: Aluminum alloy </span></td>
<td width=”158″><span class=”style42″>Mounting diagram (.PDF 18kb) </span></td>
<td width=”10″> </td>
</tr>
<tr>
<td width=”156″><span class=”style42″>Supports up to 220 lbs (100 kg) </span></td>
<td width=”172″><span class=”style42″>Finish: Midnight gray powder-coat </span></td>
<td width=”158″><span class=”style46″></span></td>
<td width=”10″> </td>
</tr>
<tr>
<td width=”156″><span class=”style42″>Lateral shift allows ideal positioning </span></td>
<td width=”172″><span class=”style42″>Tilt: 0°-20°</span></td>
<td width=”158″><span class=”style46″></span></td>
<td width=”10″> </td>
</tr>
<tr>
<td width=”156″><span class=”style42″>durable powder-coat finish </span></td>
<td width=”172″><span class=”style42″>Max. Mounting: 700(H) x 400 (V) mm </span></td>
<td width=”158″><span class=”style46″></span></td>
<td width=”10″> </td>
</tr>
</table>
</td>
<td colspan=”3″ rowspan=”17″><div class=”borderSide”><img src=”/mm5/graphics/00000001/whitespacer.gif” alt=”borderRight” width=”1″ height=”340″/></div>
<div align=”right”><img src=”/mm5/graphics/00000001/RBottomCornerWhite.gif” alt=”BRcorner” width=”16″ /></div></td>
</tr>
<tr>
<td class=”style1″><div align=”left” class=”style2″><a href=”/mm5/merchant.mvc?Screen=MMStorePro60&Store_Code=M”>Pro-60</a></div></td>
</tr>
<tr>
<td class=”style1″><div align=”left” class=”style2″><a href=”/mm5/merchant.mvc?Screen=MMStoreTilt60&Store_Code=M”>Tilt-60</a></div></td>
</tr>
<tr>
<td class=”style1″><div align=”left” class=”style2″><a href=”/mm5/merchant.mvc?Screen=MMStoreFlat60&Store_Code=M”>Flat-60</a></div></td>
</tr>
<tr>
<td class=”style1heading”><div align=”left” class=”style3″>Large: 26-52" </div></td>
</tr>
<tr>
<td class=”style1″><div align=”left” class=”style2″><a href=”/mm5/merchant.mvc?Screen=MMStorePro52&Store_Code=M”>Pro-52</a></div></td>
</tr>
<tr>
<td class=”style1″><div align=”left” class=”style2″><a href=”/mm5/merchant.mvc?Screen=MMStoreTilt52&Store_Code=M”>Tilt-52</a></div></td>
</tr>
<tr>
<td class=”style1″><div align=”left” class=”style2″><a href=”/mm5/merchant.mvc?Screen=MMStoreFlat52&Store_Code=M”>Flat-52</a></div></td>
</tr>
<tr>
<td class=”style1heading”><div align=”left” class=”style3″>Medium: 22-45" </div></td>
</tr>
<tr>
<td class=”style1″><div align=”left” class=”style2″><a href=”/mm5/merchant.mvc?Screen=MMStoreTilt45&Store_Code=M”>Tilt-45</a></div></td>
</tr>
<tr>
<td class=”style1″><div align=”left” class=”style2″><a href=”/mm5/merchant.mvc?Screen=MMStoreFlat45&Store_Code=M”>Flat-45</a></div></td>
</tr>
<tr>
<td class=”style1heading”><div align=”left” class=”style3″>Small: 17-32"</div> </td>
</tr>
<tr>
<td class=”style1″><div align=”left” class=”style2″><a href=”/mm5/merchant.mvc?Screen=MMStoreFlat32&Store_Code=M”>Flat-32</a></div></td>
</tr>
<tr>
<td class=”style1heading”><div align=”left” class=”style3″>X-Small: 12-24"</div> </td>
</tr>
<tr>
<td class=”style1″><div align=”left” class=”style2″><a href=”/mm5/merchant.mvc?Screen=MMStoreSW24&Store_Code=M”>SW-24</a></div></td>
</tr>
<tr>
<td height=”32″ class=”titleBoxes”><img src=”https://maxwho.com/mm5/graphics/00000001/projectorMounts.gif” alt=”box” /></td>
</tr>
<tr>
<td height=”32″><a href=”/mm5/merchant.mvc?Screen=MMStorecp3025&Store_Code=M” onmouseout=”MM_swapImgRestore()” onmouseover=”MM_swapImage(‘Image8′,”,’/mm5/graphics/00000001/cp3025over.gif’,1)”><img src=”/mm5/graphics/00000001/cp3025.gif” name=”Image8″ border=”0″ id=”Image8″/></a></td><td><div class=”middleBottomNew”><img src=”/mm5/graphics/00000001/whitespacer.gif” alt=”borderRight” width=”300″ height=”2″/></div></td>
</tr>
</table>
</body>
</html>
Thank you so much for your help! I just need another pair of eyes to catch what I am doing wrong. I appreciate any little tid bits of info I can get.