css or html layout?

[jackvull]

I have a page with some small thumbnails created by the following PHP code:

function showdetailimages(){
global $Count,$rs,$xxPrev, $xxNext,$xxEnlrge,$xxOf, $extraimages,$magictoolbox, $magictooloptionsjs,$magictooloptions, $magic360images,$allimages,$allgiantimages, $numallimages,$numallgiantimages, $psmallimage, $thumbnailstyle,$magictouchid;
/***** New variable (Magic Toolbox) ******/
$magictoolbox_product = 'MagicTouch'; // possible values: MagicThumb / MagicZoom / MagicZoomPlus / MagicMagnify / MagicMagnifyPlus / MagicTouch
$magictoolbox_main_image_ref = '';
$magictoolbox_options = ''; // define product options here.

switch ($magictoolbox_product) {
case 'MagicThumb':
$magictoolbox_main_image_ref = 'thumb-id';
$magictoolbox_options .= 'caption-source: a:title;';
break;
case 'MagicTouch':
case 'MagicZoom':
case 'MagicZoomPlus':
$magictoolbox_main_image_ref = 'zoom-id';
break;
case 'MagicMagnify':
case 'MagicMagnifyPlus':
$magictoolbox_main_image_ref = 'magnifier-id';
break;
}

$extra_image_width = '100px'; // width of the extra image thumbnail
$extra_image_padding = '3px'; // width of the extra image thumbnail
/***** end of new variable ******/
if(@$thumbnailstyle=='') $thumbnailstyle='width:75px;padding:3px';
if(is_array($allimages)){
if(@$magictoolbox!='' && is_array($allgiantimages)){
print '<script src="' . ($magictoolbox=='MagicTouch' ? 'http://www.magictoolbox.com/mt/' . $magictouchid . '/magictouch.js' : strtolower($magictoolbox) . '/' . strtolower($magictoolbox) . '.js') . '" type="text/javascript"></script>' . @$magictooloptionsjs;
if($magictoolbox=='MagicSlideshow' || $magictoolbox=='MagicScroll'){
print '<div class="' . $magictoolbox . '">';
for($index=0;$index<$numallimages;$index++){
print '<img src="' . $allimages[$index]['imageSrc'] . '" alt="" />';
}
print '</div>';
}elseif($magictoolbox=='magic360plus' || $magictoolbox=='magic360'){
$anchorstr = '<a class="' . $magictoolbox . '" href="#" rel="' . $allgiantimages[0]['imageSrc'];
$imagesstr = '<img src="' . $allimages[0]['imageSrc'] . '" alt="' . strip_tags($rs[getlangid('pName',1)]) . '" rel="' . $allimages[0]['imageSrc'];
if(@$magic360images=='') $magic360images=18;
for($magind=2;$magind<=$magic360images;$magind++){
if($magictoolbox=='magic360plus') $anchorstr.= '*' . str_replace('01', ($magind<10 ? '0' . $magind : $magind), $allgiantimages[0]['imageSrc']);
$imagesstr.= '*' . str_replace('01', ($magind<10 ? '0' . $magind : $magind), $allimages[0]['imageSrc']);
}
if($magictoolbox=='magic360plus') print $anchorstr . '">' . $imagesstr . '" /></a>'; else print $imagesstr . '" class="' . $magictoolbox . '" />';
}elseif($magictoolbox=='MagicZoom' || $magictoolbox=='MagicZoomPlus' || $magictoolbox=='MagicTouch' || $magictoolbox=='MagicMagnify' || $magictoolbox=='MagicMagnifyPlus' || $magictoolbox=='MagicThumb'){
if($numallimages>1) print '<table class="detailimage" border="0" cellspacing="1" cellpadding="1"><tr><td class="mainimage">';
print '<a href="' . $allgiantimages[0]['imageSrc'] . '" class="' . $magictoolbox . '" ' . @$magictooloptions . ' id="zoom1"><img class="prodimage" src="' . $allimages[0]['imageSrc'] . '" border="0" alt="' . strip_tags($rs[getlangid('pName',1)]) . '" /></a>';
if($magictoolbox=="MagicThumb") $relid="thumb-id:"; else $relid="";
if($magictoolbox=="MagicZoom" || $magictoolbox=="MagicZoomPlus") $relid="zoom-id:";
if($numallimages>1){
print '</td></tr><tr><td class="thumbnailimage" align="center">';
for($index=0;$index<$numallimages;$index++){
if($index < $numallgiantimages) print '<a href="' . $allgiantimages[$index]['imageSrc'] . '" rev="' . $allimages[$index]['imageSrc'] . '" rel="' . $relid . 'zoom1"><img src="' . $allimages[$index]['imageSrc'] . '" style="' . $thumbnailstyle . '" border="0" alt="" /></a>';
}
print '</td></tr></table>';
}
}else
print 'Magic Toolbox Option Not Recognized : ' . $magictoolbox . '<br />';
}else{
if($numallimages>1 || is_array($allgiantimages)) print '<table class="detailimage" border="0" cellspacing="1" cellpadding="1"><tr><td class="mainimage">';
print '<img id="prodimage'.$Count.'" class="prodimage" src="' . $allimages[0]['imageSrc'] . '" border="0" alt="'.str_replace('"','&quot;',strip_tags($rs[getlangid('pName',1)])).'" />';
if($numallimages>1 || is_array($allgiantimages)) print '</td></tr><tr><td class="imagenavigator" align="center">'.($numallimages>1 ? '<img border="0" src="images/leftimage.gif" onclick="return updateprodimage('.$Count.', false);" onmouseover="this.style.cursor=\'pointer\'" alt="'.$xxPrev.'" style="vertical-align:middle;margin:0px;" />' : '&nbsp;').' '.($numallimages>1 ? '<span class="extraimage extraimagenum" id="extraimcnt'.$Count.'">1</span> <span class="extraimage">'.$xxOf.' '.$extraimages.'</span> ' : '').(is_array($allgiantimages) ? '<span class="extraimage">(<a class="ectlink" href="javascript:showgiantimage(\'' . $allgiantimages[0]['imageSrc'] . '\')">'.$xxEnlrge.'</a>)</span>' : '') . ' '.($numallimages>1 ? '<img border="0" src="images/rightimage.gif" onclick="return updateprodimage('.$Count.', true);" onmouseover="this.style.cursor=\'pointer\'" alt="'.$xxNext.'" style="vertical-align:middle;margin:0px;" />' : '&nbsp;').'</td></tr></table>';
}
}elseif($psmallimage!=''){
print '<img id="prodimage'.$Count.'" class="prodimage" src="' . $psmallimage . '" border="0" alt="'.str_replace('"','&quot;',strip_tags($rs[getlangid('pName',1)])).'" />';
}else
print '&nbsp;';
}

