Purple border round divs in Firefox!

[mtmobbs]

Hi, your help/ideas would be appreciated!

The page is fine in Safari. In Firefox the top two divs have purple borders round them. Here is the link to page. The relevent code is below. I've tried setting borders to 0 for <img> and <a> tags as well.

[edit: no urls, please. See CSS Forum Charter [webmasterworld.com] for details.]

<div class="topNavBar">
<a href="graffitidocmkIIHome03.html" class="a">
<img class="topNavBar" src="img/navbartop01.jpg" /></a>
</div>

<div class="topNavBar2">
<a href="graffitidocmkIIHome03.html" class="a">
<img class="topNavBar2" src="img/topNavBar2.jpg" /></a>
</div>

div.topNavBar {background: #999900;
width: 100%;
height: 32px;
padding: 0px 0px 0px 0px;
margin: 0px;
border: 10px;
}

div.topNavBar2 {background: #009900;
width: 100%;
height: 21px;
padding: 0px;
margin: 0px;
border: 0px;
}

[edited by: createErrorMsg at 8:45 pm (utc) on Nov. 12, 2005]

[xfinx]

hahaha I was looking myself for some time.. till I added this to your css:

img {border: none};

it is purple because you didn't give <a> a style and you are linking to the same page.

So instead of a blue border around the img, it gets purple...

good luck developing your website.

[mtmobbs]

brilliant! thanks very much.. I thought of setting border to 0 on the <a> tag but for some reason....

Now i've got to make it work in IE! :(

Thanks again.

[xfinx]

your welcome..
good luck with IE, it drove me several times to madness!