0

I've tried doing this a bunch of different ways. Nothing seems to work. What am I missing here?

HTML code:

<form target="paypal" action="https://www.sandbox.paypal.com/cgi-bin/webscr"     method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="someval">
<input type="image" src="Btn.PNG" border="0" 
    name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.sandbox.paypal.com/WEBSCR-640-20110401-    1/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

Tried Javascript:

function NoLinkBorder()
{
    var links = document.getElementById('noborder').getElementsByTagName('a');
    for ( var i = 0; i < links.length; i++ ) 
    {
        links[i].onmousedown = function () 
        {
            this.blur();
            return false;
        }
        links[i].onclick = function() 
        {
            this.blur();
        }
        if ( /msie/i.test(navigator.userAgent) && !/opera/i.test(navigator.userAgent) ) 
        {
            links[i].onfocus = function() 
            {
                this.blur();
            }
        }
    }
}

And yes I used the right id tag

I tried a couple differenet css techniques. One wraping the form in a div:

.MoneyButton {     
    background:url(Btn.PNG) no-repeat;     
    cursor:pointer;     
    border: none; 
}


div.MoneyButton input { 
    background:url(Btn.PNG) no-repeat; 
    width: 534px;     
    height: 260px;     
    border: none; 
}

also tried a simple css technique:

a:focus {
    outline: 0;
}

and

a:focus {
    outline: none;
}

Nothing seems to work. the dotted line still shows up around the image/form when clicked in IE 8.

any ideas?

BenMorel
  • 34,448
  • 50
  • 182
  • 322
SlickRick
  • 25
  • 3
  • 8
  • Perhaps related: http://stackoverflow.com/questions/71074/how-to-remove-firefoxs-dotted-outline-on-buttons-as-well-as-links – aioobe Jun 17 '11 at 20:25
  • how did you get the html to show up Luzhin? When I first posted this it was invisible. tried putting the 4 spaces in front of each line and leaving no space as well. I would like to follow the style guidelines here. – SlickRick Jun 17 '11 at 20:26
  • You need to indent each line of code with four spaces like you did with your JS and CSS. – BoltClock Jun 17 '11 at 20:27
  • I did that, though... Well technically, I did that, but saw it wasn't showing up in the 'preview panel' underneath, So I highlighted it all and click on the HTML button at the top of the text area. – SlickRick Jun 17 '11 at 20:31

1 Answers1

4

<input type="image"> is of type input, which is why the outline style isn't applying to it.

Remove the a from your focus style so it applies to any elements in focus, not just a elements:

:focus {
    outline: none;
}
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • 1
    Or if you want to only remove the outline from inputs of type image, use input[type=image]:focus{outline:none;} – BraedenP Jun 17 '11 at 20:27
  • HOLY COW! it's that easy?! I didnt even know you could do that in CSS, I mean, :whatever instead of a:whatever. what does that mean? Does that mean its applied to every html element? – SlickRick Jun 17 '11 at 20:30
  • @SlickRick: Yup. You know how you can use `#id` and `.class` alone? The same goes for `:pseudoclass` - applies to any kind of element with that ID/class/pseudo-class. – BoltClock Jun 17 '11 at 20:31
  • Strange that didn't work for me. I'm still getting dotted lines on my buttons. – Costa Michailidis May 23 '13 at 20:11