Reputation: 1060
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
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
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