CSS

Page Centering using CSS

Michael Falconer — Wed, 15 Sep 2004 15:35:00 GMT

In my recent exploits using only CSS and HTML to layout a web page, I've noticed that I couldn't get a whole page to appear centrally on a page in IE5 or 5.5. This, of course, used to be dead easy when using table layouts.

Well, I've come across the solution on SimpleBits. Although I use a container DIV to centre the page in other browsers, IE5 and 5.5 needs the page text-align attribute set to center. Nice and easy!!

Forcing IE6 to follow W3C DOM rules

Michael Falconer — Mon, 16 Aug 2004 16:32:00 GMT

I've been working hard recently to develop page templates for a site being developed in ASP.NET. At the outset of the project I decided the time was right to stop using table based page layouts, and move onto a fully accessible, CSS based design/layout. After playing about with floating DIV's to get them correctly positioned for each element of the page I found, however, that IE6 was rendering the DIV's a different size to Mozilla and other standards based browsers.

After doing some further research, I've found that what I had failed to use was a full and correct DOCTYPE. One of my main sources of information, css.maxdesign.com.au, has an article on the IE box model and Doctype modes. After reading it through, and then fixing the page to use the correct doctype, it all works fine!

Of course, I've still got the IE5 quirks to check out and work round, but how hard can that be ;-)

So, if you're developing a standards based site, make sure the DOCTYPE is correct!

Accessibility and max-width in Internet Explorer

Michael D. Falconer — Wed, 30 Jun 2004 19:10:00 GMT

I'm starting off two fairly major web projects at the moment, and have decided that it's finally time to ditch the good old tables that are so popular for laying out pages. Instead I'm going to develop both sites using stylesheet positioning only. Before I launch into cutting some code, I've been doing some research into the best way to achieve certain desired effects, and come across some excellent resources.

One of those is svendtofte.com, a Swedish site (in English) by Svend Tofte. He's written some very good articles covering various CSS and JavaScript topics, one of which I was particularly interested in; max-width in Internet Explorer.Both sites I'm developing will have a fair bit of readable content and I want to ensure they're as accessible as possible, so I'm going to avoid specifying fonts and element positioning in pixels and use em's. In order to achieve this I want to be able to set a min and max width for the content but, as it turns out, IE does not support the min-width and max-width properties. Luckily Svend has come up with a solution by using IE's expression property. I won't steal Svend's thunder, so why not check out the article...

CSS Float

Michael D. Falconer — Thu, 17 Jun 2004 12:16:00 GMT

I'm in the process of developing a search function for a client which has to be accessible. When looking at how to make the form more accessible I wanted to remove the traditional table used to create the typical layout of label to the left, form element on the right. It's actually remarkably easy, especially when I was sent this link as an example on how to do it. I've also been reading the Floatutorial on css.maxdesign.com.au which gives you all the details you need on the float css element.

It'll be interesting to see how the server controls in ASP.NET Whidbey will make sites more accessible. For a bit of a heads up, check out this article by Scott Guthrie.