As seen in the attached, some results paragraphs do not "conform" to what seems to be the "standard" specification for width (visible from results paragraph at top of image.
How can we control (limit) the overall width of the table to prevent the oversize table that was generated for "productdata.js" ?
Also, the left-side box with icon and "fit" factor is specified in the header with width = 100px, but the oversize table/paragraph seems to have overriden this and reduced the width to the width of the icon plus margin. Is there any way to prevent that from happening ?
The current contents of the paragraph CSS is:
<table style="background-color: #AFAFAF; width: 850px;"
<!-- <table class="parspec" style="background-color: #AFAFAF;" -->
border-style="none" border-color:="" border="0">
<tbody>
<tr>
<td style="width: 100px; text-align: center;
background-color: #0F0F0F;"
rowspan="4" >
<a class="thumbnail" href="#">
<img src="%I" width="64px" height="auto"> <!-- set width of thumbnail -->
<span>
<img src="%U">
</span>
</a>
<p style="font-family: sans-serif; color: #4F9F4F;"><b>%R</b></p>
</td>
<td style="vertical-align: top;"><br>
<th
style="font-family: sans-serif; color: #DFDFDF;
background-color: #000000; text-align: left;"
colspan="3" >
%T</th>
</td>
</tr>
<tr>
<td style="vertical-align: top; "></td>
<td style="font-family: sans-serif; text-align: center;
background-color: #000000; color: #CFCF4F;">
<b><font size=2>%M</font></b></td>
<td style="font-family: sans-serif; text-align: center;
background-color: #000000; color: #CFCF4F;">
<b><font size=2>%D</font></b></td>
<td style="font-family: sans-serif; text-align: right;
background-color: #000000; color: #CFCF4F;">
<b><font size=2>%S</font></b></td>
</tr>
<tr style="font-family: sans-serif;" 8="">
<td style="vertical-align: top; "></td>
<td class="snippet" colspan="3">
%A</td>
</tr>
<tr style="font-family: sans-serif; color: #9F;">
<td style="vertical-align: top; "></td>
<td style="background-color: #000000; color: #BFBFEF;"
colspan="3">
<b><font size=2>%U</font></b><br>
<span style="color: #BFBFFF">%L </span></td>
</tr>
</tbody>
</table>
<br>
<br>
The current contents of the header CSS is:
<style type="text/css">
body {
width: 1000px;
color: #CFCFCF;
background-color: #1F1F1F;
}
a:link {
color: yellow;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: green;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: orange;
background-color: transparent;
font-weight: bold;
text-decoration: underline;
}
a:active {
color: red;
background-color: transparent;
text-decoration: underline;
}
.snippet{
background-color: #000000;
color: #AFAFDF;
}
.thumbnail {
display:block;
position:relative;
padding: 4px;
width: auto; /* set width of thumbnail image in 'paragraph' code - not here */
border:none;
z-index:0;
}
.thumbnail:hover {
border:none;
background-color: transparent;
z-index: 50;
}
.thumbnail span {
position: absolute;
left: -9999px;
visibility: hidden;
}
.thumbnail span img {
max-width:256px; /* set 'large image' max width/height - advise keeping these */
max-height:256px; /* the same to avoid inadvertently changing the aspect ratio */
width:auto; /* leave set to auto */
height:auto; /* leave set to auto */
background-color: gray;
padding: 1px;
border: 1px solid black;
}
.thumbnail:hover span {
visibility: visible;
top: 4px; /* top/left positions 'large image' relative to top left */
left: 88px; /* of parent thumbnail (plus padding) */
}
</style>
