Removing the image border in Chrome/IE9

by

It’s a Chrome bug, ignoring the “border:none;” style.

Let’s say you have an image “download-button-102×86.png” which is 102×86 pixels in size. In most browsers, you would reserve that size for its width and height, but Chrome just paints a border there, no matter what you do.

So you trick Chrome into thinking that there is nothing there – size of 0px by 0px, but with exactly the right amount of “padding” to allow for the button. Here is a CSS id block that I am using to accomplish this…

#dlbutn {
    display:block;
    width:0px;
    height:0px;
    outline:none;
    padding:43px 51px 43px 51px;
    margin:0 auto 5px auto;
    background-image:url(/images/download-button-102x86.png);
    background-repeat:no-repeat;
}

Voila! Works everywhere and gets rid of the outline/border in Chrome.

More Related Contents:

  1. How to remove focus border (outline) around text/input boxes? (Chrome) [duplicate]
  2. Remove white space below image [duplicate]
  3. image moves on hover – chrome opacity issue
  4. How to reset / remove chrome’s input highlighting / focus border? [duplicate]
  5. input type=”image” shows unwanted border in Chrome and broken link in IE7
  6. Inner border over images with CSS?
  7. How can I force WebKit to redraw/repaint to propagate style changes?
  8. CSS force image resize and keep aspect ratio
  9. What is a user agent stylesheet?
  10. Invert rounded corner in CSS?
  11. CSS Property Border-Color Not Working
  12. Browsers’ default CSS stylesheets
  13. Bootstrap icons are loaded locally but not when online
  14. How to force Chrome browser to reload .css file while debugging in Visual Studio?
  15. Webkit bug with `:hover` and multiple adjacent-sibling selectors
  16. Font-size issues comparing chrome and Firefox
  17. Cross browser way to rotate image using CSS?
  18. Replace input type=file by an image
  19. What is the difference between outline and border CSS properties?
  20. CSS border less than 1px [duplicate]
  21. Symfony2 – Assetic – load images in CSS
  22. Styling Password Fields in CSS
  23. Apply different css stylesheet for different parts of the same web page [duplicate]
  24. font-face with wrong MIME type in Chrome
  25. Custom.css has stopped working in 32.0.1700.76 m Google Chrome update
  26. how to override font boosting in mobile chrome
  27. Contain an image within a div?
  28. chrome : how to turn off user agent stylesheet settings?
  29. Font-size
  30. Combine CSS Attribute and Pseudo-Element Selectors?

Leave a Comment