Vertically align image to the middle

I was trying to align some text to an image vertically. I used the align attribute like this:

<img height=”28″ src=”/images/connect-phone.gif” width=”26″ align=”middle”> 234-234-2342

But this didn’t work in Firefox or Safari. So I sought out the CCS alternative. I came across this article explaining how to do it: . Here is the code supplied to answer the same question I had:

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Strict//EN”
<style type=’text/css’>
body, html {
height:100%; /*fill the viewport*/
height:100%; /*fill the body*/
text-align: center; /*H-centering in early IE versions*/
#pinac {
width: 826px;
height: 155px;
position:relative; /*allows for top property to move the element*/
top:50%; /*moves it 50% of #container’s height down the page*/
margin-top:-77px; /*pulls it back up by half it’s height*/
margin-left: auto;margin-right: auto; /*H-centering in complaint browsers*/
<div id=”container”>
<div id=”pinac”>This is your element.</div>

You’ve got to be kidding! Forget that. Instead I found I could just set align=”absmiddle” in the image. This attribute solved my problem, like this:

<img height=”28″ src=”/images/connect-phone.gif” width=”26″ align=”absmiddle”> 234-234-2342

I know CSS has it’s place but I’m still not much of a fan.

IE6 Float Bug

Lots of people like CSS and it certainly has it’s place. But when the most popular browser has a bug that prevents a simple div element from displaying properly we all get frustrated. All I wanted to do was have a box “float” to the right side of the page. It works great in IE7 and Firefox. IE6 displayed the box in the content area instead of to the right. See this page for more details. But the simple answer is add “display: inline” to the style. As I understand this, we are using a bug in IE6 to correct another bug in IE6. Okay, I grant you, this is confusing.

To fix the IE6 “float” bug to this:

<div class=”box”>
   <div class=”sidebar” style=”float: right; display: inline“>content


CSS Page Break with IE 7

To force a page break when printing the style=”page-break-before: always;” can be added. But this doesn’t always work with IE 7. For some reason IE 7 would ignore this. Probably because of the new print preview and “size to fit”. The simple fix to get IE 7 to recognize the page break just add something to the div section. This worked for me.

<div style=”page-break-before: always;”>
   <!–[if IE 7]><br style=”height:0; line-height:0″><![endif]–>


CSS Alignment Tip

When positioning text on a page in CSS add this code to view the element borders:

border-width: thin; border-style: solid;

That way you can see where the spaces are and can adjust the elements spacing.