Weird IE Linked Image Mark

HTML & CSS
1

Hey,

I have a form with a submit button that displays fine in FF however it displays this weird black mark in the middle of the image like so in IE:

It should look like this which is how FF displays it:

There is some javascript involved in the rollover which is

<script type="text/javascript">
<!--
function roll_over(img_name, img_src)
{
	//alert(img_name+"|"+img_src);
	document[img_name].src ="images/"+img_src;
}
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;
}


//-->
</script>

I’m not sure whether this is effecting the button in ie or not.

Ive tried adding things like text-decoration: none ect but nothing seems to remove that horrible black mark…

If you need to see the live site take a look here at the page in question. (Just watch the extremely messy code).

Thanks

2

Try changing font color to blue.

3

Problem Solved…
Thanks

4

Hi,

Use this instead and it will work for all images without finding the colour :slight_smile:


.submitbut1 {
    width:62px;
    height:50px;
    background: url(http://www.handstandstudio.com.au/wgr3/psd-template/images/wgr-quick-form_25.jpg) top left no-repeat;
    font-size:0px;
    border:0px;
    cursor:pointer;
    text-decoration:none;
    outline: none;
    color:#00F;
[B]    text-transform:capitalize;/* IE trick to make text-indent work*/
    text-indent:-999em;/* hide text*/[/B]
}