What causes the variation in table border display between Firefox, IE, and Chromium browsers?

I am utilizing Datatables to display a data table.
Although it works correctly, Firefox shows a thicker border after every n rows :

Is this a "Firefox feature" designed to make tables more readable? Or could it possibly be a CSS bug? Upon inspecting with Firebug, I noticed that every row and cell have the exact same border size and CSS (excluding color).

 Check out the jsfiddle example

I encountered the same issue in this jsfiddle

I've tested this on IE 8, Chromium, Opera ... and it appears that Firefox is the only browser experiencing this problem.

Edit 1:
I was unable to find a solution in the suggested duplicate thread.

  • The zoom factor is set to 100% (no zoom)
  • I am using Firefox 24.

Edit 2:
Even after trying the solutions from the possible duplicate, none seemed to work. It's peculiar because if I use Crtl+scroll down (zoom out) just once, then the table displays correctly. However, when I simply use Ctrl+0 to reset the zoom, the strange border reappears.

Edit 3: 

<table aria-describedby="mainTable_info" style="margin-left: 0px; width: 100%;" class="dataTable" id="mainTable" frame="box" rules="all">

    <tbody aria-relevant="all" aria-live="polite" role="alert">
    <tr id="1603" class="odd PRODUCTREJECTED"><td class="">1603</td><td class="">tjyhhyytj</td><td class="">POP</td><td class="">61429</td><td class=""><a href="http://cscscscscs.fr" target="_blank">delivery_number1</a></td><td class="">poney2</td><td class=""></td><td class="">PRODUCT REJECTED</td><td class=" sorting_1">2013-07-08 13:28:07</td><td class=""></td><td class=""></td><td class=""></td></tr>
    <tr id="1602" class="even DEPLOYMENTREQUEST"><td class="">1602</td><td class="">tyjytjhtyjn</td><td class="">POP</td><td class="">61364</td><td class=""><a hr...

jqueryhtmlcssfirefoxborder

Answer №1

Perhaps this issue is a result of rounding errors. I have noticed it occurring in Firefox when zooming in or out by a few steps from the default view. The image attached appears to be slightly zoomed in.

It's possible that your default zoom level has been altered, causing everything to appear somewhat magnified. It's worth considering if the PPI/DPI settings on your operating system could also be influencing this change.

UPDATE: Evidence suggests that changes to PPI settings can indeed impact default zoom levels: Impacts of altering default browser zoom levels

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

How can I ensure that buttons in a row utilize the full 100% of available space?

I have a row of buttons in my HTML code like this: HTML : <div class="buttons"> <div><input type="button"/></div> <div><input type="button"/></div> <div><input type="button"/></div& ...

htmlcss

Best practices for making an AJAX call to fetch information from a database

I have a database containing a single table. The table includes columns for Company and Time, among others, with Company and Time being crucial. Users can make appointments by filling out a form. Within the form, there are 2 <select> elements - one ...

javascriptc#jqueryhtmlajax

How can I alter the background color while performing a transformation in JS/CSS?

