PDA

View Full Version : disjointed rollerover over while down showing blank image



jonnyfreak
05-30-2013, 11:36 AM
Im not sure if im on the correct forum but will soon see. I have created a disjointed rollerover like i have done loads of times before but for some reason this time when the button is click the "over while down" image is not showing? the images is on the server and the path looks correct.

here is the code for one of the buttons


<a href="product-page-list.php?catID=8" onmouseout="MM_swapImgRestore();MM_nbGroup('out')" onmouseover="MM_nbGroup('over','PRODUCTS1_r1_c4_s1','images/2013prodSelect/PRODUCTS1_r1_c4_s2.jpg','images/2013prodSelect/PRODUCTS1_r1_c4_s4.jpg',1);MM_swapImage('PRODUCTS1_r1_c3_s1','','images/2013prodSelect/PRODUCTS1_r1_c3_s7.jpg',1);" onclick="MM_nbGroup('down','navbar1','PRODUCTS1_r1_c4_s1','images/2013prodSelect/PRODUCTS1_r1_c4_s3.jpg',1);"><img name="PRODUCTS1_r1_c4_s1" src="images/2013prodSelect/PRODUCTS1_r1_c4_s1.jpg" width="232" height="90" border="0" id="PRODUCTS1_r1_c4_s1" alt="" /></a>

5070

this is what the button looks like when i press it

thanks in advance

Beverleyh
05-30-2013, 11:59 AM
Not sure - its hard to tell from code fragments.

Off the top of my head;
- check that file names/case match those referenced in the markup
- check that the images are actually at the location specified in the path (it sometimes helps to use absolute paths to troubleshoot)
- check that the image extensions/case are correct (e.g. its easy to put .jpg in markup when the image is actually .jpeg)

If you need more help, please post a link to the page.

jonnyfreak
05-30-2013, 12:11 PM
Not sure - its hard to tell from code fragments.

Off the top of my head;
- check that file names/case match those referenced in the markup
- check that the images are actually at the location specified in the path (it sometimes helps to use absolute paths to troubleshoot)
- check that the image extensions/case are correct (e.g. its easy to put .jpg in markup when the image is actually .jpeg)

If you need more help, please post a link to the page.

tried that

i have included a test link

http://www.jonfortis.co.uk/images/2013prodSelect/PRODUCTS1.htm

the link to the next page will not go to another page but when the button is clicked you will see an empty frame for the images

thanks

Beverleyh
05-30-2013, 12:59 PM
The rollover images work for me in IE10. The broken image picture that you uploaded looks a bit "Chromey" to me - is that what's happening for you in Chrome?
If it is, I've seen it too on a few websites and the images always come back once you do a refresh. I'm not entirely sure why it happens (maybe they get corrupted in the cache? or don't download fully?) but it seems to happen more often on large/unoptimised images. I know that doesn't help because yours are neither.

Can I make a suggestion? There's actually a really easy fix - You can eliminate the problem entirely if you use CSS instead.

Just put this in the <head> section of the web page;

<style type="text/css">

.greyButton {
border:0;
color:black;
display:table-cell;
font-family:Times New Roman, Georgia, Serif;
font-size:30px;
height:90px;
text-align:center;
text-decoration:none;
vertical-align:middle;
width:233px;
}

.greyButton:hover {
background:#ccc;
}

</style>

and replace this;
<a href="product-page-list.php?catID=8" onmouseout="MM_swapImgRestore();MM_nbGroup('out')" onmouseover="MM_nbGroup('over','PRODUCTS1_r1_c4_s1','images/2013prodSelect/PRODUCTS1_r1_c4_s2.jpg','images/2013prodSelect/PRODUCTS1_r1_c4_s4.jpg',1);MM_swapImage('PRODUCTS1_r1_c3_s1','','images/2013prodSelect/PRODUCTS1_r1_c3_s7.jpg',1);" onclick="MM_nbGroup('down','navbar1','PRODUCTS1_r1_c4_s1','images/2013prodSelect/PRODUCTS1_r1_c4_s3.jpg',1);"><img name="PRODUCTS1_r1_c4_s1" src="images/2013prodSelect/PRODUCTS1_r1_c4_s1.jpg" width="232" height="90" border="0" id="PRODUCTS1_r1_c4_s1" alt="" /></a>with;
<a href="product-page-list.php?catID=8" class="greyButton">NAUTICAL</a>Note the class in red that is used in the CSS.

Much easier to understand (both for you and search engines) and better for SEO since the link uses descriptive text in the <a> tag which provides a meaningful cue for Google bots (search engines don't see images and therefor cannot read text that is embedded inside them). It also looks a lot crisper and will work even if JavaScript is turned off in the browser.

Here's the complete code for your page with the alterations in place;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>PRODUCTS1.jpg</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">td img {display: block;}</style>
<!--Fireworks CS5 Dreamweaver CS5 target. Created Wed Apr 03 20:56:16 GMT+0100 (GMT Daylight Time) 2013-->
<script language="JavaScript1.2" type="text/javascript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])?args[i+1] : img.MM_up);
nbArr[nbArr.length] = img;
}
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) { img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
nbArr = document[grpName];
if (nbArr) for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
nbArr[nbArr.length] = img;
} }
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

