I have a series of 6 rollover images which had previously accurately abutted each other to perfection,
I added the same files to another page and they appear tp have had a "transparent border" added to them leaving space between each of the images.
Veiwed in the design "mode" these images appear perfectly spaced. In Live View mode the space is apparant
What goes on, and how can I fix this problem?
a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Cooperage','','December MERC MENUS/SINGLE MENU BLANKS/White Cooperage.png',1)"><img src="December MERC MENUS/SINGLE MENU BLANKS/Red_Cooperage.png" name="Cooperage" width="95" height="39" border="0" id="Cooperage" /></a>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Stave mill','','December MERC MENUS/SINGLE MENU BLANKS/White_Stave_Mill.png',1)"><img src="December MERC MENUS/SINGLE MENU BLANKS/Red_Stave_Mill.png" name="Stave mill" width="95" height="39" border="0" id="Stave mill" /></a>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Testimonials','','December MERC MENUS/SINGLE MENU BLANKS/Testimonials_White.png',1)"><img src="December MERC MENUS/SINGLE MENU BLANKS/Red_Testimonials.png" name="Testimonials" width="95" height="39" border="0" id="Testimonials" /></a>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Toasts','','December MERC MENUS/SINGLE MENU BLANKS/WHite_Toasts.png',1)"><img src="December MERC MENUS/SINGLE MENU BLANKS/Red_Toasts.png" name="Toasts" width="95" height="39" border="0" id="Toasts" /></a>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Testimonials','','December MERC MENUS/SINGLE MENU BLANKS/WHite_Testimonials.png',1)"></a>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('GALLERY','','December MERC MENUS/SINGLE MENU BLANKS/White_Gallery.png',1)"><img src="December MERC MENUS/SINGLE MENU BLANKS/Red_Gallery.png" name="GALLERY" width="95" height="39" border="0" id="GALLERY" /></a>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('gallery','','December MERC MENUS/SINGLE MENU BLANKS/White_Gallery.png',1)"></a>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image19','','December MERC MENUS/SINGLE MENU BLANKS/Clients_White.png',1)"><img src="December MERC MENUS/SINGLE MENU BLANKS/Clients_RED.png" name="Image19" width="95" height="39" border="0" id="Image19" /></a>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Prices','','December MERC MENUS/SINGLE MENU BLANKS/White_Prices.png',1)"><img src="December MERC MENUS/SINGLE MENU BLANKS/Red_Prices.png" name="Prices" width="95" height="39" border="0" id="Prices" /></a>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('CLients','','December MERC MENUS/SINGLE MENU BLANKS/Clients_White.png',1)"></a>
</p>
there are no links
Sure there are -
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Prices','','December MERC MENUS/SINGLE MENU BLANKS/White_Prices.png',1)"><img src="December MERC MENUS/SINGLE MENU BLANKS/Red_Prices.png" name="Prices" width="95" height="39" border="0" id="Prices" /></a>
That's a link.
{ border:none; }
could you kindly provide a more complete example of where this code would be added?
Change this -
</head>
to this -
<style type="text/css">
a img { border:none; }
</style>
</head>
Previously placed rollovers are remaining properly spaced and aligned througout the process of adding the improperly spaced rollover images, and have remained so, while making the suggested alterations, including making this latest suggested change:
<style type="text/css">
a img { border:none; }
</style>
</head>
Here's what's bad about that page:
1. There's no readable content on it. Everything is an image, including the 'content'. This is a very poor choice as it means that search engines cannot spider the content on the page.
2. You have used absolute links to everything - <h1><img src="http://www.boswellcompany.com/BigBLOGO.png" alt="logo" width="120" height="120" align="middle" /></h1>. This will prove to be awkward as you maintain the page.
3. You have used spaces in file/pathnames - <img src="http://www.boswellcompany.com/ REDbarrels.jpg" (note the name beginning with a space!) - this is not a recommended practice for use on the web.
Now - you mention problems with submenus - I don't see any submenus on that page! And, I'm not seeing any unusual spacing/padding issues either in Design view or in Live view. Can you reiterate the issues that you are seeing please?
the Initial problem with the first menu set...somehow "solved itself.
however in reworking a second menu set the same problem has occured.
I managed to recreate this issue in a page devoted soley to solving siad problem
this is all the code on this above mentioned page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript">
<!--
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_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];}}
}
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];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('file:///Free Agent Drive/Fake FOlder/White ABout.png','file:///Free Agent Drive/Fake FOlder/white_benefits.png')">
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('About','','file:///Free Agent Drive/Fake FOlder/White ABout.png',1)"><img src="file:///Free Agent Drive/Fake FOlder/Red ABout.png" name="About" width="122" height="39" border="0" id="About" /></a>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','file:///Free Agent Drive/Fake FOlder/white_benefits.png',1)"><img src="file:///Free Agent Drive/Fake FOlder/Red Benefits.png" name="Image2" width="122" height="39" border="0" id="Image2" /></a>
</body>
</html>
THE RESULTS of the code above.
I dont see any code that relates to the transparent bordering.
Thank you.
</a> <a>
uneccesary spaces between anchor tags....although not strictly meanigful code I wouldnt think....was responsible for the uncoded "borders" between my rollover images.
this doesnt seem to be documented anywhere to my knowledge.
One need click on the included animated illustration in order to properly view same.
North America
Europe, Middle East and Africa
Asia Pacific