Determine the browser rendering mode JavaScript

2011-02-25T16:22:00.000-08:00

The determine the current rendering mode paste this javascript in the address bar and execute it. It will display the rendering mode of the current site and any embedded frames. It should work on any browser.

javascript:void((function(){var i=0,s='',w=window,m='Main page: '+document.compatMode+'\n\nFrames:\n',f;while(f=window.frames[i]){s+=' '+(f.name?f.name:'Anonymous frame')+': '+f.document.compatMode +'\n';i++;}s=(s?s:'No frames');alert(m+s);})())

DIV based liquid 2-column HTML layout with sticky footer

2011-02-25T07:45:00.000-08:00

Strangely I was not able to find a similar CSS based page layout example anywhere on the net. Please correct me if I was wrong. The goal was to find a simple 2 column DIV based HTML page layout with a ‘liquid’ content section and a sticky footer. I assumed it would be easy to find it by searching for something like ‘html template div css …’ but probably I was overestimating my ‘googling’ skills. So I spent some hours writing it from scratch. There are probably still some minor bugs though, so be careful. unfortunately I had to introduce a small CSS hack to make it run smoothly with that ‘wonderful’ peace of software called IE6. I’d appreciate any improvement suggestion.

The html should render fine with the latest version IE/Safari/Firefox/Chrome and IE6. Any other/older browser version was not tested yet. Sorry.

BTW this is my first post :)

Page in Firefox 3.6

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Page title</title>
<style type="text/css">

body,html {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
overflow: hidden;
}

#header, #footer, #nav, #content {
background: #ffffff;
position: absolute;
height: auto;
width: auto;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
overflow: hidden;
}

#header, #footer {
background: #dddddd;
width: 100%;
}

#nav, #content {
top: 119px;
bottom: 24px;
}

#header {
height: 119px;
}

#footer {
top: auto;
height: 24px;
}

#nav {
background: #f2f2f2;
width: 229px;
}

#content {
left: 229px;
overflow-y: auto;
}

/* IE6 Hack */
* html #content,* html #nav {
height: expression(document.body.clientHeight - 24 - 119);
}

* html #content {
width: expression(document.body.clientWidth - 229);
right: 2px;
}
</style>
</head>
<body>
<div id="header">Your header</div>
<div id="nav">Your navigation</div>
<div id="content">Your content</div>
<div id="footer">Your footer</div>
</body>
</html>

PD Competition Velocity colors

2011-02-24T16:37:00.000-08:00

You are planning to order a new comp velo and you are not sure what colors to choose? Let me inspire you with one of my photoshop sessions results.

chrome.ch

Determine the browser rendering mode JavaScript

DIV based liquid 2-column HTML layout with sticky footer

PD Competition Velocity colors