Eliminating the picture outline on Chrome and Internet Explorer 9

I am having trouble removing the thin border that keeps appearing around images in Chrome and IE9. Here is the CSS I have tried:

outline: none;
border: none;

I also used jQuery to add a border=0 attribute to each image tag, but the border persists. Any suggestions for a solution?

body {
    font: 10px "segoe ui",Verdana,Arial,sans-serif, "Trebuchet MS", "Lucida Grande", Lucida, sans-serif;
}
img, a img {
    outline: none;
    border: none;
}
.icon {
    width: 16px;
    height: 16px;
    text-indent: -99999px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: -48px -144px;
    background-image: url(theme/images/ui-icons_0078ae_256x240.png);
    margin-right: 2px;
    display: inline-block;
    position: relative;
    top: 3px;
}
<h1>Dashboard <img class="icon" border="0"></h1>

Please refer to the attached screenshot:

Answer №1

There seems to be a quirk in Chrome where it doesn't follow the "border:none;" style.

For example, if you have an image called "download-button-102x86.png" with dimensions of 102x86 pixels, most browsers would use that as the width and height. But Chrome insists on adding a border, no matter what.

To work around this issue, trick Chrome by making it think there's no content - set the size to 0px by 0px but add padding to accommodate the button. Below is the CSS code block I'm using to achieve 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;
}

And there you go! This workaround works across all browsers and eliminates the unwanted outline/border in Chrome.

Answer №2

Instead of using border: none; or border: 0; in your CSS, it is recommended to use:

border-style: none;

You can also include this style directly in the image tag like this:

<img src="image.jpg" style="border-style: none;">

Both methods will work unless the image does not have a valid src. The mentioned solution helps to prevent unwanted link borders that may appear in certain browsers where borders do not behave as expected. The slight border visible when there is no src specified indicates that Chrome is displaying an empty space where the image should be. If you encounter this issue, consider trying one of the following suggestions:

  • Use a <div> instead of an <img> element (basically creating a background image element because the <img> tag itself is not essential)
  • If you prefer to use an <img> tag, follow Randy King's solution below
  • Ensure that the image has a defined src

Answer №3

If you're looking to remove the border in case the src attribute is empty or missing, you can achieve this with the following CSS style:

IMG[src=''], IMG:not([src])      {visibility:hidden;}

This will completely hide the IMG element until a src attribute is added.

Answer №4

Remember to include the border="0" attribute within the img tag

Answer №5

In the case where a src attribute is not defined or left empty within an img tag, many browsers will automatically generate a border around the image. To resolve this issue, it is recommended to use a transparent image as the src value:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAlwSFlzAAALEgAACxIB0t1+/AAAAApJREFUeJxjYAAAAAIAAUivpHEAAAAASUVORK5CYII=" border="0">

Answer №6

If you're attempting to resolve the issue of Chrome Bug impacting image loading, while also ensuring that your placeholder image loads using Lazy Loading images, you can employ the following technique:

.container { overflow: hidden; height: 200px; width: 200px }

.container img { width: 100%; height: 100% }

.container img[src=''],
.container img:not([src]) {
  width: 102%;
  height: 102%;
  margin: -1%;
}

This will conceal the border within the container's overflow, rendering it invisible.

Transform this link: https://i.sstatic.net/PpGz3.png

Into this link: https://i.sstatic.net/hJmzm.png

Answer №7

Randy King's solution caught my attention because chrome seems to ignore the "border:none" styling, although it may be a bit tricky to grasp and isn't compatible with older browsers like ie6. Building on his idea, you could try this approach:

css:

ins.noborder
{
    display:block;
    width:102px;
    height:86px;
    background-image:url(/images/download-button-102x86.png);
    background-repeat:no-repeat;
}

html

<ins class="noborder"></ins>

Remember to properly close off the ins tag with </ins> or else the formatting might appear skewed.

Answer №8

When inserting an image using the img src tag, be sure to include a border="0". For instance, you can use

<img src="img.jpg" border="0">
as demonstrated by @Amareswar previously

