How to fix the display of iOsBadge notifications in Metro Css UI 3.0.7 and later

I took the trouble to compare the CSS sources of Metro Css UI 3.0.6 and 3.0.7, because after upgrading, I always saw all of the iOsBadge elements in the corner of the page instead of next to the respective div. In the end, I figured out that the newer .css is missing this declaration:

CSS

div,p,span {
    position: relative;
}

Which I modified to this:

CSS

.iosbRepair{
    position: relative !important;
}

You then add it (for example) to the div that wraps div.iosb:

XHTML

<div style="display: inline-block;" id="iosBadge0" class="iosbRepair">
    <img decoding="async" style="margin-left: auto; margin-right: auto; vertical-align-middle; width: 130px;height:97px" id="videos-2147483643" class="alternatingImage" src="https://blog.sunamo.cz/wp-content/uploads/2026/08/3.jpg">
    <div class="iosb iosb-22 iosb-top-right">
        <div class="iosb-inner iosb-green">
            <div class="iosb-content iosb-string">9</div>
        </div>
    </div>
</div>

Leave a Reply Cancel reply