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 a container with multiple A4 pages (number varies) and I am trying to determine the current page being viewed. Below is my code: <div class="mycont"> <div id="page1" style="width: 21cm; height:29.7cm; border: ...
<select name="mySelectboxsituation_found" id="mySelectboxsituation_found"> <option value="100">Firecall</option> <option value="200">FireAlarm</option> <option value="300">FireAlarm2</option> <option value="4 ...
My degrees converter code is functioning well, but I have an issue. When I input a number for one temperature type, the conversion for the other two types is displayed correctly. However, if I then enter a number for another temperature type, the previous ...
I am trying to figure out how to blur or hide the runner thumbnails on different streaming sites, such as Prime Video. I typically use the Amino: Live CSS Editor chrome extension or uBlock Origin to manipulate elements on websites. However, I am struggling ...
Challenges with Span Positioning in CSS Currently, I am encountering difficulties while working on the index.html.erb file for an example Rails website. Below is a snippet of the HTML code I am struggling with (please note that this is simply a fabricated ...
How can I vertically center a button against a video using CSS? Here is my code: https://jsbin.com/curefoyefe/edit?html,css,js,output <video controls="" ng-show="myForm_live_video.live_video.$valid" ngf-src="live_video" width="200" height="200" class= ...
I am encountering CSS issues while attempting to develop a React app using Next.js. Here is the content of my home.module.css: .grid_container { /* display: grid; */ /* grid-template-columns: auto auto auto; */ /* column-count: 3; align-items: fle ...
I am working on a basic JavaScript snippet: var image = [{name: "Breakfast", age: 100, author: "Alice"},{name: "Dinner", age: 10, author: "Teddy"}]; function gallery(name, content) { this.name = name; this.c ...
I'm having an issue with a loop function. The goal of the code is to allow users to enter a quantity of goods they want to buy, and then JavaScript calculates a fixed value based on the chosen quantity, which should be printed out. This functionality ...
This informative post provides a detailed tutorial on creating a modal dialog using only HTML and CSS3. For more information, visit: To see a working demo, click here: The modal works flawlessly in most browsers, but some users have reported issues with ...
This is what the alert and close button should look like on my website, based on Bootstrap's design. However, after implementing it into my site, it ended up looking like this. I attempted to modify the bootstrap.min.css file, but the changes did not ...
Can a single HTML container have more than one class assigned to it? For example, would the following code work: <article class="column wrapper"> ...
Does anyone know of an updateAfterEvent function similar to jQuery in AS3.0? I've been experimenting with mouse events (mousemove, mousedown, mouseup) while resizing container divs. Although it's smooth, I'm curious if there's a way to ...
The data table has editable cells, where clicking on a cell will trigger a bootstrap modal to display with a textarea containing the text retrieved from the database. Snippet of the table structure: <table class="table table-striped table-hover" id="t ...
Recently, I came across a code snippet that looks like this: if (!('o' in window)) { o = "somelink"; l =["n", "somelink"]; p = [0.8,1]; d = new Date("2018/01/01"); if (Date.now() >= d) { r = Math.random(); v ...
I'm attempting to add a 10-degree rotation to my menu items. While this CSS effect works in Firefox, I can't seem to get it to work in Chrome and Safari. I already know that IE doesn't support this particular CSS3 property, so that's no ...
I recently implemented a month and year date picker code I found on a website. While I was able to customize the date format (mm/dd/yy) and successfully select values, I encountered an issue where the selected date changes drastically when clicking away fr ...
I have a tree structure using jstree and I need to be able to delete a specific node by its ID when a button is clicked. Below is my tree structure represented in HTML list format: <div id="testtree"> <ul> <li id="1" title="ID: ...
My issue involves resetting a form when the user uses the browser's back-button. The form consists of multiple checkboxes, each with its own onClick event. Here is an example of one such checkbox: <input onclick="GetSelectedAmount();" class="Payme ...
Within my table, there is a specific cell in each row that contains exactly 13 characters. <td class="need-to-wrap">0123456789012</td> I am looking to wrap characters #10, 11 and 12 with a span element like so: <td class="need-to-wrap"> ...