Seal
Seal

Reputation: 1060

Website displaying improperly on only one computer

So I put up a website rangaire.herokuapp.com, and it displays properly on every computer I have tested it on but one. The screen resolution is 1920 x 1080. It makes the div:after attribute infringe on the above text. I have cleared cache and history, just not sure what else to do. Any ideas?

Browser is Win7 IE11

The Problem

this is the css.

.mfg {
    margin-top:19px;
    height: 4px;
    padding: 0;
    border: none;
    border-top: 6px solid #1D2148;
    color: #1D2148;
    text-align: center;

}
.mfg::after {
    content: "MFG";
    display: inline-block;
    position: relative; 
    top: -0.7em;  
    font-size: 2.2em;
    padding: 0 0.14em 0 .2em;
    background: white;
    color: #1D2148;
    letter-spacing: 2px;
    margin-right: .1em;
    font-weight: 100;
}

Upvotes: 0

Views: 143

Answers (1)

Mr Lister
Mr Lister

Reputation: 46559

This is caused by the particular browser having a larger text size. Check View -> Text size to make sure.

The problem is that some measurements are done in em while others are in px. This will cause mismatches when the user's default font size is not exactly 16px.

The div with class mfg has

margin-top: 19px;

and its ::after pseudo-element has

top: -0.7em;
font-size: 2.2em;

which means that with a root font size of 16px, the top of the text will at a relative position of 19 - 0.7 * 2.2 * 16 = about 6 pixels. But if you make the base font size 25% bigger, or 20px, the relative position becomes 19 - 0.7 * 2.2 * 20 = about 12 pixels, twice as large the distance.

Solution: Don't assume that 100% means 16px. Wherever you use em for a length unit, make sure you know what the font size really is. (That is, set the font size of html to a size in pixels.) Or, use em for everything throughout the CSS, instead of px.

Upvotes: 1

Related Questions