Hello all,
I made a new design for a side-by-side comparison table. I uploaded the code to a test page before implementing it in the landing pages. There are a couple of things I didn’t quite figure out yet, though.
-
Properly hide the product name/logo text behind the image, only to be displayed when images are turned off.
**make the text align nicely and vertically even -
Fix the graph so it doesn’t shrink from the left side. When I apply a percentage width to one of the bar images, the graph shrinks from the left, which is obviously backwards.
<h1>Creating a New Table</h1>
<div class="tablewrap">
<table class="sidebysidecomparison">
<tr>
<th colspan="3">Comparison</th>
</tr>
<tr>
<td class="catcolumn"></td>
<td class="firstrowtop">
<p class="prodname">Guitar Tricks</p>
<img src="guitartrickslogo.jpg" title="Guitar Tricks" alt=" " width="140" height="40" />
</td>
<td class="firstrowtop">
<p class="prodname">Jamorama</p>
<img src="jamlogo.jpg" title="Jamorama" alt=" " width="130" height="95" />
</td>
</tr>
<tr>
<td class="catcolumn firstcolleft">Overall</td>
<td class="firstrowbottom firstcolright">
<div class="xgraph">
<div class="horizbar" id="guitartricksoverall2"></div>
<div class="xaxis"></div>
</div>
<div class="ratingnumber">9.0</div>
</td>
<td class="firstrowbottom">
<div class="xgraph">
<div class="horizbar" id="guitartrickslayout1"></div>
<div class="xaxis"></div>
</div>
<div class="ratingnumber">8.5</div>
</td>
</tr>
<tr>
<td class="catcolumn firstcolleft">Features</td>
<td class="firstcolright">
<div class="xgraph">
<div class="horizbar" id="guitartrickslayout1"></div>
<div class="xaxis"></div>
</div>
<div class="ratingnumber">8.2</div>
</td>
<td>
<div class="xgraph">
<div class="horizbar" id="guitartrickslayout1"></div>
<div class="xaxis"></div>
</div>
<div class="ratingnumber">7.5</div>
</td>
</tr>
<tr>
<td class="catcolumn firstcolleft">User Interface</td>
<td class="firstcolright">
<div class="xgraph">
<div class="horizbar" id="guitartrickslayout1"></div>
<div class="xaxis"></div>
</div>
<div class="ratingnumber">9.6</div>
</td>
<td>
<div class="xgraph">
<div class="horizbar" id="guitartrickslayout1"></div>
<div class="xaxis"></div>
</div>
<div class="ratingnumber">8.8</div>
</td>
</tr>
<tr>
<td class="catcolumn firstcolleft">Video Content</td>
<td class="firstcolright">
<div class="xgraph">
<div class="horizbar" id="guitartrickslayout1"></div>
<div class="xaxis"></div>
</div>
<div class="ratingnumber">8.9</div>
</td>
<td>
<div class="xgraph">
<div class="horizbar" id="guitartrickslayout1"></div>
<div class="xaxis"></div>
</div>
<div class="ratingnumber">9.0</div>
</td>
</tr>
<tr>
<td class="catcolumn firstcolleft">Cost</td>
<td class="firstcolright green">$12.50 per month</td>
<td class="green">$10 per month</td>
</tr>
</table>
</div>
the styles:
/* 2nd table - horizontal graph comparison between 2 different products or services */
table.sidebysidecomparison {
border-spacing:0; /* border-spacing: is the equivalent of the cellspacing attribute only better. */
border-left:2px solid #ccc; /* specifiying border properties (esp. color) makes them cross-browser consistent... */
border-top:2px solid #ccc; /* the shading of border-style: inset, outset, groove, and ridge vary considerably between browsers */
border-right:2px solid #999;
border-bottom:2px solid #999;
margin:0 auto;
width:90%; /* adjusted for the table to wrap with the images and text */
text-align:center;
font-weight:bold;
}
.sidebysidecomparison th { /* Styles the title bar */
font-size:1.5em;
font-family:Georgia,serif;
padding:6px 0;
}
.sidebysidecomparison td.catcolumn {
padding:3px 4px;
font-family:Arial, Helvetica, sans-serif;
}
.sidebysidecomparison th,
.sidebysidecomparison td { /* these borders are also applied to the cells in the .rating (inner) table. */
border-left:2px solid #999;
border-top:2px solid #999;
border-right:2px solid #ccc;
border-bottom:2px solid #ccc;
/* FYI: if {padding:0;} were applied here, it would be the equivalent of the cellpadding="0" attribute except that it would apply to all cells in both tables. */
}
td.firstcolleft{text-align:left; min-width:5.5em; border-right:2px dotted #757575;}
td.firstcolright{border-left:2px dotted #757575;}
td.firstrowtop{border-bottom:2px dotted #757575;}
td.firstrowbottom{border-top:2px dotted #757575;}
.namelogo span{
repeat:no-repeat;
position:absolute;
top:0;
left:0;
}
p.namelogo{
position:relative;
width:100%;
height:100%;
}
.xgraph {
height:34px; /* same as the colored bar and xaxis images */
width:150px;
position:relative; /* creates a stacking context for the elements inside the .ratings table cells (because table cells cannot be positioned). */
overflow:hidden;
}
.xaxis {
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
background:url("xaxis.gif") no-repeat 100% 100%; /* 180x240 */
}
.horizbar {
width:100%;
height:100%;
position:absolute;
right:0; /* offsets the right edge of the colored bar */
bottom:14px;
background:url("horizbar.jpg") repeat-x 0 100%;
}
div.ratingnumber {text-align:center; font-weight:bold; padding:0; margin-top:3px;}
.prodname {
font-weight:bold;
position:absolute;
}
#guitartricksoverall2{width:80%;}
.green{color:#060;}
.bold{font-weight:bold;}
I appreciate your input.
Cheers,
Tyler
I wonder what is causing those logo images to be tiny and not properly aligned when I transferred the code into the live page. It may be something colliding with the image styles 
); if both are the same dimensions, no pinstripes will be seen. (2) There will be no opportunity around a short image for the hidden text in .prodname to peep around the edges of the image if the user’s font-size happens to be larger than you designed for or if the text takes up two or maybe three lines. Right now, the text “Guitar Tricks” is barely hidden.