Answer №9

Applying the border="0" property individually can be effective, but it is time-consuming for every image.

To avoid outlines and borders around images, I implemented the following jQuery code:

$(document).ready(function () {
        $('img').each(function () {
            $(this).attr("border", "0");
        });
    });

Answer №10

internal styling

<img src="logo.png" style="border-style: none"/>

Answer №11

To eliminate the border, you can set a large value for text-indent, however, this will also cause the alt attribute of the image to disappear. Give this a try:

img:not([src]) {
    text-indent: 9999px !important;
}

Answer №12

Encountered a comparable issue while trying to display a .png image within a div element. Noticeably, a faint black line (approximately 1px) appeared along the side of the image. After some troubleshooting, I managed to resolve it by incorporating the following CSS style: box-shadow: none;

Answer №13

Similar to the solutions provided by @aaron-coding and @randy-king, here is a more generic approach to hiding image borders before they are loaded (e.g. using lazy-load.js or similar technique).

(It seems that I am unable to format this as a code block in my original comment)

.lazy-load-borderFix {
  display: block;
  width: 1px !important;
  height: 1px !important;
  outline: none;
  padding: 0px;
  margin: -4px;
  background-image:none !important;
  background-repeat:no-repeat;
}

Answer №14

To solve this issue, I utilized the padding style in the following manner:

#picture {
    background: url("../images/image.png") no-repeat;
    background-size: 100%;
}

.icon {
    height: 30px;
    width: 30px;
    padding: 15px;
} 

As you adjust the padding value, you'll notice the border disappearing. Experiment with different values to find the perfect fit for your design.

Answer №15

Success! It may have taken longer than I anticipated, but the end result was worth it.

img.brand-logo
{
    display:block;
    width:100%;
    height:0px;
    outline:none;
    padding:43px 51px 43px 51px;
    margin:0 auto 5px auto;
}

Answer №16

To resolve the issue, simply ensure that the outline style is set to none using the code outline:none. This method has proven effective for me.

Answer №17

To start, design a small PNG image with transparency using Photoshop. Afterward, include the following code in your CSS class:

background-image: url("path to your transparent png");

Answer №18

It seems like the issue is due to the absence of a src attribute in the img tag. To resolve this, you can place the image within a div element. Here's an example:

<style>
         div#one{
            display:block;
            width: 351px;
            height: 500px;
            background: url(especificaciones1.png) no-repeat;

         }
         div#two{
            display:block;
            width: 612px;
            height: 500px;
            background: url(especificaciones2.png) no-repeat;
         }

</style>
<div class="especificaciones">
   <div id="one" class="image1"></div>
   <div id="two" class="image2"></div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What measures can we take to prevent text from dropping to the next line when neighboring text wraps around to multiple lines?

Make sure to review the problem statement in the plnkr linked below. http://plnkr.co/edit/ojt3l3ljNYOA6HDq .d { width: 200px; background: red; text-align: center; >div { display: inline } } .a { float: left; } .c { float: right; ...

Update the loading animation to utilize a custom image instead

I found a preloader code on this website that rotates fontawesome icons and displays the percentage after a few seconds. However, I am looking to replace the fontawesome icon with an image but have been unsuccessful in my attempts. Is there a way to easil ...

What is the proper way to incorporate target=blank using JavaScript?

Snapshot: https://i.sstatic.net/XWk8x.png (reference: freenetph.yn.lt) I stumbled upon this code for random links on a third-party website (can't remember the name) and it seems really useful to me. However, I'm facing an issue where I want a ...

Table lines that are indented

I am currently in the process of transforming a standard HTML table into an indented version like this: Is there a way to hide the initial part of the border so that it aligns with the start of the text, even if I can't do it directly in HTML? ...

Firebug displays the class name and location twice in the right panel

When examining a div labeled with .mlm-clearfix, I noticed that Firebug was displaying this class name and its URL twice in the right panel. The style declarations given for the Easy Clear Method in relation to this class are as follows: .mlm-clearfix:bef ...

