Div with absolute positioning not aligned correctly on Mac/iOS but displays correctly on Windows

Struggling with this issue for a few days now and I can't seem to pinpoint the cause. After some online research, it seems like a collapsing margin bug might be the culprit, but I'm hoping to get a clear answer or at least some guidance.

I have a div that is absolutely positioned within a relative div. The position of this div varies between Mac and PC.

The screenshot below is from a Mac:

The screenshot below is from a Windows PC:

This issue also occurs on iOS devices and is consistent across different browsers.

<div style="position:relative;" id="section3">
<div class="highheader" style=" font-size:42px;position:absolute; top:-8px; left:25px; color:black;" id="categoryname">VIDEO HIGHLIGHTS</div>

Above is a snippet of the code. It seems that the top:-8px absolute value is being interpreted differently on different machines. This issue persists for every div set up in a similar manner. You can view a version of this code on my server where the problem is occurring here.

Hopefully the information provided is sufficient, but if not, feel free to ask for more details!

I'm truly stuck on this, so any help would be greatly appreciated. Thank you.

htmlcss

Answer №1

Fonts do not adhere to one standard. You have the flexibility to incorporate padding, height, line-height, or reposition elements for necessary adjustments. It's advisable to begin with the font choice. Please refer to this link for more information:

http://www.w3schools.com/cssref/css_websafe_fonts.asp

Answer №2

To ensure proper display, simply add top:0px to the CSS for the following set of divs

<div class="highheader" style=" font-size:42px;position:absolute; top:0px; left:25px; color:black;" id="categoryname">VIDEO HIGHLIGHTS</div>

<div class="highheader" style=" font-size:42px;position:absolute; top:0px; left:25px; color:black;" id="categoryname">LATEST NEWS</div>

<div class="highheader" style=" font-size:42px;position:absolute; top:0px; left:25px;" id="categoryname">PLUS BABES</div>

<div class="tileheader" style=" font-size:42px;position:absolute; top:0px; left:25px;" id="categoryname">LATEST POSTS</div>

Alternatively, you can create a unique class and apply different styling for chrome and safari

Here is a potential workaround that may be effective: 

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    /* For Safari and Chrome */
    .myClass {
     top:-8px;
    }

    /* Specific styling for Safari */
    ::i-block-chrome,.myClass {
     top:0px;
    }
}

This suggestion can be found here

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

Does the html label prevent propagation from occurring?

