When the border width is set to 1px in FireFox, the border size is calculated as 0.667

When using the FireFox browser alone, I noticed that the border size is displayed as 0.6667 when setting the border width to 1px on a div, input element, or any HTML element. The same issue occurs whether the border is applied using inline CSS or a separate class.

To illustrate this problem, please refer to the screenshots below:

https://i.sstatic.net/yqkcW.png

https://i.sstatic.net/Nc5Sa.png

Interestingly, the issue only arises with odd-numbered border sizes. For example, if a 2px border size works fine, but 1px results in a value of 0.6667, and 3px results in 2.6667.

https://i.sstatic.net/fddbi.png https://i.sstatic.net/LtSKP.png

This discrepancy is causing calculation errors at the CSS level. Can anyone suggest a solution to address this issue? Is it a browser-specific bug, or are there workarounds available?

Thank you, Gobalakrishnan

htmlcssfirefoxmozilla

Answer №1

Encountering the same issue, I've noticed that it persists even while using the most recent version of Chrome on a Windows system.

Upon investigation, I discovered that the problem arises from my use of a high-resolution monitor and having the "scale" set to 150% in the "Display Settings". Interestingly, switching the scale back to 100% resolves the 1px issue.

You can find a related solution here

Answer №2

If Mozilla doesn't improve, try using inset box-shadows as an alternative:

box-shadow: inset 0 0 0 1px rgba(#f00, 1);

In this scenario, be sure to include padding to adjust accordingly.

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 to refresh the page when pausing the YouTube iframe API

I'm encountering an issue with my code where I am trying to refresh the page when exiting or pausing full screen mode. Exiting full screen is working as expected, however, pausing using the YouTube iframe API's "onstatechange" event does not seem ...

javascripthtmlbootstrap-4youtubeyoutube-api

Animation for maximum height with transition from a set value to no maximum height

While experimenting with CSS-transitions, I encountered an unusual issue when adding a transition for max-height from a specific value (e.g. 14px) to none. Surprisingly, there is no animation at all; the hidden elements simply appear and disappear instant ...

javascriptjqueryhtmlcss

Unable to prevent the operating system download file prompt from appearing even after configuring browser preferences using webdriver in Python

Although this question may have been asked previously, I am still encountering the issue of consistently getting the OS download file window instead of being able to successfully download a PDF file. Despite adjusting browser preferences, I have not been a ...

pythonfirefoxubuntuseleniumwebdriver

What is hindering the responsiveness of this HTML table?

I recently designed a schedule table that resizes properly in the browser, but when I tried to access it on my mobile phone, it didn't resize correctly. On my phone screen, half of Thursday was cut off due to the horizontal scroll. https://i.sstatic. ...

htmlcsshtml-table

During an upgrade, IndexedDB replaces existing values

After successfully creating a JSON data set that is passed into IndexedDB during the upgrade event, everything seems to be working fine as it creates a well-structured database without any issues. However, the problem arises when trying to upgrade the data ...

javascriptdatabasehtmlindexeddb

Show/Hide sections of content that transition and rearrange the layout of the page

I have a layout with 9 squares on a page. When clicking on a square, I want a full-width div to appear underneath it, pushing the other squares down. I've tried following a tutorial to understand the JavaScript behind this functionality, but I'm ...

javascriptjqueryhtmlcss

Menu elements should display a responsive behavior where on mobile devices, only the icon is shown instead of the word "menu"

Due to the length of our company logo, we need a way to hide certain letters in the Menu and Basket sections, while still displaying the icons. Wrapping the names in span tags and using visibility:hidden; works but leaves empty space visible on the right s ...

htmlcss

Grid element content suddenly shifts when opened

I am facing a peculiar issue with my layout. When I specify grid-template-rows: 1fr 1fr and try to open the details element, instead of smoothly expanding downwards, it seems to "jump" into position. This odd behavior disappears when I use grid-template-ro ...

htmlcsscss-grid

What causes my `` to function intermittently?

I've been experimenting with adding attributes and styling to elements. Sometimes my code works perfectly fine, while other times it doesn't produce the desired output. Here's an example of when it works: $('.card-text') .text( ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the method to display the bootstrap carousel controls on top of the images rather than beside them?

As a beginner, I'm utilizing the carousel code provided by Bootstrap. While it's functioning, the controls are taking up space to the right and left of the image instead of overlaying them. In an attempt to resolve this issue, I added the follow ...

cssbootstrap-4carousel

Begin the ul element from the left-hand side

Check out my latest JSFiddle creation: http://jsfiddle.net/alonshmiel/Ht6Ym/2409/ I'm attempting to align the ul element on the left side of the page: I've experimented with the following CSS rules: margin-left:0px; float: left; Unfortunatel ...

htmlcss

"Utilizing AJAX to establish a connection between database and web application using PHP and

I am new to using ajax and I'm trying to understand this example, which is similar to what I want to achieve. I have some questions about the sample code: Is it necessary to include a specific ajax header script to use it? What does this part do ...

phpjavascriptmysqlhtmlajax

Ensuring that the second level unordered list is set to a height of 100% of the first unordered list, rather than the

I'm working with this menu http://codepen.io/alexandernst/pen/oxpGYQ (I wanted to include it here but the result viewer on SO is causing some display issues...) and I am trying to ensure that the second and third level ul elements are the same height ...

htmlcss

Choose a checkbox by targeting a specific column value with XPath

While automating the testing with Selenium, I encountered an issue related to selecting a checkbox in a table row. To resolve this problem, I turned to XPath for assistance. Specifically, I needed to choose the row based on the file name. Below is the rele ...

javahtmlseleniumxpathselenium-webdriver

Is there a way to modify the style value within AngularJS?

<div class="meter"> <span style="width: 13%"></span> </div> I have the following HTML code snippet. I am looking to update the width value using AngularJS. Does anyone have a solution for this issue? ...

javascriptcssangularjs

Display the cover image of the page as you scroll through the content

Trying to implement a scrolling effect where the content covers an image from this tutorial video. The issue I'm encountering is that the image is not a background image but an actual image tag. Here's my current code: <section id="home" clas ...

javascriptjqueryhtmlcssparallax

What is the best way to conceal a menu after clicking on #links (links leading to sections on the same page)?

How can I hide my hamburger menu when any of the #links (same page links) are clicked or when someone clicks outside the menu area? I believe I need to modify my JS script, but I'm not sure which part needs changing. I am completely new to JavaScript. ...

javascripthtmlcss

Tips for updating the chosen value with jquery or javascript

I am facing a situation where I need to change the selected option in a dropdown menu using a function triggered onClick later in the application. <select id="myselect"> <option value=aa>aa</option> <option value=bb>bb</option&g ...

javascriptjqueryhtml

Deselect the checkbox if you are checking a different checkbox

Struggling with my code, it's hit or miss. Feeling defeated. Seeking assistance to uncheck a checkbox when another checkbox is checked. Check out the code below: JavaScript: $("#1 #checkAll").change(function() { if ($("#1 #checkAll").is(' ...

javascriptjqueryhtmlcheckbox

Is there a way to retrieve the height of an image and adjust its parent container height to be automatic?

Is there a way to achieve the following using pure JavaScript instead of jQuery? I want to find the height of an image within a figure element and if the image's height is less than 200 pixels, I need to set its container's (parent's) heigh ...

javascripthtmlcss