I have a webpage using javascript and html (I've avoided CSS), created in dreamweaver. For some reason, when I view it in Firefox, the background image/table a) is shifted two or three points up and to the left and b) has a thin blue border around it. The rollover images, however, are not shifted.
How it should look with rollover on "sound" (how it appears in opera and safari):
How it appears in firefox:
Now, the solution I came up with for the shifting of the bg image was to shift the image itself a few points down and over. I have a thin white line background around all of the images (rollovers, etc) at the same size, so that I don't have to use DIV tags to layer the ro images over the background. So I shifted the content of the background image within that thin white box.
That would, of course, require some sort of script that tells the browser which part of the HTML to look at, depending on what the browser is? (look at this image if you're firefox, this image if you're safari) Is that possible?
Also, what could be causing the blue line?
Here's what I have so far:
<head>
<title>Welcome to Alice</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
)&&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.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}
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[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.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))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onLoad="MM_preloadImages('images/designro.png')">
<table width="100%" height="100%">
<tr align="center">
<td valign="middle">
<table>
<tr><td align="left" valign="top" nowrap background="images/indexbg.png"><img src="images/robg.png" name="RO" align="absbottom" usemap="#Map" valign="middle"></td>
</tr></table></td>
</tr>
</table>
<map name="Map">
<area shape="poly" coords="578,71,577,93,562,93,542,101,504,131,436,197,415,213,403,192,477,123,528,80,552,71" href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('RO','','images/aboutro.png',1)">
<area shape="poly" coords="609,236,596,184,587,133,573,147,556,159,541,165,526,163,517,158,509,148,504,134,478,160,452,186,431,208,422,214,416,216,438,225,466,234,497,240,530,242,571,242" href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('RO','','images/videoro.png',1)">
<area shape="poly" coords="618,271,610,241,574,246,531,246,485,243,444,232,404,215,388,208,373,196,366,188,354,179,345,184,363,210,376,235,388,268,401,311,518,292" href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('RO','','images/printro.png',1)">
<area shape="poly" coords="380,314,351,317,307,321,241,323,167,328,153,329,169,270,201,268,233,267,263,270,295,275,319,282,349,294" href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('RO','','images/sculpturero.png',1)">
<area shape="poly" coords="604,353,619,366,548,431,481,477,473,460,542,410" href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('RO','','images/sketchro.png',1)">
<area shape="poly" coords="619,276,629,313,619,337,569,356,523,376,496,390,465,408,441,425,440,398,435,379,420,350,406,332,403,315,513,298" href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('RO','','images/photoro.png',1)">
<area shape="poly" coords="435,430,426,436,411,417,401,405,378,390,356,383,337,383,315,387,289,394,266,403,242,418,224,401,202,387,182,376,168,372,149,349,152,333,197,331,267,327,322,324,385,317,403,335,416,386" href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('RO','','images/designro.png',1)">
<area shape="poly" coords="290,396,310,390,332,388,334,406,298,416,266,431,255,413,268,406" href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('RO','','images/linksro.png',1)">
<area shape="poly" coords="396,311,386,313,360,294,333,282,301,272,260,265,220,262,186,263,171,265,194,208,220,218,244,222,270,219,289,212,312,202,330,193,341,186,355,205,367,226,379,256,388,282" href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('RO','','images/soundro.png',1)">
<area shape="poly" coords="238,219,258,219,281,213,277,194,248,198,213,191,204,210,219,215" href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('RO','','images/blogro.png',1)">
</map></body>
</html>
