EM based border width alternative

Question

So I had this idea to use EM values for borders on a bunch of elements as variables, based on a parents font-size, this would reduce a lot of redundant code for me. It all worked fine until I realized that some browsers/users have a minimum font-size, that you cant over ride.

The minimum values in some browsers seem to range from 6px to 12, or even more if the user has modified it. As Im not using this for font size it, is there any other trick i can use to set the width of a border without hard coding a pixel value?

Below is an example of what I was hoping would work cross browser, but for example in Firefox/Cyberfox, for me, it gives a 6 pixel wide border instead of 2 px:

   
.parent{
    font-size:2px;
}
.child{
    border:1em solid black;
}

<div class="parent">
<div class="child">
    Hello world!
</div>
</div>

requirement: no sass, no js, just need pure css.

@WaisKamal [Not necessarily](https://stackoverflow.com/q/4474107). — Siguza, Jan 12 '17 at 21:35
@WaisKamal nop, it is equivalent to font-size set in browser (often 16px) or from parent's font-size , which here is 2px. — G-Cyrillus, Jan 12 '17 at 21:36
1em in this case equals 2px. EM is related to the parents font-size if none is set on it self. You are thinking of REM, its based on the root value. — Frank Underwood, Jan 12 '17 at 21:36
which browser do you use , i have not that issue you discribe — G-Cyrillus, Jan 12 '17 at 21:37
It works for me in Vivaldi 1.24, Chromium 35, IE 11 but fails in Cyberfox 49, giving me a 10px border. — Frank Underwood, Jan 12 '17 at 21:39
What's wrong with your situation? If the browser sets a minimum font-size then won't your borders still be relative to the font-size, which is what you're attempting? I don't fully understand your issue. — Jacob, Jan 12 '17 at 21:56
If minimum is set to 10px such as in my case, the example code above will give a 10px border, not a 2px border. I can of course set the minimum to "none" in my browser, but Im sure there are others out there who has a set value. (i didnt even set it myself as far as i know) — Frank Underwood, Jan 12 '17 at 22:04

score 0 · Answer 1 · answered Jan 13 '17 at 00:24

As someone else has mentioned in commends, em pixel equivalent is based on the parent font-size.

When dealing with user stylesheet overrides, you can never fully guarantee that your styles will override those of the end user. You can however utilize the !important directive and make your rules as specific as possible. You can go overboard quickly, so just test and use reasonable defaults.

html body .parent{
    font-size:2px !important;
}
.child{
    border:1em solid black;
}

This is going to be a specificity game, but !important is your strongest asset.

EM based border width alternative

1 Answers1