Oops, the Wrong Rendering Mode Broke the Page

For starters, there are extra background graphics behind the headers at the top of the page. Additionally, the layout seems to have shifted up the page slightly and the “Recommended” column is way off in the middle left compared to its usual symmetrical alignment. Scrolling down the page, things get even worse. The entire
information bar at the bottom of the page has lost its background color, except on hover, and the font sizes are off Adding back the DOCTYPE declaration is a simple thing in this case, but the lesson to be learned is that when widespread layout issues start happening, these problems are often symptomatic of a document-wide issue, such as the rendering mode, styles not being linked correctly, or missing tags in a sensitive location.

Quirks mode in particular can wreak havoc on a well-structured page. Using a validation tool to check the syntax of the page can be a huge help in cases like this.

There are specific documented issues, some of which will be discussed below, that exist for quirks and standards rendering modes. These often surface when code is being mixed with legacy markup, when browsers are reviewed, or when new designs are being produced. This is particularly an issue when looking at Internet Explorer 5.0 and 5.5 because although they do not feature multiple rendering modes, they are essentially always in “quirks” mode. This means designs will display differently than even in IE 6.0 as compared to 5.5 when working in a “standards” mode document because they are interpreted differently.

Tags: , , , , , ,

categories css attributes, css styles, css syntax, web design, web standards | admin | datetime September 30, 2009 5:32 pm | comments Comments Off

CSS Web Site Planning Today

The vast majority of the effort and project planning on large-scale Web projects today trivializes the UI layer and treats it as an afterthought, when in fact it can deeply impact content management, Web applications, search engine optimization (SEO), bandwidth costs, site performance, and maintenance efforts. Plans typically start with the back-end software and only touch on the UI in terms of design.

Fortunately, there are ways to pare down the long-term risks and remove the constraints of traditional Web coding. Embracing modern techniques starts with the W3C and its recommendations, often called Web standards.

The issue should be considered not only in terms of your design, but also where the content management, applications, and other dynamic systems are concerned. If a Web site is to reap the benefits of a Web standards-based UI, it needs to be considered at all levels, and plans should be introduced that will allow the site to grow intelligently.

Tags: , , , ,

categories css attributes, css syntax, html and css, web standards | admin | datetime September 26, 2009 1:25 pm | comments Comments Off