Vertical & Horizontal Center with CSS

F14f0ab8982f73b43559459b2ad2b2

Web Devs have been promised that vertical centering an element within the browser view port will be a part of CSS3. Until we see adoption by the browsers getting that perfectly centered element is still a pain.

Well, here's a little bit of code I use, I've tested it in FF, IE7 and Safari 4, on Windows. I'd appreciate your testing if you have a browser/OS combo not listed here.

So, the CSS is:

<style type="text/css">

html,body { margin:0; }

.position { width:100%; height:0; position:absolute; top:50%; overflow:visible;}

.content { width:20em; height:16em; display:block; margin: -8em auto 0 auto; text-align:left; border:4px solid #999; padding:1em; }

</style>

And the html:

<div class="position">

<div class="content">

<p><img src="success.png" /> Thank you!</p>

<p>Your data, <strong>$data[name]</strong>, has been created.</p>

</div>

</div>

Notice we are only using two classes here. First with .position we make sure to absolutely position 50% from the top of the view port. We can set the height to 0 and overflow to visible.

Next, the .content, which will directly contain our centered content, is horizontally centered using margin-left and margin-right auto. We set the desired hight and width and then set margin-top to roughly 50% of the height. This pulls the vertical placement up above the .position layer, thus centering the block vertically.

Give it a try; let me know what you think.

A New Way to Serve IE6 CSS

This morning I had the opportunity to rethink how I handle IE6 support.

I’ve been torn, in the last few months, over how to phase out support for IE6 at my design firm. I’ve always had a one version back policy with my clients when it comes to Internet Explorer. Now that IE8 has been released I should be phasing out our support for IE6. But version 6 has enjoyed a massive deployment in corporate environments that has been made painfully clear to me by my past work with AT&T, Time Warner and other large corporate IT organizations.

How can I turn a blind eye on a still significant portion of my client’s viewer-ship and still help push the general Internet populace toward modernity? The answer, very probably, has been presented by Andy Clarke (@beautifulweb ) at For A Beautiful Web .

Andy has proposed the use of an Universal IE6 style sheet. Think of it as a glorified reset style sheet. The IE6 Universal Style Sheet incorporates Eric Meyers’ reset as well as basic layout and typography styles. The goal is not to reproduce your rich design in IE6 through hacks, but to present your semantic content in a consistent manor focused on great typography and page cadence.

Why does this work for me? Because it allows me to save time, hence expense, when developing content rich sites. No longer do I need to spend hours trying to hack together CSS to compensate for IE6’s inadequacies. I can circumvent the whole issue by presenting content only. I sell this to my clients as the cleanest, fastest, most cost effective way to serve their visitors stuck with IE6. Consider this, I can spend two hours of my time hacking for IE6 support, or just a few minutes to link to an Universal IE6 Style Sheet. That’s a savings of several hundred dollars for my client.

The end user receives a nicely formated page that is light and to the point, and not broken! And if I really want to get the point across, I can use JavaScript to present a friendly message to IE6 users, such as:

“Page auto-formated for Internet Explorer 6. Upgrade your browser for a richer experience. Please Upgrade IE or you can get FireFox or Chrome.”

Check out this example from Andy Clarke’s website. The gallery below shows his site in FireFox and IE6. 

Custom Image Placement in Posterous

 

Screencapture_08_apr

Posterous has some wicked cool image handling capabilities. Just attach an image to your email to the service and it will get embedded in your post at the top of the content (example). Attach several images and Posterous builds a sweetly simplistic gallery for you at the bottom of your post (example).

But what happens when you want more control over image placement?

Moving Single Image or Gallery Placement

When you attach an image, or multiple images, a Posterous object is created and called into your post with some custom code. To move the image position you’ll need to:
  1. Login, via the web interface, find your post in question and click edit. 
  2. Once on the edit page, you’ll notice the advanced editor menu is available, click the far right blue “html” button.
  3. Inside the html code you will see something that looks like this: [[posterous-content:Y22oPHKFX11e6BY4miL5]]. That is the Posterous object code calling your image.
    NOTE: an image gallery will also use a single object code as well, more about that that below.
  4. Now you can cut and paste that code where ever you want it to appear in the post.
But what about positioning and margin? Simple as pie. Simply surround the Posterous object code with a <div style=”float:right;margin:1em;“> </div> and you are good to go. Modify the inline style as needed for your look.

Multiple Positioned Images

You will quickly notice, when you attach multiple files to your email, that Posterous doesn’t create multiple object codes for each image, but just one code for the gallery. To get around this and position individual images,

UPDATE: Roj commented below that you can include ((nogallery)) in the subject line of your email. This will cause Posterious to generate individual image tags for multiple images attached.

don’t attach your images in the email. Rather:
  1. Email you post copy first. 
  2. Upload your images to your own server, a CDN, or a service like Flikr. 
  3. Login to Posterous and edit the post html. Adding <img src=”http://my-img-url-here” style=”float:right;margin:1em;” /> for each image you want to include. Place the image tag where ever you need the image.positioned in the post.
Have any other Posterous tips and tricks? Please let everyone know by commenting below.