Skip to main content

A tip for relatively sized Html input elements using `em` units

And why I use Yahoo! (YUI3) Reset CSS Now

For better or worse when doing front end development I prefer to use percentages and em as the unit of size when styling. This approach could be a bit tricky but with proper experience and the use of css screen size conditionals does allow for one rendering base for multiple screen sizes.

As base I set px font-size only on the <body> html element and then afterwards use em to style all other elements; of course using pixel based units where it makes sense. This allows for example the quick changing of the font-size just on the body tag and having all the header resize accordingly.

One annoyance that I experienced was that input radio and check buttons didn't honour the font-size of the body and I always just worked around the issue by explicitly styling the input radio or checkbox buttons height to a em value that made it look good.

However, today by pure accident I discovered that adding font-size: inherit to the input styling fixed the problem: the height of the element is the font-size of the body element which equates to a proper effective 1em.

This to me is something that should be in a reset style, but the Eric Meyer's reset style sheet at meyerweb.com that I have been using for years dosen't have it. After reviewing all the other options at CSS Reset site the only one that addressed this issue is the Yahoo! YUI 3 Reset Sheet – and so with confidence that is the one I use now.

Comments

Post a Comment

Popular posts from this blog

Storing passwords in PuTTY

How to save SSH username/password for auto login in PuTTy The answer is you can't do it...at least in plain PuTTy. However there is an awesome fork with that let's you store the username and password and other additional features called KiTTy . So grab yourself a copy and +1 this if you do, thanks.
3 comments
Read more

Softeher 'Error occurred. (Error code: 2)' sollution

Protocol error occurred. Error was returned from the destination server. The Softether server by default to run on port 443 , if you server also hosts normal https then 443 is already taken and so Softether can't bind to it. When you run `vpncmd` it attempts to connect, find an active port, but of course fails with 'Protocol error occurred. Error was returned from the destination server.' because it's not actually connecting to the vpn server. By default Softether also listens on 992 , 1194 , and 5555 so the sollution is to modify specify `localhost:5555` when executing the `vpncmnd`. If this has helped you feel free to comment or follow me on twitter @danielsokolows .
6 comments
Read more

LightScribe Template Labeler for Windows 10

LightScribe Template Labeler installation "Operating System Inadequate" Issue Unfortunately 'LightScribe Template Labeler' installation will not work on Windows 8 and Windows 10 machines as the install simply will error out with 'Operating System Inadequate'. Trying to install using compatibility mode did not help. Installing LightScribe Template Labeler Workaround However if you simply copy the installed folder from an older machine like Windows 7 into your `C:\\Program Files (x86)\LightScribe Template Labeler`, create a shortcut, then the software will still happily work, see: http://answers.microsoft.com/en-us/windows/forum/windows8_1-performance/lightscribe-templatesimple-labeler-the-system-is/c2ebee28-bfb5-4aef-beb3-a43329561da8?db=5&auth=1 So you can install Windows 7 machine in a virtual machine, install 'LightScribe Template Labeler', and then copy the resulting folder to your Windows 8 or Windows 10 machine. For my own convenien...
7 comments
Read more