Can anyone explain why the toggle function is not being executed when clicking inside the box with the black border, but works when clicking outside of it (although not on the checkbox)? var checks = document.querySelectorAll("ul li"); for (var i = 0 ...

javascripthtmlcssdom-events

How can I use jQuery to activate and deactivate a class in HTML?

My jQuery function for handling tabs is as follows: jQuery(document).ready(function($) { tab = $('.tabs h3 a'); tab.on('click', function(event) { event.preventDefault(); tab.removeClass('active'); ...

jqueryhtml

Problem with Bootstrap Dropdown positioning on mobile devices

I have encountered a puzzling issue with our web application. To demonstrate the problem, I have simplified the page to its bare minimum. You can access it here: Everything seems to be working fine on desktop browsers. However, when I test the page on a m ...

htmltwitter-bootstrapbootstrap-4

React isn't updating the on-change value despite changes being made

In my React application, there is a file called EditTodos.js that is responsible for updating the to-do list. When I click on the "Edit" button, it triggers a pop-up modal component. import React, { useState } from "react"; import { Button, Modal } from " ...

javascripthtmlreactjsbootstrap-4

The div's height is not matching the CSS declaration as expected

In my HTML, I have a div called innerDetails which serves as a flex item with the following CSS properties: .cover { height: 100vh; width: 100%; } #screenCon ...

htmlcss

Increase the dropdown size without altering the dimensions of the container

I have a dropdown menu enclosed in a div with a vibrant yellow background. Take a look at the code on Plunker here. Upon clicking the dropdown button, the list expands and the container's height increases as well. The background color of the dropdown ...

htmlcss

Position on the chart in the Highcharts

I have developed 2 highcharts in the code below: <div> <p id="container"> </p> <p id="cont"> </p> </div> I specified the width and height as follows: $('#cont').highcharts({ char ...

htmlcsshighcharts

Having Trouble with the Bootstrap Responsive Menu Button Not Working

I'm struggling with the Bootstrap menu I created, as it's not collapsing or animating. Everything seems to be working fine except for the button that isn't functioning. <nav class="navbar navbar-expand-lg navbar-light bg-dark alb ...

htmlcsstwitter-bootstrapbootstrap-4menu

Difficulty encountered with changing font color on CSS

I'm having trouble fixing the text color, it's currently white and blending in with the background. I've set the color to #1a6eb6 for both the TEXT element and the submenu list items, but it's not working. Can someone assist me with thi ...

htmlcsscss3pie

The functionality of @Output and custom events appears to be malfunctioning

I am a beginner in Angular and attempting to pass data between child and parent components. In the child component.ts file: @Output() doubleClick = new EventEmitter<string>(); onDoubleClick(nameAccount: string){ this.doubleClick.emit(nameAccoun ...

htmlangulareventsbinding

Using either Java or Groovy, iterate through a hashmap and showcase an HTML table within a Velocity template

Just a heads up: Some users may have trouble reading code comments. For the record, this is not related to any homework assignment. I'm attempting to combine HTML and a hashmap for the first time. Despite searching for explanations online, nothing see ...

javahtmlgroovyhashmapvelocity

Expanding the clickable area of a link using the CSS :before pseudo-element selector

I am currently working on a project involving an image slider and I am facing a challenge with the "previous" and "next" arrows. My goal is to have each arrow occupy half of the slider area, but adjusting padding or margins tends to change their position o ...

htmlcssz-index

Creating a drop-down menu within an HTML table along with a D3 bar chart

How can I implement a drop-down menu allowing the user to choose a time interval for this HTML table and d3 bar chart? The time intervals needed are: Now, 24 hours, 48 hours, 72 hours, 1 week, and 1 month. I am relatively new to creating dynamic tables and ...

javascripthtmlcssd3.js

disappearance of background image at bootstrap breakpoint

Hey there, I'm diving into a new journey in web design and I've encountered my first newbie issue. I'm attempting to place an image and text side by side on my web layout, but as soon as the breakpoint hits below 560px, the image disappears ...

htmlcssimagebootstrap-5

Tips for obtaining the XPath for an unordered list and a span element

My goal is to find the xpath that will select the seat "12A" from a webpage containing a list of seats. Here's the source code: <div class="seats" style="top: 48px;"> <ul class="row_12 leftOfAisle"> <li><a class="" data-r ...

htmlcssxpathselenium-webdriver

Guide to making a sidebar navigation menu on the left using Bootstrap

How can I create a left navbar using Bootstrap? I managed to do it. <nav class="btn-group-vertical float-left navbar"> <button routerLink="product/home" routerLinkActive="is-active" class="btn btn-outline-dark">Home</button> ...

htmlcssangularbootstrap-4

Image staying in place when browser page is resized

Half page browser Full page browser Hello everyone, I could really use some assistance with my program. I'm trying to figure out how to keep my robot in the same position when switching from a half-page browser to a full-screen browser. Currently, w ...

htmlcssweb

What is the best way to position an image next to an input element?

How can I position submit.png next to the input element in my code? <div class="input-box" style="height: 40px; width: 500px;"> <img src="img/delete.png" width="25px" height="25px;" style="position: absolute; right: 0;"> ...

htmlcss

I am experiencing some difficulty with the GetServerDate using the JSON protocol in JQuery; it's

I am facing an issue while trying to execute a basic ajax call to fetch data from a file on a server. Even though I can access the file via the web browser and have diligently followed tutorials related to this topic, I have hit a dead end. Here is the sn ...

javascriptjqueryhtmlajaxjson

Guide on customizing a dropdown button in a class-based Angular library with version 4 or higher

My dilemma revolves around utilizing the Angular Material library for a drop-down navigation bar. The issue at hand is my desire to hover through the list, yet I am unable to tweak the style within HTML. Fortunately, I can easily make alterations in Chrome ...

htmlcssangularangular-material