Elevate the pricing decimal numbers with superscript while utilizing Standard Numeric Format Strings

I'm currently utilizing Standard Numeric Format Strings for the purpose of formatting pricing on my webpage, as detailed in this resource.

Dim price As Integer = 378
Dim s As String = (CDec(price) / 100).ToString("F")

The above code results in a string "3,78", which I display in HTML.

Nevertheless, what I am aiming to achieve is to have the decimal part "78" displayed in superscript using a combination of HTML and CSS. Is there any way I can accomplish this?

Answer №1

If the text is not already HTML encoded (and you have access to all the source code), you can utilize the <sup> tag.

To apply superscript only to the part containing the number 78, you can split the string by either a , or a . (if necessary) into an array and then rejoin it with the tag included.

Here's an example:

Dim Elements() As String = str.Split(If(s.Contains("."), ".", ","))
Dim s2 As String = Elements(0) & ",<sup>" & Elements(1) & "</sup>"

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

Navigating to the previous page within an .ashx handler

Is there a method to obtain the equivalent of Page.PreviousPage in a generic .ashx handler after a cross-page PostBack from an .aspx page? I am looking to retrieve some POST values from the Page that initiated the PostBack. While I could use Request.Form, ...

Altering the Color of Items in an ASP.NET ListBox

I have a listbox on a webform that is being populated by a datasource from a SQL Server 2008. Based on the text in the list box, I want the background color of each specific item to be different. For example, if these are the items in the list: AA item ...

What is the correct way to utilize CSS for setting a responsive background image for an element?

When I set the background-image for an <a>, it always requires specifying the width and height in the stylesheet file. This causes the URL image to not be responsive. I've tried solutions such as using background-size: cover; and background-colo ...

Modify the hue of the iron-icon upon being tapped

There's a simple example I have where my goal is to modify the color of an iron-icon when it's tapped. To achieve this, I'm utilizing iron-selector for tapping: <template> <style> :host { display: block; padding: 10 ...

Requesting data from local APIs using ZingGrid CRUD operations

Is there anyone who can assist me with ZingGrid? I am looking for a sample project to understand how to make API calls using ZingGrid. ...

When linking to a section, the Bootstrap navbar obscures the top part of

I have been working on my inaugural website for educational purposes and encountered the following issue: Every time I try to link to a specific section on the same page, it opens as intended but the top portion is obscured by the navbar. <body data-s ...

Can a fixed div be made to adapt to different screen sizes?

Struggling to make SVG data charts responsive due to the 'position:fixed' CSS attribute applied, I'm exploring alternative solutions that don't involve media queries. Ideally, I want the SVG to scale up and down while remaining centered ...

Issue with cssText functionality in Firefox and Opera browsers causing unexpected behavior

Take a look at this code snippet: <!DOCTYPE html> <html> <body> <div id="mydiv">Sample Text</div> <script type="text/javascript> var md=document.getElementById("mydiv"); md.style.cssText="background-color:yellow !import ...

What are some strategies for efficiently positioning buttons using CSS to prevent unwanted consequences?

Below is the CSS and HTML code, detailing a specific issue. * { box-sizing: border-box; font-family: Georgia, 'Times New Roman', Times, serif; } body { margin: 0; font-family: Georgia, 'Times New Roman', Times, serif; } .topn ...

Unusual Box-shadow glitch experienced exclusively when scrolling in Chrome 51

While working on my website, I encountered a peculiar issue with the box-shadow in Chrome 51. My site has a fixed header with a box-shadow, but when I scroll up or down, the box-shadow leaves behind some marks (horizontal gray lines): https://i.stack.imgu ...

Challenges with MySQL .NET Framework Data Provider in ASP.NET

Just starting out in ASP.NET and running into a common error every time I try to launch my application. Despite multiple installations of .Net Framework Data Provider for MySQL, the error message persists. Seeking assistance from anyone who can provide i ...

How to customize text within an HTML <option> tag within a <select> element

Customizing the appearance of items in an option list can be easily achieved by using CSS: <select> <option>Option 1</option> <option style="color: #F00; font-weight: bold; padding-left:2em;">Option 2</option> <opt ...

The live chat section on YouTube is not appearing correctly within the iframe

I am having trouble integrating a chat box into my website. The YouTube live chat box is not displaying correctly. Here is the link to my jsfiddle: https://jsfiddle.net/webregister/wnbz0edo/15/ If you notice that the chat is not working, please obtain a ...

"Encountering a SecurityException while operating an ASP.NET website in medium trust level on a windows shared

My ASP.NET web form application is functioning properly when tested locally. However, upon deployment on my hostgator windows shared account, I encounter the following error: The Error Link [SecurityException: That assembly does not allow partially truste ...

Ways to maintain span element stability in a progress bar using CSS

I have been struggling with a CSS issue involving a progress bar that displays the remaining time. No matter what I do, the time text keeps moving to the left as the progress bar narrows. I have tried numerous methods to keep the text centered and prevent ...

Beyond the footer area on the right side

I have a two-column layout, but I'm having issues with the footer area. When I add a border around it, the right side extends beyond what I expected. Check out the issue here. I tested it in Firefox and used some CSS: footer { border-style: solid ...

Is there a way to enable scrolling on a page without editing the HTML? I have a table inside a div that is overflowing, and I want the page to scroll,

I'm facing an issue with a DIV that is 600px wide and contains a table. Due to long email addresses, the wrapping isn't working properly even after using word-wrap: break-word. I've experimented with changing the width, adding !important, a ...

Modify the state of each individual button

I recently came across a cool implementation using clicks and jQuery fade effects to show a div when a button is clicked and then change the state of the button. Check it out here: http://jsfiddle.net/ttj9J/5/ HTML <a class="link" href="#" data-rel="c ...

Issue with CSS :hover not working due to jQuery altering CSS properties

My website has a specific set of <p class="first"> elements that change background color on hover using CSS. <div id="row_1"> <p class="first">first_1</p> <p class="first">first_2</p> <p class="firs ...

Vertical scrolling causes the bottom of the sidebar to be cut off

If you take a look at the following Tailwind CSS, you'll notice that when you scroll down, the sidebar is not fully visible at the bottom. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...