//-->
</script>

<style type="text/css">

.greyButton {
border:0;
color:black;
display:table-cell;
font-family:Times New Roman, Georgia, Serif;
font-size:30px;
height:90px;
text-align:center;
text-decoration:none;
vertical-align:middle;
width:233px;
}

.greyButton:hover {
background:#ccc;
}

</style>

</head>
<body bgcolor="#ffffff" onload="MM_preloadImages('PRODUCTS1_r1_c1_s2.jpg','PRODUCTS1_r1_c1_s4.jpg','PRODUCTS1_r1_c1_s3.jpg','PRODUCTS1_r1_c3_s2.jpg','PRODUCTS1_r1_c4_s2.jpg','PRODUCTS1_r1_c4_s 4.jpg','PRODUCTS1_r1_c4_s3.jpg','PRODUCTS1_r1_c3_s7.jpg','PRODUCTS1_r3_c1_s2.jpg','PRODUCTS1_r3_c1_s4.jpg','PRODUCTS1_r3_c1_s3.jpg','PRODUCTS1_r1_c3_s3.jpg','PR ODUCTS1_r3_c4_s2.jpg','PRODUCTS1_r3_c4_s4.jpg','PRODUCTS1_r3_c4_s3.jpg','PRODUCTS1_r1_c3_s8.jpg','PRODUCTS1_r5_c1_s2.jpg','PRODUCTS1_r5_c1_s4.jpg','PRODUCTS1_r5 _c1_s3.jpg','PRODUCTS1_r1_c3_s4.jpg','PRODUCTS1_r5_c4_s2.jpg','PRODUCTS1_r5_c4_s4.jpg','PRODUCTS1_r5_c4_s3.jpg','PRODUCTS1_r1_c3_s9.jpg','PRODUCTS1_r7_c1_s2.jpg ','PRODUCTS1_r7_c1_s4.jpg','PRODUCTS1_r7_c1_s3.jpg','PRODUCTS1_r1_c3_s5.jpg','PRODUCTS1_r7_c4_s2.jpg','PRODUCTS1_r7_c4_s4.jpg','PRODUCTS1_r7_c4_s3.jpg','PRODUCT S1_r1_c3_s10.jpg','PRODUCTS1_r9_c1_s2.jpg','PRODUCTS1_r9_c1_s4.jpg','PRODUCTS1_r9_c1_s3.jpg','PRODUCTS1_r1_c3_s6.jpg','PRODUCTS1_r9_c4_s2.jpg','PRODUCTS1_r9_c4_ s4.jpg','PRODUCTS1_r9_c4_s3.jpg','PRODUCTS1_r1_c3_s11.jpg');">
<table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="980">
<!-- fwtable fwsrc="PRODUCTS.png" fwpage="Page 1" fwbase="PRODUCTS1.jpg" fwstyle="Dreamweaver" fwdocid = "559381124" fwnested="0" -->
<tr>
<td><img src="spacer.gif" width="232" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="1" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="515" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="232" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>

