Why is the font size value in CSS returning incorrect values?
Check out this jsFiddle example
Here's the HTML code snippet:
<div id="test">TEXT</div>
<div id="test2">TEXT2</div>
Now, take a look at the CSS:
#test{
font-size: 38.5648887px;
}
#test2{
font-size: 38.564px;
}
And here's the jQuery script:
var a = $("#test").css('font-size');
var b = $("#test2").css('font-size');
alert("test = " + a + "\ntest2 = " + b); // test = 38.5667, test2 = 38.5667
When considering decimal places in your example, it's important to note that the CSS specifications don't mandate a specific level of precision. They simply allow for the use of decimals.
However, the limitation you may be facing with decimal accuracy could be due to the browser's constraints on storing decimal values. This is especially true when dealing with pixel units, as it's impossible to display fractions of pixels accurately.
For more precise results, consider usingem units, as they will adjust according to the current font size inheritance, providing a higher level of accuracy for your design needs.
It seems that the issue lies with how decimals are used in defining font sizes. Here is a proper solution for the problem:
CSS
#test{
font-size: 38px;
}
#test2{
font-size: 38px;
}
If you want a more flexible approach for different devices, consider using "em" units for defining values:
CSS
#test{
font-size: 16em;
}
#test2{
font-size: 15.5em;
}
This concept falls under Responsive Web Design, which you can explore further.
Best regards,
Based on my observations, it seems that most web browsers only decode font sizes up to the thousandth decimal point. Therefore, if your font sizes are almost indistinguishable at that level, the browsers may just be rounding them to match.
I'm interested to understand why you would have two font size declarations that are so close in value, with less than a 1 pixel difference. It suggests that there may be a need to rethink your approach to the problem and find a more effective solution to address the issue at hand.
Your existing solution seems fine, but there's actually no need for jquery here. You can achieve the desired font sizing using pure CSS.
Here's an example:
#example1 {
font: 38px Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
}
#example2 {
font: 24px Arial, Helvetica, sans-serif;
font-weight: bold;
font-variant: small-caps;
}
HTML:
<div id="example1">text</div>
<div id="example2">Text</div>
Does this address your inquiry?
UPDATE: Take a look at this fiddle for reference: http://jsfiddle.net/e8WDk/2/
I have been playing around with some css3 transitions and created a slider test. It works perfectly in webkit browsers, but I have noticed an issue in Firefox 4. When clicking on the left link for the first time, the slider is supposed to slide to the left ...
After hours of searching, I still can't find a solution to my problem. I'm new to this, and on my main monitor, everything looks centered just fine. 1920x1080: View larger image But on my 1280x1024 monitor: View smaller image As you can see, i ...
I am working on a multi-step form with a jQuery script to split the forms. The first form has only one button - the next button, which takes the client to the next form. However, when I click on the next button in the first form, it moves to the next form ...
Snippet of HTML code showcased below: <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/style.css" rel="style ...
I am attempting to initiate an ajax call using the jQuery code provided below. However, when I try this in Chrome, I encounter an error that says 'uncaught typeerror cannot read property 'error' of null'. This prevents the preloader fr ...
I am struggling with positioning 3 components on my react page: PageHeader, SideMenu & FeatureList (which consists of Display Cards). Here is the code for each component: App.js // App.js code here... PageHeader.js // PageHeader.js code here... SideMenu ...
Is there a way to update page content in Laravel 5.1 every second without reloading the page for all users? Here is my current view: I'm trying to refresh data without reloading the page using a foreach loop, but I'm not sure how to accomplish ...
I am currently in the process of developing a web service using MVC 4 and HTML for the client interface. One issue I am facing is that my HTML file is located outside of the application, while my MVC service is running on Visual Studio IIS Express. I' ...
I'm currently working on a menu where some text needs to be aligned vertically with the property vertical-align:super. However, I am facing an issue where this particular item with "super" text is not aligning properly with the other items. Below is ...
I'm having an issue with using a banner I created in CS6 Illustrator as a header on my website. Despite setting it as the background, positioned at the top and set to "no-repeat", it keeps appearing at the bottom of the header area with around 300px o ...
There seems to be an issue with my IMG element on the webpage. Even though I have set the height and width to 100%, there is some extra space at the end of the image. You can view the problem here: I have also included a screenshot from the developer too ...
I have been working on a website and I want to hide a specific section for users viewing it on small screens. I tried using Bootstrap's .hidden-xs class, but when I tested it using Chrome's mobile emulator set to "iPhone 5", the div did not hide ...
Our Vaadin Grid features a settings icon that when clicked, opens a window allowing users to select/deselect columns. Upon closing this window (triggering our custom window event), the main window's columns are updated accordingly. Now, my requirement ...
<body ng-app="myApp" ng-controller="myCtrl"> <div ng-show = "dataFromRest" ng-repeat = "x in dataFromRest.posts" > <div class="tittle" style="width: 25%;"> <a href="" ng-click="showDi ...
I'm curious if it's possible to modify the "background-color" value for the selected items in a radCombobox. Below is the CSS code I've been using: (Despite being able to change other elements, I can't seem to alter the color of highli ...
The Challenge: Implement a hamburger menu to replace the navMenu on tablet and smaller screens After successfully compiling in VS code terminal, encountering an error in the browser: Error Message: TypeError: Cannot read properties of undefined (reading ...
How can I extract two values from JSON data returned by a jQuery/AJAX request and use them in output without necessarily storing them in variables? Here is the jQuery AJAX statement: $.ajax({ url: "proposemarriage_backend.php", type: 'POST&a ...
In my javascript file named "data handling.js" within a folder labeled "JS", you'll find the following piece of code: document.getElementById('submit-new-project').addEventListener("click", function () { var ProjectName = document.getEl ...
Seeking advice on positioning items/cards using flexbox in my initial react app. The issue lies with the div within my card component where applying display: flex; turns every card into a block (column-like) structure, flexing only the content within each ...
I've encountered an issue with my HTML code. I'm trying to load images from my local drive, and the path to the folder seems correct because I can open the images by ctrl + clicking on them. However, when I open my page using a live server or hos ...