BlogmyQuery – BMQ

In Flexible height vertical centering with CSS beyond IE7 I mentioned that you can use the properties from the CSS3 Flexible Box Layout Module – flexbox – to center an element horizontally and vertically.

I’ll show how to do this along with some other examples of what you can do with flexbox. But first of all a couple of – rather big – caveats, to make you aware of them upfront:

• Flexbox is currently only supported natively by Gecko (Firefox) and WebKit (Safari, Chrome) browsers. For Opera and IE you can try Flexie, a JavaScript workaround. I’ve only had a quick look at it and can’t say how well it works.
• The flexible box layout specification will change to use other property names among other things. See Differences in Flexbox drafts and the Editor’s draft of the Flexible Box Layout Module for details. In other words what you see here will not be the exact way to do flexible box layouts in the future.

Read full post

Posted in CSS.

Years ago, when using CSS for layout was still rather new, one of the common arguments for using CSS instead of tables for layout was that it enables you to change the layout order without editing your markup.

A typical example is a page with a vertical sub-navigation to the left, a centered content area, and a sidebar to the right. If you use tables for layout you will need to change the HTML to move the columns around, say if you wanted the navigation on the right and the sidebar on the left. With CSS you can change the visual order of the columns without touching the HTML.

But, there is a but.

Read full post

Posted in Accessibility, CSS.

I’ve never built an iOS application, and I don’t know if I will. If I were to start dabbling with it some day I do know that I would want to make sure the applications I build are as accessible as the platform allows.

Thanks to the accessibility features of iOS, the iPad, iPhone and iPod Touch can all be quite accessible, particularly to visually impaired users. It does require that developers keep accessibility in mind while building their app, but fortunately that does not seem to involve a lot of work.

Read full post

Posted in Accessibility, iOS.

One of the most common CSS questions is undoubtedly how to center an element vertically. There are several techniques for doing that, but many, including one that I posted more than seven years ago in Centering with CSS, rely on specifying a height for the centered content. That obviously makes the technique somewhat inflexible.

I recently needed to center something both horizontally and vertically and started thinking that there might be better ways of doing it if I could disregard IE7 and older. The technique I ended up with uses display:table to center the whole page and seems to work well, though there is one caveat.

Read full post

Posted in Accessibility, CSS.

Everybody (well, everybody who designs or builds websites for a living) wants people to stop using Internet Explorer 6. Even Microsoft does, so much that they recently launched The Internet Explorer 6 Countdown.

On the site, developers and website owners are encouraged to tell their IE6 visitors to upgrade. The site also shows current browser statistics per country so we can keep track of how IE6’s market share is shrinking.

This is a good initiative, but there is room for improvement.

Read full post

Posted in Browsers.