<tr>
<td rowspan="2" colspan="2">
<a href="product-page-list.php?catID=2" class="greyButton">HOMEWARE</a>
</td>
<td rowspan="10"><img name="PRODUCTS1_r1_c3_s1" src="PRODUCTS1_r1_c3_s1.jpg" width="515" height="450" border="0" id="PRODUCTS1_r1_c3_s1" alt="" /></td>
<td rowspan="2"><a href="product-page-list.php?catID=8" class="greyButton">NAUTICAL</a></td>
<td><img src="spacer.gif" width="1" height="5" border="0" alt="" /></td>
</tr>
<tr>
<td><img src="spacer.gif" width="1" height="85" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="2" colspan="2"><a href="product-page-list.php?catID=1" class="greyButton">CUSHIONS</a></td>
<td rowspan="2"><a href="product-page-list.php?catID=4" class="greyButton">GLASSWARE</a></td>
<td><img src="spacer.gif" width="1" height="5" border="0" alt="" /></td>
</tr>
<tr>
<td><img src="spacer.gif" width="1" height="85" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="2" colspan="2"><a href="product-page-list.php?catID=3" class="greyButton">FURNITURE</a></td>
<td rowspan="2"><a href="product-page-list.php?catID=5" class="greyButton">PICTURE<br/>FRAMES</a></td>
<td><img src="spacer.gif" width="1" height="5" border="0" alt="" /></td>
</tr>
<tr>
<td><img src="spacer.gif" width="1" height="85" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="2" colspan="2"><a href="product-page-list.php?catID=6" class="greyButton">CANDLES</a></td>
<td rowspan="2"><a href="product-page-list.php?catID=9" class="greyButton">CARDS</a></td>
<td><img src="spacer.gif" width="1" height="5" border="0" alt="" /></td>
</tr>
<tr>
<td><img src="spacer.gif" width="1" height="85" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="2" colspan="2"><a href="product-page-list.php?catID=7" class="greyButton">HOME<br/>FRAGRANCES</a></td>
<td rowspan="2"><a href="product-page-list.php?catID=10" class="greyButton">FLORAL</a></td>
<td><img src="spacer.gif" width="1" height="5" border="0" alt="" /></td>
</tr>
<tr>
<td><img src="spacer.gif" width="1" height="85" border="0" alt="" /></td>
</tr>
</table>
</body>
</html>
Just drop that into a test page to see the effect in action.

