Vertical-Align property in CSS is a bit odd at first. It’s definitely not like the old valign property that we all used 10 years ago. This is mainly because we’re trying to vertically align objects in a div instead of a table cell. If we want to vertically align an image with text, we can’t just apply vertical-align: middle on an image. If we do that, it won’t be perfectly aligned. If we apply it to just the text, it will not do anything. So instead, we have to apply the vertical-align property to both the image and the text inside a div. How do we apply it to text? Well, the easiest way is to just wrap text in a span tag and apply vertical-align to that span tag.
HTML Unit Conversions (Pixels, Points, EMs, and Percentages)
Here’s a good chart that shows the conversion from points to pixels to ems to percentages. It comes in very handy if you’re trying to find conversions from PowerPoint (or a similar program) to web. Of course with points being non-web unit of measurements, it highly depends on the resolution. At 72 DPI, it is identical to pixels, but at 96 DPI (like PowerPoint), it will look like below in the table. At 150 DPI, it’s even more different. And so on…
Repeating/Double Word Issues in Internet Explorer
I was working on a website and noticed a weird glitch in Internet Explorer 8 (Assuming IE6 and 7 too). For some reason, out of couple of paragraphs of content, one word at the end of a line would repeat to the next line. Depending on how big the window’s size is, it would disappear and reappear. I had no idea how to fix it, but Googling the problem lead me to a solution. Internet Explorer has this proprietary code which apparently fixes many of its glitches, including this one. Enjoy!
CSS:
.class {
Zoom: 1;
}
CSS Column Layouts
First, let me say that I know there’s many tutorials out there that go over CSS layouts and how they work. However, I’m going to try to explain it in the simplest terms for coders that are just starting out and find floats and columns complicated to do in CSS.


