unusual problems with absolute positioning in CSS

I've run into a problem with absolute positioning in my CSS.

Oddly, IE 10+ displays correctly, but Chrome gets distorted. See the images below:

Any advice would be appreciated.

(This distortion seems to have started after the Chrome 52 update)

IE

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

Chrome

https://i.sstatic.net/3uStG.png

HTML

<div class="widget style1 navy-bg">
    <div class="row">
        <div class="col-xs-6 text-left">
            <h4>New Contacts</h4>
            <h2 class="font-bold">707</h2>
            <div class="speed_l">
                <h2>39</h2>
                <small>/hr</small>
            </div>
        </div>
        <div class="col-xs-6 text-right">
            <h4>Visitors Today</h4>
            <h2 class="font-bold">2129</h2>
            <div class="speed_r">
                <h2>387</h2>
                <small>/hr</small>
            </div>
        </div>
    </div>
</div>

CSS

.widget {
    border-radius: 5px;
    padding: 15px 20px;
    margin-bottom: 10px;
    margin-top: 10px;
}

    .widget.style1 h2 {
        font-size: 40px;
    }

    .widget h2,
    .widget h3 {
        margin-top: 5px;
        margin-bottom: 0;
    }

    .speed_l {
        display: inline-flex;
        padding-left: 15px;
        margin-top: 5px;
    }

        .speed_l small {
            position: absolute;
            top: 87px;
            font-size: 14px;
            color: #def;
        }

        .speed_l h2 {
            font-size: 30px !important;
        }

    .speed_r {
        display: inline-flex;
        padding-right: 12px;
        margin-top: 5px;
    }

        .speed_r small {
            position: absolute;
            top: 87px;
            font-size: 14px;
            color: #def;
        }

        .speed_r h2 {
            font-size: 30px !important;
        }

After trying the recommended solution

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

htmlcssgoogle-chrome

Answer №1

If this is the solution you're looking for:

I have made updates to the code.

.speed_l {

    display: inline-flex;
    padding-left: 15px;
    margin-top: 5px;
}

.speed_l small {
    position: relative;
    margin:5px;
    font-size: 14px;
    color: #def;
}

.speed_l h2 {
    font-size: 30px !important;
}

.speed_r {
    display: inline-flex;
    padding-right: 12px;
    margin-top: 5px;
}

.speed_r small {
    position: relative;
    margin:5px;
    font-size: 14px;
    color: #def;
}

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

Is it possible to partially move the image outside of the MUI dialog?

Is it possible to move an image partially outside of the MUI dialog, with the bottom part inside and the top part outside the dialog? I attempted a solution found on Stack Overflow but it did not yield the desired result. This is the dialog code: <Dial ...

htmlcssmaterial-ui

Is a Selenium loop a viable option?

</head> <body> <table cellpadding="1" cellspacing="1" border="1"> <thead> <tr><td rowspan="1" colspan="3">test</td></tr> </thead><tbody> <tr> <td>click& ...

javascriptjqueryhtmlselenium-ide

transferring data from a web page to a php script seamlessly without navigating away

I've already spent a significant amount of time searching on Stack Overflow and Google, but I haven't found a solution that works for me. My issue is that I have an HTML form and I need to send the data to PHP without redirecting or leaving the ...

javascriptphpjqueryhtmlajax

Elements shifting positions based on the size of the window

I am facing an issue with positioning the register form on my website. I want it to be fixed at the bottom-right corner of the window, without reaching the top. Although I managed to achieve this, the problem arises when the screen resolution changes. For ...

htmlcss

CSS media query that prioritizes styling for large screens over small screens

I am currently working on making my new website development project mobile responsive, but I am encountering some strange behavior that is quite frustrating. I am hoping someone can help me figure out what mistake I may be making here. Whenever I test the ...

cssresponsive-designmedia-queries

How can I manage the horizontal scrolling in a large, expansive HTML Bootstrap table?

Currently, I am working on a Laravel project and have encountered an issue with a table that is overflowing from the right side. Despite trying various methods for implementing horizontal scroll, none of them seem to be effective in resolving the problem. ...

csslaravelbootstrap-5

