Wednesday, May 11, 2011

HTML & CSS Tips: the box-model

I’ve been working with HTML and CSS for over a decade; however, like many I was never formally taught them and rather picked them up on the job. I’m also not sure how useful a course in HTML/CSS would be since the spec---and browser support for it---changes so frequently. But there are a handful of quirks and tips that if I had only known when I started I would have saved tremendous time tweaking scripts and pixel-perfect web designs. I would like to share some of those tips in a series of blog entries.

The first thing everyone must master when learning HTML is the box model. The box model describes the 4 areas that constitute an HTML element: margin, border, padding, and content. Here is the W3 spec on the box model.

I would like to highlight all of the things I found counterintuitive about the box model. First is the fact that the “traditional” box model---the box model you will use by default---measures width and height not from the edge of the box’s borders, but from inside content of that box. Why is this bad? Most people tend to think of a box’s dimensions as the amount of space it takes up, not how much space its contents takes up. This causes extreme frustration when you try to do something seemingly simple:

div.myContainer {
width: 200px;
div.myBox {
width: 100%;
border: 2px solid black;
padding: 0 10px;
<div class=”myContainer”><div class=”myBox”></div></div>

In the above example, one might think that myBox’s width will be 200px, given that its width is set to 100% of its parent. Wrong: it will be 224px wide and will overflow its parent’s space!

This is very bad for a great majority of web designs where we are trying to create an elegant look that integrates graphics and simple HTML structure. Often, the solution is to use wrapper elements or duplicate hard-coded width settings. But this complicates code and makes it harder to maintain.

Another emerging solution present in CSS3 is to use the box-sizing CSS attribute. This effectively allows you to specify what you mean when you set the width or height. It is well explained here. For example, see what happens if we add it to our previous example:

div.myBox {
width: 100%;
border: 2px solid black;
padding: 0 10px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;

Our example would now work as we originally intended! As it is written, box-sizing works in the majority of new browsers including IE8+ (do note the need to use -moz- for Firefox and -webkit- for Chrome & Safari).

The box-sizing attribute, combined with other emerging powerful tools like SASS and LESS (or .less in my usage), have finally given me the power to tame HTML and CSS documents and keep everything crisp and maintainable.

One final note: if you use the jQuery dimensions set of functionality you may find this quick-reference useful:

$('#foo').height(); // content height
$('#foo').innerHeight(); // padding height
$('#foo').outerHeight(); // border height
$('#foo').outerHeight(true); // margin height

Sunday, April 3, 2011

Remote Desktop - Hotkeys and Keyboard Shortcuts

If you use Remote Desktop as often as I do, then sooner or later you'll need to use a hot key on the remote system. I came across the list and formated nicely so I could put a copy on my wall. Then it occurred to me that perhaps others would like to get their hands on a copy.

To send this Keyboard Combination to the Remote ComputerType this on the Client Computer
ALT+PAGE UPALT+TABSwitch between programs from left to right.
ALT+PAGE DOWNALT+SHIFT+TABSwitch between programs from right to left.
ALT+INSERTALT+ESCCycle through programs in the order they were launched.
CTRL+ESC  Toggle client computer between window and full screen.
ALT+HOMECTRL+ESCDisplay the Start menu.
ALT+DELETE  Display the Windows menu.
(–) symbol on the numeric keypad
PRINT SCREENCapture the active Remote Desktop window into the clipboard.
CTRL+ALT+ENDCTRL+ALT+DELDisplay Task Manager or Windows Security dialog box.
(+) symbol on the numeric keypad
ALT+PRINT SCREENCapture the entire Remote Desktop session window into the clipboard.

Wednesday, March 23, 2011

Is Your Site Having Problems with IE9? This Quick Fix May Help.

If you your web site is not working properly in IE9, a temporary workaround is to tell IE that it should run in IE8 compatibility mode. To do this, place the following meta tag in the header of the page or pages that are a problem:

<meta http-equiv="X-UA-Compatible" content="IE=8" />

Please note that this MUST be the first tag in the header section (after the <head>).

This should get things working until you find and properly fix the underlying problem.

Thursday, March 17, 2011

Internet Explorer 9 is out!

It’s been an exciting month for a techie. The iPad 2 was recently released and looks awesome. Firefox 4 is scheduled to be released next Tuesday. And Internet Explorer 9 has just been released last Monday night! I’d like to take a moment to talk first about my impressions on the new browser and then discuss how Microsoft’s latest built-from-scratch browser will change websurfing from the perspective of websurfers. My next post will discuss the impact of IE 9 to web content publishers.

The first thing I noticed about IE9 was how fast it is. Compared to IE8, it is a speed demon. But what about compared to, ahem, good browsers?

Tuesday, March 15, 2011

Welcome to Technology for Techies

After the initial success of my blog Technology for Mortals it became apparent that there was a need for articles written from a technical persons perspective. This will be the home for such articles. If you are already a subscriber to Technology for Managers or Technology for Mortals, thank you for visiting. I hope you will benefit from the content here as well. This blog will contain material written from the perspective of a technical person. I may at times post similar content to my other blogs. If I do, the content will be modified to reflect the perspective of the intended audience.

Again, thank you for visiting the Technology for Techies blog and Welcome!