jonnyfreak
05-30-2013, 01:23 PM
The rollover images work for me in IE10. The broken image picture that you uploaded looks a bit "Chromey" to me - is that what's happening for you in Chrome?
If it is, I've seen it too on a few websites and the images always come back once you do a refresh. I'm not entirely sure why it happens (maybe they get corrupted in the cache? or don't download fully?) but it seems to happen more often on large/unoptimised images. I know that doesn't help because yours are neither.

Can I make a suggestion? There's actually a really easy fix - You can eliminate the problem entirely if you use CSS instead.

Just put this in the <head> section of the web page;

<style type="text/css">

.greyButton {
border:0;
color:black;
display:table-cell;
font-family:Times New Roman, Georgia, Serif;
font-size:30px;
height:90px;
text-align:center;
text-decoration:none;
vertical-align:middle;
width:233px;
}

.greyButton:hover {
background:#ccc;
}

</style>

and replace this;
<a href="product-page-list.php?catID=8" onmouseout="MM_swapImgRestore();MM_nbGroup('out')" onmouseover="MM_nbGroup('over','PRODUCTS1_r1_c4_s1','images/2013prodSelect/PRODUCTS1_r1_c4_s2.jpg','images/2013prodSelect/PRODUCTS1_r1_c4_s4.jpg',1);MM_swapImage('PRODUCTS1_r1_c3_s1','','images/2013prodSelect/PRODUCTS1_r1_c3_s7.jpg',1);" onclick="MM_nbGroup('down','navbar1','PRODUCTS1_r1_c4_s1','images/2013prodSelect/PRODUCTS1_r1_c4_s3.jpg',1);"><img name="PRODUCTS1_r1_c4_s1" src="images/2013prodSelect/PRODUCTS1_r1_c4_s1.jpg" width="232" height="90" border="0" id="PRODUCTS1_r1_c4_s1" alt="" /></a>with;
<a href="product-page-list.php?catID=8" class="greyButton">NAUTICAL</a>Note the class in red that is used in the CSS.

Much easier to understand (both for you and search engines) and better for SEO since the link uses descriptive text in the <a> tag which provides a meaningful cue for Google bots (search engines don't see images and therefor cannot read text that is embedded inside them). It also looks a lot crisper and will work even if JavaScript is turned off in the browser.

Here's the complete code for your page with the alterations in place;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>PRODUCTS1.jpg</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">td img {display: block;}</style>
<!--Fireworks CS5 Dreamweaver CS5 target. Created Wed Apr 03 20:56:16 GMT+0100 (GMT Daylight Time) 2013-->
<script language="JavaScript1.2" type="text/javascript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])?args[i+1] : img.MM_up);
nbArr[nbArr.length] = img;
}
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) { img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
nbArr = document[grpName];
if (nbArr) for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
nbArr[nbArr.length] = img;
} }
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

//-->
</script>

<style type="text/css">

.greyButton {
border:0;
color:black;
display:table-cell;
font-family:Times New Roman, Georgia, Serif;
font-size:30px;
height:90px;
text-align:center;
text-decoration:none;
vertical-align:middle;
width:233px;
}

.greyButton:hover {
background:#ccc;
}

</style>

</head>
<body bgcolor="#ffffff" onload="MM_preloadImages('PRODUCTS1_r1_c1_s2.jpg','PRODUCTS1_r1_c1_s4.jpg','PRODUCTS1_r1_c1_s3.jpg','PRODUCTS1_r1_c3_s2.jpg','PRODUCTS1_r1_c4_s2.jpg','PRODUCTS1_r1_c4_s 4.jpg','PRODUCTS1_r1_c4_s3.jpg','PRODUCTS1_r1_c3_s7.jpg','PRODUCTS1_r3_c1_s2.jpg','PRODUCTS1_r3_c1_s4.jpg','PRODUCTS1_r3_c1_s3.jpg','PRODUCTS1_r1_c3_s3.jpg','PR ODUCTS1_r3_c4_s2.jpg','PRODUCTS1_r3_c4_s4.jpg','PRODUCTS1_r3_c4_s3.jpg','PRODUCTS1_r1_c3_s8.jpg','PRODUCTS1_r5_c1_s2.jpg','PRODUCTS1_r5_c1_s4.jpg','PRODUCTS1_r5 _c1_s3.jpg','PRODUCTS1_r1_c3_s4.jpg','PRODUCTS1_r5_c4_s2.jpg','PRODUCTS1_r5_c4_s4.jpg','PRODUCTS1_r5_c4_s3.jpg','PRODUCTS1_r1_c3_s9.jpg','PRODUCTS1_r7_c1_s2.jpg ','PRODUCTS1_r7_c1_s4.jpg','PRODUCTS1_r7_c1_s3.jpg','PRODUCTS1_r1_c3_s5.jpg','PRODUCTS1_r7_c4_s2.jpg','PRODUCTS1_r7_c4_s4.jpg','PRODUCTS1_r7_c4_s3.jpg','PRODUCT S1_r1_c3_s10.jpg','PRODUCTS1_r9_c1_s2.jpg','PRODUCTS1_r9_c1_s4.jpg','PRODUCTS1_r9_c1_s3.jpg','PRODUCTS1_r1_c3_s6.jpg','PRODUCTS1_r9_c4_s2.jpg','PRODUCTS1_r9_c4_ s4.jpg','PRODUCTS1_r9_c4_s3.jpg','PRODUCTS1_r1_c3_s11.jpg');">
<table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="980">
<!-- fwtable fwsrc="PRODUCTS.png" fwpage="Page 1" fwbase="PRODUCTS1.jpg" fwstyle="Dreamweaver" fwdocid = "559381124" fwnested="0" -->
<tr>
<td><img src="spacer.gif" width="232" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="1" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="515" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="232" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>

