When it comes to proper usage of CSS and HTML layout, I have to admit I’ve been somewhat slow to get up to speed. Although I’ve been fully aware of what ‘you’re supposed to be doing’ it’s been quite a different story from what I’ve actually been doing. Part of it is that a lot of the apps I work on are based on older code that didn’t pay close attention to CSS based layout and so it’s often hard to retrofit those apps. But slowly and gradually I’ve been drifting more to the ‘recommended’ approach to page layout with CSS isolation to style sheets and as little to no inline styling of any kind and of course have come to realize that this is a much better way to work.
I suspect there are more of you out there who are in the same boat especially if you’re using ASP.NET and Web forms. Web forms with its high level of abstraction doesn’t make it very easy to use pure CSS style layout. Controls have display properties that are just too easy to set on the controls themselves rather than setting them externally in styles and there’s no doubt doing it the right takes some diligence and is more work in the immediacy of creating pages. But there’s also no doubt that proper CSS layout makes it easier to maintain pages later and change the look of them as well as making it easier to reference content via script code.
There are also the ASP.NET CSS Control Adapters but they are a pretty intrusive change and I’ve actually had lots of issues just getting them installed on several machines.However, with a little bit of diligence even some of the badly rendering ASP.NET controls (especially the GridView) can be managed reasonably well with pure CSS layouts.
Those damn browser differences
One thing that I’ve been struggling with for a long time is browser differences even when using the strict XHTML schemas for layout. The XHTML doctypes are the first step for doing consistent layout as they force at least a reasonable baseline on all browsers (particularly IE) and force them to use certain rendering rules. But even with XHTML there are still major differences between different browsers and how they set their default settings for various CSS tags.