I tried to split out the code that creates the thumbnails but no matter where else I put them on the page, they always appear underneath the big image.
I tried looking at the css in firbug to see what was causing this but I couldn;t find out what it was.

Does anyone have any ideas?
I need to get the thumbnails underneath the <hr> line on the right hand side.

[edited by: eelixduppy at 5:50 pm (utc) on Dec 15, 2011]
[edit reason] fixed side scroll and removed url [/edit]

[lucy24]

Preliminary question: What happens if you replace the php-generated images with static images, while retaining everything else? Solve one problem at a time. Fighting with three at once (php, html, css) can only lead to misery.

[rocknbil]

jackvull that is horrible code on many levels, but bottom line, don't see where an <hr> is being generated at all. Have you looked for something else that does what you want (without the need for Javascript?)

I tried looking at the css in firbug to see what was causing this but I couldn;t find out what it was.

This is possibly because something in the Javascript may be generating it?

That being said, if you can't or don't want to use something else, you can **always** access most page elements with CSS. I've been "trapped" without access to what is generating poor code before. What you'd do is outut the page, examine it in firebug, and write rules for it. For example, if the big images are class "bigimage" you could hide them with ".bigimage { display:none; } "

That's a REALLY bad idea for big images, as the page weight will be the same, but you get the gist. Another way, if you can't change to something else (which I recommend again. :-) ) is to apply Javascript to the page to remove or modify elements.

All that is just a "workaround" - personally I'd scrap it for something else.