Blue border in IE only

I made a flowchart into a clickable image map so I could make the different points of the flowchart clickable for further instruction.  In firefox this worked great, but in IE there was an ugly blue border around the image.
The first fix I found was here: http://webdev-il.blogspot.com/2009/12/how-to-remove-blue-link-image-border-in.html
using the css style sheet to remove the border using
However when I did this, nothing happened.
I didn't know if it was because I was using an image map or something, but adding this into my CSS file didn't do anything.
what did work was using
border="none"
as an image attribute.  So the line of code for the image map looked like this:
<img class="center" src="new.png" usemap="#newmap" border="none" />
<map name="newmap">
Then after fiddling with it, and remembering what CSS does again, I added
border:none;
To the class I created called center.  Which I made so the image would stay centered.  That code ended up looking like this:
.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border:none}
I figured it might not have worked because I already had a CSS class assigned to the image, and maybe CSS wouldn't assign 2 attributes to it.  I don't know if this is what was actually going on, but adding "border:none" to the existing class assigned to the image removed the blue border.
Adding "border=none" also worked for me.  I only have one image on the pages I'm working on so either way works for me, if you are using multiple images, adding to CSS is the way to go.