Is it possible to achieve knockout functionality with CSS binding through a function?

Here is functional code that uses Knockout to decide which color to use when rendering a state in the 2012 Presidential election. If the state value is 1 (Republican), it will be displayed in red. If the state value is 2 (Democrat), it will be displayed in ...

Dispatching correspondence with attached documents and photographs

Is there a way to send an email with an HTML file chosen by the user using (Fileupload), which contains images that I want to embed in the body? I am looking for a method to directly embed images in the body of the email. ...

Adjust the positioning of an element to the right within another element

Having some difficulties with my calendar app as I am unable to position the date square to the top right. I have tried using float:right and align-text: right but it has not worked. Here's a jsfiddle link along with the code: Styling (CSS) table.ca ...

What steps can I take to ensure that the HTML code is visible on top of the animation, rather than being hidden behind

I attempted to apply the CSS rule p{ z-index: 99 !important; } but it did not have the desired effect. My goal is to have all HTML elements appear on top of the animation. Here is the code snippet: <!DOCTYPE html> <html> <head> < ...

At the ready stance for a particular grade of students attending a class

I have created a page with a navigation menu that can be scrolled using the wheel mouse. My goal is to ensure that the li item with the 'selected' class is always positioned in the first position on the left. Is there a way to achieve this using ...

Ways to modify the image color when hovered over

I'm looking for a way to change the background color of an image when hovering over it. Specifically, I have a circular image with a white background and want the circle itself to turn blue on hover. This is my HTML code: <div class="fb-icon"> ...

Adjusting Image Size with HTML and CSS

UPDATE* I am having an issue with the resizing of images on my website. The problem specifically pertains to the music tab where the image is not fitting within the div size properly. I have provided a screenshot for reference https://i.sstatic.net/Zbwag ...

Unable to retrieve a value after deactivating a Div element

I have created a web page using MVC Razor. On this page, I included a div element with the following structure: <div class="row" id="DivDisableForView"> <div class="col-md-4"> <label for="" class="control-label" ...

Letters are frolicking in varying sizes and designs

Currently, I am encountering a strange issue with the text on my webpage. Some fonts are displaying with completely different shapes and sizes despite using <meta charset="UTF-8"> to ensure font consistency. Unfortunately, this did not resolve the pr ...

Having issues with Bootstrap affix functionality malfunctioning

I recently put together documentation using the CSS and JavaScript from Bootstrap docs. Here is a snippet of the sidebar code in my documentation: <div class="col-md-3 docs"> <div class="bs-docs-sidebar"> <ul class="nav docs-sid ...

Creating a dynamic background using a blend of two hues in CSS

Is there a way to stack two colors on top of each other using just one div element, or even better, achieve the same effect with just one color that is a blend of the two? I currently have two divs superimposed, with the top one at 60% opacity. I've ...

Interactive jQuery tabbed interface with drop-down selectors, inconsistent display of drop-down options when switching between tabs

After receiving assistance from members oka and Mike Robinson, I have successfully created two tables for users to interact with using tabs and dropdowns. Both tables have the same structure and feature a dropdown menu to show/hide columns. Users can sele ...

The on-screen keyboard using JQuery and CSS is not working properly on an HTML redesign

UPDATE - Check out the modified version here: https://codepen.io/anon/pen/wZQjQy Here is the original for reference: https://codepen.io/anon/pen/YMRLBN (had to utilize CodePen, as simply adding a snippet here doesn't link the CSS) I essentially copie ...

Is it possible to have an icon change color in a TableRow column when hovering over any part of that particular row?

I am currently using material-ui version 4.9.5. To illustrate my issue, I have created a simplified example here. I have a Table that is populated with basic JSON data. Each row in the table consists of an icon element along with its corresponding color a ...

Troubles encountered with adapting apexcharts size within a react environment

As a novice front-end coder transitioning from a data analyst background, I am currently facing an issue with integrating an ApexChart visual into a flexbox element. The visual appears fine at a resolution of 2560x1440 pixels. However, upon further resizin ...