<tr>
<td rowspan="2" colspan="2">
<a href="product-page-list.php?catID=2" class="greyButton">HOMEWARE</a>
</td>
<td rowspan="10"><img name="PRODUCTS1_r1_c3_s1" src="PRODUCTS1_r1_c3_s1.jpg" width="515" height="450" border="0" id="PRODUCTS1_r1_c3_s1" alt="" /></td>
<td rowspan="2"><a href="product-page-list.php?catID=8" class="greyButton">NAUTICAL</a></td>
<td><img src="spacer.gif" width="1" height="5" border="0" alt="" /></td>
</tr>
<tr>
<td><img src="spacer.gif" width="1" height="85" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="2" colspan="2"><a href="product-page-list.php?catID=1" class="greyButton">CUSHIONS</a></td>
<td rowspan="2"><a href="product-page-list.php?catID=4" class="greyButton">GLASSWARE</a></td>
<td><img src="spacer.gif" width="1" height="5" border="0" alt="" /></td>
</tr>
<tr>
<td><img src="spacer.gif" width="1" height="85" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="2" colspan="2"><a href="product-page-list.php?catID=3" class="greyButton">FURNITURE</a></td>
<td rowspan="2"><a href="product-page-list.php?catID=5" class="greyButton">PICTURE<br/>FRAMES</a></td>
<td><img src="spacer.gif" width="1" height="5" border="0" alt="" /></td>
</tr>
<tr>
<td><img src="spacer.gif" width="1" height="85" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="2" colspan="2"><a href="product-page-list.php?catID=6" class="greyButton">CANDLES</a></td>
<td rowspan="2"><a href="product-page-list.php?catID=9" class="greyButton">CARDS</a></td>
<td><img src="spacer.gif" width="1" height="5" border="0" alt="" /></td>
</tr>
<tr>
<td><img src="spacer.gif" width="1" height="85" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="2" colspan="2"><a href="product-page-list.php?catID=7" class="greyButton">HOME<br/>FRAGRANCES</a></td>
<td rowspan="2"><a href="product-page-list.php?catID=10" class="greyButton">FLORAL</a></td>
<td><img src="spacer.gif" width="1" height="5" border="0" alt="" /></td>
</tr>
<tr>
<td><img src="spacer.gif" width="1" height="85" border="0" alt="" /></td>
</tr>
</table>
</body>
</html>
Just drop that into a test page to see the effect in action.

thats brilliant, thanks. It must be a chrome issue? I should use css more. thanks again

Beverleyh
05-30-2013, 01:38 PM
No problem. Yes, I think its a Chrome issue - I'm just theorising now but it might be related to the fact that Chrome has been stripped of unnecessary fluff (that's what makes it ultra zippy) which could also mean that its been stripped of the tolerances that we see in other browsers. Maybe that's what we see with some broken images? Like it sometimes can't get a handle on them quick enough as it tries to render a page, before processing the next element? Do other browsers plod through web pages a little bit more strenuously and work a little harder to grab all the pieces? I haven't the foggiest, LOL :D