html - Why letter M or W indent are different than other letters? -

-

looking example:

html

<input type="checkbox" name="jour_semaine[]" id="lundi" value="lundi"/> <label class="checkbox-inline weekday" for="lundi" >l</label>  <input type="checkbox" name="jour_semaine[]" id="mardi" value="mardi"/> <label class="checkbox-inline weekday" for="mardi" >m</label>  <input type="checkbox" name="jour_semaine[]" id="mercredi" value="mercredi"/> <label class="checkbox-inline weekday" for="mercredi" >w</label>  <input type="checkbox" name="jour_semaine[]" id="jeudi" value="jeudi"/> <label class="checkbox-inline weekday" for="jeudi" >j</label>  <input type="checkbox" name="jour_semaine[]" id="vendredi" value="vendredi"/> <label class="checkbox-inline weekday" for="vendredi" >v</label>

css

/* base label styling */ [type="checkbox"]:not(:checked), [type="checkbox"]:checked {   position: absolute!important;   left: -9999px!important; } [type="checkbox"]:not(:checked) + label, [type="checkbox"]:checked + label {   position: relative;   padding-left: 40px;   padding-top:6px;   margin-bottom:20px;   cursor: pointer;   font-family:'arial'; }  /* checkbox aspect */ [type="checkbox"]:not(:checked) + label:before, [type="checkbox"]:checked + label:before {   content: '';   position: absolute;   left:0; top: 0;   width: 32px; height: 32px;   border: 1px solid #ccc;   background: #fff;   border-radius: 3px; } /* checked mark aspect */ [type="checkbox"]:not(:checked) + label:after, [type="checkbox"]:checked + label:after {   content: ' ';    background:#ccc;   width:20px;   height:20px;   border-radius:3px;   position: absolute;   top: 6px; left: 6px;   font-size: 24px;   line-height: 0.8;   color: #000;   transition: .2s; } /* checked mark aspect changes */ [type="checkbox"]:not(:checked) + label:after {   opacity: 0;   transform: scale(0); } [type="checkbox"]:checked + label:after {   opacity: 1;   transform: scale(1); } .checkbox-inline{display:inline-block;} .weekday{text-indent:-29px; margin-right:60px; font-weight:bold; } .weekday::before{background:none!important;} .weekday::after{z-index:-1;}

results

enter image description here

i'm indenting letter negatively center inside box. can see, letters except m , w centered.

i've tried many font-family , nothing, still having offset. typography guru out there explain why twos act differently?

note these <label> text-indent set negative.

fiddle : https://jsfiddle.net/warface/pllr8pbq/

all characters have different widths except in mono-space fonts.

rather fighting changing indent, since have exact width set on boxes, can set label width match box width, center text, , remove text-indent , left-padding , should solve alignment issue letters:

[type="checkbox"]:not(:checked) + label, [type="checkbox"]:checked + label {   position: relative;   padding-top:6px;   margin-bottom:20px;   cursor: pointer;   font-family:'arial';   width:32px;   text-align:center; } .weekday{margin-right:60px; font-weight:bold; }

https://jsfiddle.net/pllr8pbq/3/


Comments

Post a Comment

Popular posts from this blog

how to insert data php javascript mysql with multiple array session 2 -

-
i have method method discussed , successful data entered 1 when more 1 can not database this programs my php form : <form class="form-horizontal" id="form-produk"> <div class="control-group" > <label class="control-label" for="kelas">kategori</label> <div class="controls"> <select class='form-control' name='id_kategori'> <?php $tampil=mysql_query("select * kategori order nama_kategori"); if ($id_kat==0){ echo "<option value=0 selected>- pilih kategori -</option>"; } while($w=mysql_fetch_array($tampil)){ if ($id_kat==$w[id_kategori]){ echo "<option value=$w[id_kategori] selected>$w[nama_kategori]</option>"; } else{ echo "<option value=$w[id_kategori]>$...
Read more

multithreading - Exception in Application constructor -

-
i wanna write snake game javafx , there exception don't know , want know how fix it. ( know it's not complete yet ) and want know , class extends application ( start override ) main in other programs? see , here not static void main bc didn't need, if want add main shoud do? it's exeption... exception in application constructor exception in thread "main" java.lang.nosuchmethodexception: main_snake.main([ljava.lang.string;) @ java.lang.class.getmethod(class.java:1819) @ com.intellij.rt.execution.application.appmain.main(appmain.java:125) and code : import javafx.animation.animationtimer; import javafx.application.application; import javafx.event.eventhandler; import javafx.scene.scene; import javafx.scene.canvas.canvas; import javafx.scene.canvas.graphicscontext; import javafx.scene.input.keyevent; import javafx.scene.layout.borderpane; import javafx.scene.paint.color; import javafx.stage.stage; import java.util.arraylist; /** * creat...
Read more

windows - CertCreateCertificateContext returns CRYPT_E_ASN1_BADTAG / 8009310b -

-
i realize similar post others (e.g. this one ), there details missing posts might significant case. to start with, here's simplified program: #include "stdafx.h" #include <windows.h> #include <wincrypt.h> int _tmain(int argc, _tchar* argv[]) { // usage: certextract certpath char keyfile[] = "c:\\certificates\\public.crt"; byte lp[65536]; security_attributes sa; handle hkeyfile; dword bytes; pccert_context certcontext; sa.nlength = sizeof(sa); sa.lpsecuritydescriptor = null; sa.binherithandle = false; hkeyfile = createfile(keyfile, generic_read, file_share_read, &sa, open_existing, file_attribute_normal, null); if (hkeyfile) { if (readfile(hkeyfile, lp, getfilesize(hkeyfile, null), &bytes, null) && bytes > 0) { certcontext = certcreatecertificatecontext(x509_asn_encoding, lp, bytes); if (certcontext) { printf("yay...
Read more