I'm currently working on achieving a flipboard effect for some divs, where one side is white and the other is black. Here's what I have so far: setInterval(function () { document.getElementById('test').classList.toggle('flipped& ...

javascripthtmlcss

What is preventing me from returning the result of $.ajax, but I can return the result of $http.post?

I am facing an issue with having 2 return statements in my code: return $http.post({ url: CHEAPWATCHER.config.domain + 'api/Authenticate', contentType: 'application/x-www-form-urlencoded; charset=UTF-8', data: data }); re ...

javascriptjqueryangularjsajaxgoogle-chrome

Creating a webpage using jQuery and ajax

I am in the process of developing a game using only jQuery and AJAX for navigation and content loading without ever refreshing the page. One issue I am encountering is the need to create functions for every action. For instance: <p onclick="a_function ...

jqueryajax

Automate the process of filling up and activating a bootstrap dropdown upon a click, and clearing it out when it is

Is there a method to reveal the dropdown content only upon clicking instead of displaying all content at once and increasing the lines of HTML code? Perhaps using an onclick attribute on the button and incorporating a function inside? var data = [{ " ...

javascripthtmljquerybootstrap-4

The content is displayed below the navigation bar rather than beside it

I'm having an issue with the layout of my webpage. The new content I add appears below the navbar on the left side of the page instead of beside it. Can someone help me troubleshoot this problem? Below, you'll find the relevant HTML and CSS code ...

javascripthtmlcssnavbar

Steps for achieving a seamless transition in jqueryui

I currently have a jQuery toggle function that removes several divs from a webpage: $("a#list-mode").click(function() { $("a#list-mode").toggleClass("rm-toggle"); $("a#map-mode").toggleClass("rm-toggle"); $("div.rm-ta").t ...

jqueryjquery-ui

Developed a query, seeking information for populating a dropdown menu

I am currently in the process of editing a webpage that utilizes both PHP and HTML. Essentially, I have a dynamic list of items being generated where the number of values can vary based on the row length. Next to each item in the list, there is a "delete ...

javascriptphpjqueryhtml

Using Vue to display a Div inside a TD element of a table does not result in a reactive behavior

I am encountering an issue with a table where the last column contains a div with three options (View, Edit, and Delete). This submenu is initially hidden, but when clicking on the options button in the last column of the table, the array used to control i ...

javascripthtmlvue.jsvuejs2vue-component

Designing a dynamic and interactive floating navigation bar

I've been experimenting with creating a floating menu using SMINT. The idea is to have the menu stay visible as you scroll down the page. The issue I'm facing is that the current menu structure uses divs. I would like to switch to using li and ...

javascriptjqueryhtmlcss

What is the best way to display multiple "loading images" for each cell of a table's data as it is being fetched asynchronously from a PHP script?

I'm looking to enhance my website functionality by incorporating a box where users can enter a string and press the OK button. Once submitted, this data will be sent to the PHP backend which will then return 20 rows of results. However, each of these ...

jqueryajaxanimation

When it comes to @font-face, Chrome has no trouble detecting the font, but an issue

<style> @font-face { font-family : 'Avenir'; src : url("/fonts/Avenir999.otf"); } p.price a span { /*font-family : 'Avenir';*/ font-size : 45px; color: #889900; ...

htmlcssfont-facemarginpadding

Incorporate a JavaScript solution for generating a dropdown menu, rather than relying on

I have been exploring a code snippet that dynamically creates and deletes text boxes using JavaScript. Here is the link to the code in action: http://jsfiddle.net/JpYGg/8/ My goal now is to modify this functionality to generate a set of three drop-down li ...

javascripthtmldrop-down-menu

Safari on PC and iPhone does not show jpg images

My website is functioning properly on Internet Explorer, Firefox, and Chrome with all images displaying correctly. However, Safari on both PC and iPhone are not showing all of the images. Even after clearing the cache in Safari and reloading the page, some ...

javascripthtmlimagesafari

Saving user input from a PHP form into a text file

Below is a simple PHP form that performs a calculation when submitted. Now, I want to save the inputs (height, weight) and calculation result to a text file without displaying the path of the file. Ideally, I would like each submission to add a new line in ...

phphtmlforms

Use jQuery to rearrange the order of elements on a webpage by moving a paragraph after a specific

I'm currently experimenting with Codeacademy and I was given a task to move a new paragraph after a div. Here's what I did: $('#one').after('<p>this is jquery</p>'); Now I want to move the new paragraph after ano ...

jqueryhtmlparagraph

Employing JavaScript to insert a JSON value as a parameter in an HTML element's attribute

In a JSON file, I have "img" properties with .jpg file paths as their values (e.g "images/image.jpg"). I am attempting to insert these values into the 'src' attribute of existing HTML elements. Below are my attempts so far: I tried creating te ...

javascripthtmlajaxjson

Displaying an image gradually as the user moves down the page

Recently, I came across this fascinating website: As you scroll down, the images on the site gradually unveil more details, which caught my attention. This unique effect is not something commonly seen on websites, and I'm curious to learn how it is ...

javascripthtmlcssweb

What is the best way to transfer a variable from the Cold Fusion back-end page to the HTML front-end section within a CFM file using jQuery Ajax?

My cfm file contains the necessary logic to extract a PDF and convert it into an image file. Now I am looking to pass the file path of this converted image to the front-end CFM so that it can be set as the source for the image tag below. <img id="image ...

jqueryhtmlajaxcfml