What is the solution for incorporating multiple elements in knockout's applyBindingsToNode function?

I am currently using knockout applyBindingsToNode to dynamically add and remove elements in order to update my html. I need to cut the binding, which is why I am utilizing applyBindingsToNode. In an example I have provided, if you click on the button "Reb ...

javascriptjqueryhtmlknockout.js

CSS loop to centrally align divs

I am facing an issue where I want to center the divs in a panel. Each div is generated within a for-each-loop inside the panel. However, the problem arises when they are displayed as block elements: https://i.sstatic.net/RvnlX.jpg When I try floating them ...

htmlcssprimefaces

Creating a dynamic animation effect on a div with a changing number of child elements

Currently, I am utilizing the nganimate library and have implemented an animation that affects the max-height property of a div. Here is a snippet of my code: CSS .sublist.ng-hide { max-height: 0; } .sublist { max-height: 1300px; overflow: hidden; ...

cssangularjsng-animate

Submitting an HTML form to trigger a PHP function through AJAX

I am currently working on a task that involves POSTing an email address entered in an HTML form to a PHP script for storage in a database. The script should also handle error messages if the user inputs an invalid email address. I want to make this process ...

phpjavascripthtmlajaxforms

Is it possible to smoothly switch between two states using just a single animation class?

I am trying to trigger an animation with a single class, and then have that animation play in reverse when the class is removed. To better explain, I have created a CodePen example of my current progress. In the CodePen, you can see that when the class . ...

javascriptjqueryhtmlcss

Adding an <a> tag to Flickity: Step by step guide

Is there a way to incorporate tags into a Flickity image slider without affecting its functionality? Here's the code snippet I have for the slider: <div class="carousel" data-flickity='{ "imagesLoaded": true, "percentPosition": false, "auto ...

javascripthtmlflickity

Leveraging Angular 2 directives in TypeScript to bind a value from a custom control to an HTML control

I have created a unique custom directive named "my-text-box", and within this directive, I am utilizing the HTML control <input>. I want to pass values from my custom control to the HTML input control. In Angular 1, I would simply do something like & ...

htmltypescriptangularangular2-directives

Decrease the size of the hyperlink area to only the center portion of the text for a more precise click target

Normal text links are present: <a href="projects.html">Projects</a> Is it feasible to make only the middle part of the letters clickable? Such as excluding the top of 'P' or the bottom of 'j'? a { font-size: 50px; ...

htmlcss

Struggling to understand why the PHP/HTML form with a file upload field is not successfully uploading

I've been staring at this code for the past two hours and I can't seem to spot the issue. It's probably something simple, as I keep getting an undefined index error, but it's eluding me. Could you please take a look with fresh eyes? He ...

phphtmlforms

Is there a way to set an absolute placement for <tr> tags within a <table> using Html and Css?

Struggling to position the rows in my table vertically for CSS animations. I'm having difficulty ensuring the correct width for the rows. Here's what I have so far: <!DOCTYPE html> <html> <head> <style> table { ...

htmlcss

Having trouble getting the Click Element with CSS selector to function properly in Google Tag Manager?

How can I detect a click on the specified element by using the "Click Element" variable in Google Tag Manager? <a href="https://amazon.in/product-id" target="_blank" class="amazon-btn"> <div> <span&g ...

htmlcsscss-selectorsgoogle-tag-manager

JavaScript - Clear the localStorage when closing the final tab of a website

Currently, I am working with AngularJS and utilizing $window.localStorage to store the username of a logged-in user. Since localStorage needs to be explicitly deleted, I have implemented an event listener for $(window).on('unload', function(){}) ...

javascriptjqueryangularjshtmltabs

How can I modify the font style in Bootstrap?

How can I integrate a custom open font into Bootstrap without using a CDN? Should I create a CSS rule to override Bootstrap's default font or locate the font files in Bootstrap and replace them with my desired font? ...

css

SVG files do not fetch external CSS stylesheets when embedded in the DOM

Take a look at this example on jsFiddle. When using IE, the external CSS is loaded and the rectangle is red, but in Chrome and FF the rectangle stays black. What causes this difference? <!-- Used for referencing the external css --> <?xml-styl ...

htmlcsssvg