Tips for removing the border around images in Firefox

I recently updated my website to include an image wrapped in an anchor tag, which looks like this: .

However, I encountered an issue where the image had a border only in Firefox, with no border appearing in Chrome. To get rid of the border, I added the following CSS styles for both the a and img tags:

text-decoration:none;
border-style:none;
border:none;
outline:none;
box-shadow: 0;
-moz-box-shadow:0;
background:none;
color:white;

The image is a small gray icon on a white background, and after double-checking it in GIMP, there should be no border around the image. So, why is it showing up only in Firefox? What did I overlook? And how can I remove it?

Firefox version: 17.0.1

htmlcssimagefirefox

Answer №1

What have I overlooked?

The era of the 90s and 00s.

Where is this originating from?

It originates from the default stylesheet of the browser.

Why does it solely show up in Firefox?

Browsers tend to follow their own set of rules when deciding whether to display a border around linked images.

How can I make it disappear?

a img {
border: none;
}

Answer №2

Surprisingly, the solution came to me when I realized that I had accidentally zoomed in on my screen by just one level. This tiny detail went unnoticed until I copied and pasted my webpage into jsfiddle, where I finally noticed the slight differences in sizes.

It turns out that Firefox adds borders to images when zoomed in, for reasons unknown. Once I zoomed back out, the borders disappeared and the problem was resolved. It's a relief to have figured it out, even though I wish I had discovered this sooner after days of frustration!

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

Connecting Bootstrap Tabs Dropdown to Website LinksIncorporating Bootstrap Tabs Dropdown Menu

Having an issue with my dropdown list in the Twitter Bootstrap tab - it's not responding when clicked. I've checked Stackoverflow for solutions but nothing has worked so far. I even tried removing the data-toggle='tab' attribute. Just ...

javascripthtmlcsstwitter-bootstrap

adjusting the size and positioning of an image within a parent div using React

Hey everyone, I'm a newcomer to the world of React. Currently, I'm working on a website and everything seems to be falling into place nicely. However, I've encountered a little hiccup. My goal is to write code within my SCSS folder that will ...

cssreactjsnext.js

"Utilizing the POST REDIRECT GET approach within a form that submits to itself helps prevent duplicate entries from

Struggling with grasping the fundamentals of the POST REDIRECT GET pattern in forms that submit to themselves has been one of the toughest challenges I've faced. The issue arises when a user goes back or refreshes the page, leading to duplicate entrie ...

phphtmlforms

Is it possible to alter the font size in Vuetify depending on the viewport size?

Looking to customize font sizes based on viewports? <v-card-text style="font-size:5em"> Some Heading Here </v-card-text> If you want to change the font size to 3em on XS view, without duplicating code, consider using CSS only. Avoid dupli ...

cssvue.jsviewportvuetify.js

What happens when there is a 1-second delay in loading CSS on an HTML page?

Lately, I've been working on creating HTML and CSS pages. However, whenever I load a page, I notice that there's always a brief half-second flash of the HTML content without any styling applied. Does anyone have an idea why this is happening and ...

htmlcss

CSS creates gaps between each of the internal elements inside the HTML document

I'm looking to create a 4px space between all internal components within my HTML, regardless of direction (top, bottom, left, or right). I have attempted to achieve this by using an external CSS file with the following code: body { padding: 2p ...

htmlcss

Use Javascript or Jquery to dynamically change the background color of cells in HTML tables based on their numerical

I am working with a collection of HTML tables that contain numbers presented in a specific style: <table border="1"> <tr> <th>Day</th> <th>Time</th> <th>A</th> <th>B</th> &l ...

javascriptjquerycsshtml-table

Unable to display image in Angular 2

Hey there, I'm facing a simple problem. I'm having trouble displaying images in my Angular 2 app. This is how I am trying to add an image: <img alt="logo" [src]="'./images/logo.png'"> Do I need to install any specific package ...

imageangular

Setting a restriction for a variable to show a maximum of 50 characters

Is there a way to restrict the anchor text displayed below to just 50 characters? echo '<td style="" class="pointlink"><span class="pointlink"><a href="http://'.$rowad["1site"].'">'.$rowad["1site"].'</a>< ...

phphtml

I am looking for a method to determine the specific button being clicked while all the buttons are dynamically created through php

I am using php to create multiple divs with the same format but different content. My problem is determining which div a button press belongs to. I need to identify the $row["bar_name"] associated with the pressed button (e.g. if Monday is pressed, I nee ...

javascriptphphtmlajax

What are the steps for adding a photo to the folder directory on my hosting server?

Hey there! I've been having some trouble uploading a photo from my website to the hosting server's directory (/public_html/upload/) using php. No matter what I try, the folder remains empty. I'm stuck and not sure where I'm going wrong. ...

phpjqueryhtmlfile-uploadimage-uploading

"Track the progress of a form submission with a loading indicator using Sweet

I am looking to incorporate a waiting time animation when submitting a form, and I prefer using SweetAlert over a traditional loading image. Here is the basic code snippet: $("form").submit(function (e) { e.preventDefault(); // prevents def ...

javascripthtmlsweetalert2

Arrange the footer content into multiple columns

Hello! I'm currently working on creating a footer for my website. I've written this code and everything seems to be functioning correctly, except for the fact that the second row is positioned under the first row and taking up half of the bottom ...

htmlcss

Having difficulties showcasing a variety of images stored in the database

I'm having some trouble with my e-commerce site. I can't seem to display different product images from the database on my homepage. The code I have only shows one image for all products, even though they should each have their own unique image up ...

phphtmlmysqlsql

Automatically numbering table columns with custom language localization in JavaScript using Jquery

Is there a method to automatically number table data in a local or custom language? As a Bengali individual, I have figured out how to automatically number the first data of each row using css and js. However, I am uncertain about how to implement custom n ...

javascripthtmljquerycss

Is it possible to send an email with an attachment that was generated as a blob within the browser?

Is there a way to attach a file created in the browser as a blob to an email, similar to embedding its direct path in the url for a local file? The file is generated as part of some javascript code that I am running. Thank you in advance! ...

javascripthtmlbrowsercross-browser

Safari displaying incorrect sizing for table nested in inline-flex container

When a <table> is placed within an inline-flex container that has a flex-direction of column, Safari displays the table with a different cross-size compared to Chrome and Firefox. This discrepancy makes me question if Safari's default display fo ...

htmlcssflexboxsafari

Invalid data returned in AngularJS $http request

Just diving into angular js and I'm trying to send a URL to the server. Here's my code: Index.html <html ng-app="signupApp"> <head> <title>ServicePrice Signup</title> <link rel="stylesheet" href="c ...

javascripthtmlangularjsserver

Ways to update div attributes without using identifiers or classes

Is there a way to modify the content of a DIV element that does not have an ID or class? Here is a snippet of the code: <div id=1> <div id=2> <div id=3> <div id=4> <div><span>div without id ...

css

Children of flex items sharing the same height

I'm struggling with creating a flexbox responsive grid and need some guidance. My goal is to make all the .block divs have equal height, with the .bottom div positioned at the bottom. The current solution achieves this, but when the h2 heading spans ...

htmlcssflexbox