Strange blue outline around table in Firefox

aliceinwebland · 04-09-2009, 04:03 PM

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:

Quote:

<head>
<title>Welcome to Alice</title>
<script type="text/javascript">

</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,1 97,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,54 1,165,526,163,517,158,509,148,504,134,478,160,452, 186,431,208,422,214,416,216,438,225,466,234,497,24 0,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,44 4,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,15 3,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,54 2,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,49 6,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,35 6,383,337,383,315,387,289,394,266,403,242,418,224, 401,202,387,182,376,168,372,149,349,152,333,197,33 1,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,26 6,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,26 0,265,220,262,186,263,171,265,194,208,220,218,244, 222,270,219,289,212,312,202,330,193,341,186,355,20 5,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,21 3,191,204,210,219,215" href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('RO','','images/blogro.png',1)">
</map></body>
</html>

aliceinwebland · 04-09-2009, 04:07 PM

Hmm, it added "webdesignforum" to some of my image links, pretend that's not there.

LouTheDesigner · 04-10-2009, 01:09 AM

in your css,

img {
border-style: none;
}

aliceinwebland · 04-10-2009, 04:26 AM

Quote:

Originally Posted by LouTheDesigner

in your css,

img {
border-style: none;
}

Where in my css do I put this? If the answer is "anywhere," then it doesn't work.

This is my first time coding anything, and I'm using dreamweaver, so please be specific if you make a suggestion. Thanks!

flipboy · 04-10-2009, 06:28 AM

try setting the border of the image to 0 px

LouTheDesigner · 04-10-2009, 11:03 AM

Okay, if you aren't using any css, try this,

<img src="whatever.jpg" border="0">

Juturnalia · 04-10-2009, 07:56 PM

or just use css in your <head>

<style type="text/css">
img {
border-style: none;
}
</style>

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

04-09-2009, 04:07 PM	#2
aliceinwebland New Member Join Date: Apr 2009 Posts: 3	Hmm, it added "webdesignforum" to some of my image links, pretend that's not there.

04-10-2009, 01:09 AM	#3
LouTheDesigner Platinum Member Join Date: Oct 2008 Location: Yonkers, NY Posts: 512	in your css, img { border-style: none; }

04-10-2009, 06:28 AM	#5
flipboy Bronze Member Join Date: Jan 2009 Posts: 45	try setting the border of the image to 0 px

04-10-2009, 11:03 AM	#6
LouTheDesigner Platinum Member Join Date: Oct 2008 Location: Yonkers, NY Posts: 512	Okay, if you aren't using any css, try this, <img src="whatever.jpg" border="0">

04-10-2009, 07:56 PM	#7
Juturnalia New Member Join Date: Apr 2009 Posts: 11	or just use css in your <head> <style type="text/css"> img { border-style: none; } </style>