Interactive Checkbox position mis-aligned [css]

[pavs]

Interactive checkbox are misaligned under osx-chrome and osx-firefox (where I checked). Using:

.TODO:
[options=interactive]
- [*] blah blah
- [*] blah blah blah
- [*] blah blah blah blah

Gives you an output that looks like this:

When it really should be properly aligned like this:

By changing top: 1px to top: -1px in ul.checklist li>p:first-child>input[type="checkbox"]:first-child{width:1em;position:relative;top:1px}

Non-interactive mode looks fine.

[mojavelinux]

Unfortunately, the problem is we're trying to style a system component, which is going to look different on every platform. I think the right solution is to stop messing with relative positioning and trying to size it so it falls in the right position.

How does it look if you try these styles?

ul.checklist li>p:first-child>input[type="checkbox"]:first-child {
  width: 1em;
  height: 0.75em;
}

[pavs]

I agree with your opinion on messing with relative positioning. Unfortunately changing the height doesn't solve the issue, it only makes the box smaller and in my opinion looks worse. I couldn't think of any other solution considering that position: relative; was already there. Personally, it doesn't affect me because I almost always use custom CSS styled to my specific needs. I just think that the default could be better.

I think the ideal thing would be to totally remove the position: relative; top: 1px; part, and it makes things much much better than the current positioning.

[mojavelinux]

I just think that the default could be better.

The problem is that what is better on your machine is worse on mine. So better is relative ;)

I think the ideal thing would be to totally remove the position: relative; top: 1px; part, and it makes things much much better than the current positioning.

I agree. We might just need to let it fall where it falls.

[mojavelinux]

I did my very best to try to make the position of the checkbox consistent across browsers. However, this is a very difficult element to style consistently. I mostly left it up to the browser, with some small margin tweaks to keep the spacing consistent.