Currently, I am in the process of developing a website for a client who has requested that it be an exact replica of the mockup provided. However, I have encountered some issues with the headers and certain divs that contain background elements. Surprisingly, this problem is not limited to a specific browser, which is unusual based on my past experiences.
When comparing how the website appears on my sister's computer (I requested screenshots from her device) versus what I see on Macs, mobile devices, and the computers at my office, there is a noticeable difference:
https://i.stack.imgur.com/CDD8h.png
The discrepancy can be observed mainly on certain Windows PCs where there seems to be additional padding above the text. Removing the top padding from the titles somewhat resolves the issue, but it results in a slightly narrower appearance.
Here is the HTML code for the title section:
<div class="contentHeader"><b><div class="square"><!--◼--> </div>IN PROMOTION</b></div>
And below is the corresponding CSS for that particular section:
.contentHeader{
line-height: 38px;
padding-top: 6.5px;
padding-left: 11px;
background-color: white;
/*padding: 3px 8px;*/ /*In fact, if I uncomment this line, I'll see it centered, but not in the other ones...*/
font-size: 20px;
letter-spacing: 1px;
}
.square{
font-size:20px;
background-color: black;
line-height: 15px;
min-height: 19px;
min-width: 19px;
overflow: hidden;
display: inline-block;
vertical-align: middle;
margin-right: 5px;
margin-left: 1px;
margin-bottom: 2px;
font-family: "Arial";
}
At this point, I am open to any suggestions or solutions to rectify this issue. Since I already utilize jQuery for some functionalities on the site, implementing a fix using that framework might be a viable option if proven effective.
I have ruled out caching as a potential cause of the problem and have extensively tested the website on Chrome, Firefox, and Edge on my PC – all yielding consistent results. It appears that only my PC and my sister's are displaying the anomaly, both running on Windows 10. Even at my office, where we use Windows 10, the issue persists. Any insights into what could be causing this inconsistency?