The Cone Trees network The UX Bookmark UX Quotes UX Jobs in Singapore Nice one yeah!

CSS

CSS

Only 4% of the World Wide Web Web standards compliant in 2008

Opera used MAMA— their ‘Metadata Analysis and Mining Application’ to trawl the web and returns results detailing page structures, including what HTML, CSS, and script is used on it, as well as whether the HTML validates.

For example, it found out that only 4.13% of all sites on the World Wide Web are web standards compliant (January 2008). This is less than double the number of sites on the World Wide Web that validated for web standards in 2006

Read the key findings report: MAMA key findings

What’s your opinion on the number of sites that validate for web standards at the moment? Was it surprising or just insightful? Or was the percentage close to around what you expected it might be?

Solution to the ‘Div breaks because of long string’ issue

IE Solution

Add the following to your styled div and you’re done. This is IE specific however.
word-wrap: break-word;

Solution for other browsers
Use JavaScript to break the string after a certain length.

// ========= browser detect ==========
var detect = navigator.userAgent.toLowerCase();
var OS,browser,version,total,thestring, place;
if (!BrowserDetect('msie')) 
  {browser = "Internet Explorer"} 
else
  { browser = "Other"; }
function BrowserDetect(string)
  {
    place = detect.indexOf(string) + 1;
    thestring = string;

    return place;
  }

//========= string handle ============
// split long string to show correctly in browsers except IE
function LongStringHandler(astr, bint)
  {
    var k, i;
    var cstr = "";

    if ((astr.length <= bint) || (BrowserDetect('msie')))
      {document.write ( astr + '<br />' );} 
    else 
      {
        for ( i=0; i <= astr.length; i=i+bint) 
          {cstr = cstr + astr.substr(i, bint) + '<br />';}

          //return cstr;
        document.write ( cstr );
      }
  }

Reference:

word-wrap Attribute | wordWrap Property at MSDN
Alan Wood’s suggestion
Alan Wood’s example

A handy CSS formatter and Optimizer

Use Clean CSS to format and optimize your code even further that will help you lower your file size by using shorthand and clubbing common selectors and properties together. Use cautiously if you’re running it on a huge css file. You could possibly lowering file size at the cost of code legibility.

Link via Ranjith.

Verticaly centering any element using CSS

Vertically align a container to the center of the screen using CSS without using tables.

What browser will apply what rules

Will the browser apply the rule(s)?