Search and Top Navigation
Ticket #4814: jquery_bug_submit.html
File jquery_bug_submit.html, 10.5 KB (added by tommyhp2, September 12, 2009 12:15AM UTC)
Bugs in jQuery UI DatePicker
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" media="screen" href="http://static.jquery.com/ui/css/base2.css" />
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" />
<style type="text/css">
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
/*background: #666666;*/
margin: 0;
padding: 0;
text-align: center;
/*color: #000000;*/
background: #000;
color: #fff;
}
.thrColHybHdr #container {
width: 100%;
/*background: #FFFFFF;*/
text-align: left;
margin: 0;
padding: 0;
background: #111;
color: #FFF;
}
.thrColHybHdr #header {
/*background: #DDDDDD;*/
background: #000;
padding: 0 10px;
margin: 0;
padding: 0;
color: #FFF;
}
.thrColHybHdr #header h1 {
margin: 0;
padding: 5px 10px;
}
.thrColHybHdr #sidebarLeft {
float: left;
width: 11em;
/*background: #EBEBEB;*/
padding: 0;
background: #000;
color: #FFF;
}
.thrColHybHdr #sidebarRight {
float: right;
width: 11em;
/*background: #EBEBEB;*/
padding: 0;
background: #000;
color: #FFF;
}
/*.thrColHybHdr #sidebarLeft h3,
.thrColHybHdr #sidebarLeft p,
.thrColHybHdr #sidebarRight p,
.thrColHybHdr #sidebarRight h3 {
margin-left: 10px;
margin-right: 10px;
}*/
.thrColHybHdr #mainContent {
margin: 0 12em 0 12em;
padding: 0 1em 0 1em;
}
.thrColHybHdr #mainContentLeft {
margin: 0 12em 0 0;
padding: 0 1em 0 1em;
}
.thrColHybHdr #mainContentRight {
margin: 0 0 0 12em;
padding: 0 1em 0 1em;
}
.thrColHybHdr #mainContentFull {
margin: 0;
padding: 0 1em 0 1em;
}
.thrColHybHdr #footer {
padding: 0 10px;
/*background:#DDDDDD;*/
border: 1px solid #333333;
background: #333333 url(jquery/ui-bg_gloss-wave_25_333333_500x100.png) 50% 50% repeat-x;
color: #000;
}
.thrColHybHdr #footer p {
margin: 0;
padding: 5px 0;
text-align: center;
font-size: 10pt;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript">
/* Effects that can be used with Show/Hide/Toggle:
*
* Blind - Blinds the element away or shows it by blinding it in.
* Clip - Clips the element on or off, vertically or horizontally.
* Drop - Drops the element away or shows it by dropping it in.
* Explode - Explodes the element into multiple pieces.
* Fold - Folds the element like a piece of paper.
* Puff - Scale and fade out animations create the puff effect.
* Slide - Slides the element out of the viewport.
* Scale - Shrink or grow an element by a percentage factor.
*/
$(document).ready( function() {
$("#accordionLeft").accordion( {
//icons : {
// 'header' : 'ui-icon-circle-arrow-e',
// 'headerSelected' : 'ui-icon-circle-arrow-s'
//},
active : 0,
autoHeight : false,
collapsible : false,
event : 'click', // click, mouseover
fillSpace : true
});
$("#accordion").accordion( {
//icons : {
// 'header' : 'ui-icon-circle-arrow-e',
// 'headerSelected' : 'ui-icon-circle-arrow-s'
//},
active : 0,
autoHeight : false,
collapsible : false,
event : 'click', // click, mouseover
fillSpace : false
});
/*
$('.accordion .head').click( function() {
$(this).next().toggle('slow');
return false;
}).next().hide();
*/
$("#datepicker").datepicker( {
buttonImage : 'themes/base/jquery/calendar.gif',
buttonImageOnly : true,
buttonText : 'Choose',
changeMonth : true,
changeYear : true,
closeText : 'Done',
constrainInput : true,
//currentText : 'Today',
dateFormat : 'mm/dd/yy',
// dayNames : ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
// dayNamesMin : ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
// dayNamesShort : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
defaultDate : '+2',
duration : 'fast',
firstDay : 1,
gotoCurrent : false, // false
hidelfNoPrevNext : false, // false
isRTL : false, // false
maxDate : '+2m',
minDate : '-1',
// monthNames : ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
// monthNamesShort : ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
navigationAsDateFormat : true,
nextText : 'Next',
numberOfMonths : 1, // [ 2, 2]
prevText : 'Prev',
shortYearCutoff : '+10',
showAnim : 'show', // show, slideDown, fadeIn, fold
showButtonPanel : true,
showCurrentAtPos : 0,
showMonthAfterYear : false,
showOn : 'both', // focus, button, both
showOptions: {direction: 'up' },
stepMonths : 1,
yearRange : '-10:+10'
});
$("#dialog").dialog( {
autoOpen : false,
buttons : {
"Ok" : function() {
$(this).dialog("close");
}
},
closeOnEscape : true,
draggable : false,
height : 'auto',
hide : 'slide',
maxHeight : false, // false or # in pixels
maxWidth : false, // false or # in pixels
minHeight : 150,
minWidth : 150,
modal : true,
position : 'center', // 'center', 'left', 'right', 'top', 'bottom', or array of coordinate pair
resizable : false,
show : 'slide',
width : 300
});
$("#tabs").tabs( {
/* disabled: [1, 2], */
//cache : true,
collapsible : false,
event : 'click', // click, mouseover
fx : {
opacity : 'toggle'
}, // toggle
selected : 0,
spinner : 'Retrieving data...'
});
$("#tabs2").tabs( {
/* disabled: [1, 2], */
//cache : true,
collapsible : false,
event : 'click', // click, mouseover
fx : {
opacity : 'toggle'
}, // toggle
selected : 0,
spinner : 'Retrieving data...'
});
$("#vtabs").tabs( {
/* disabled: [1, 2], */
//cache : true,
collapsible : false,
event : 'click', // click, mouseover
fx : {
opacity : 'toggle'
}, // toggle
selected : 0,
spinner : 'Retrieving data...'
});
$("#vtabs").tabs().addClass('ui-tabs-vertical ui-helper-clearfix');
$("#vtabs li").removeClass('ui-corner-top').addClass('ui-corner-left');
});
</script>
</head>
<body class="thrColHybHdr">
<div id="container">
<div id="header">
header
<br class="clearfloat" />
</div>
<div id="sidebarLeft">
<div id="accordionLeft">
<h4><a href="#">Section 1</a></h4>
<div>Section 1 content</div>
<h4><a href="#">Section 2</a></h4>
<div>Section 2 content</div>
<h4><a href="#">Section 3</a></h4>
<div>Section 3 content</div>
</div>
</div>
<div id="sidebarRight">sidebar right</div>
<div id="mainContent">
<div id="accordion">
<h4><a href="#">Section 1</a></h4>
<div>Section 1 content</div>
<h4><a href="#">Section 2</a></h4>
<div>Section 2 content</div>
<h4><a href="#">Section 3</a></h4>
<div>Section 3 content</div>
</div>
<br />
<p>Date: <input type="text" id="datepicker"></p>
<div id="dialog" title="Dialog Title">I'm in a dialog</div>
<br />
<div id="tabs">
<ul>
<li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Three</span></a></li>
</ul>
<div id="fragment-1">
<p>First tab is active by default:</p>
<pre><code>$('#example').tabs();</code></pre></div>
<div id="fragment-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div id="fragment-3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</div>
<div id="tabs2">
<ul>
<li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Three</span></a></li>
</ul>
<div id="fragment-1">
<p>First tab is active by default:</p>
<pre><code>$('#example').tabs();</code></pre></div>
<div id="fragment-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div id="fragment-3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</div>
<div id="vtabs">
<ul>
<li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Three</span></a></li>
</ul>
<div id="fragment-1">
<p>First tab is active by default:</p>
<pre><code>$('#example').tabs();</code></pre></div>
<div id="fragment-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div id="fragment-3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</div>
</div>
<br class="clearfloat" />
<div id="footer">footer</div>
</body>
</html>
Download in other formats:
Original Format
File jquery_bug_submit.html, 10.5 KB (added by tommyhp2, September 12, 2009 12:15AM UTC)
Bugs in jQuery UI DatePicker
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" media="screen" href="http://static.jquery.com/ui/css/base2.css" />
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" />
<style type="text/css">
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
/*background: #666666;*/
margin: 0;
padding: 0;
text-align: center;
/*color: #000000;*/
background: #000;
color: #fff;
}
.thrColHybHdr #container {
width: 100%;
/*background: #FFFFFF;*/
text-align: left;
margin: 0;
padding: 0;
background: #111;
color: #FFF;
}
.thrColHybHdr #header {
/*background: #DDDDDD;*/
background: #000;
padding: 0 10px;
margin: 0;
padding: 0;
color: #FFF;
}
.thrColHybHdr #header h1 {
margin: 0;
padding: 5px 10px;
}
.thrColHybHdr #sidebarLeft {
float: left;
width: 11em;
/*background: #EBEBEB;*/
padding: 0;
background: #000;
color: #FFF;
}
.thrColHybHdr #sidebarRight {
float: right;
width: 11em;
/*background: #EBEBEB;*/
padding: 0;
background: #000;
color: #FFF;
}
/*.thrColHybHdr #sidebarLeft h3,
.thrColHybHdr #sidebarLeft p,
.thrColHybHdr #sidebarRight p,
.thrColHybHdr #sidebarRight h3 {
margin-left: 10px;
margin-right: 10px;
}*/
.thrColHybHdr #mainContent {
margin: 0 12em 0 12em;
padding: 0 1em 0 1em;
}
.thrColHybHdr #mainContentLeft {
margin: 0 12em 0 0;
padding: 0 1em 0 1em;
}
.thrColHybHdr #mainContentRight {
margin: 0 0 0 12em;
padding: 0 1em 0 1em;
}
.thrColHybHdr #mainContentFull {
margin: 0;
padding: 0 1em 0 1em;
}
.thrColHybHdr #footer {
padding: 0 10px;
/*background:#DDDDDD;*/
border: 1px solid #333333;
background: #333333 url(jquery/ui-bg_gloss-wave_25_333333_500x100.png) 50% 50% repeat-x;
color: #000;
}
.thrColHybHdr #footer p {
margin: 0;
padding: 5px 0;
text-align: center;
font-size: 10pt;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript">
/* Effects that can be used with Show/Hide/Toggle:
*
* Blind - Blinds the element away or shows it by blinding it in.
* Clip - Clips the element on or off, vertically or horizontally.
* Drop - Drops the element away or shows it by dropping it in.
* Explode - Explodes the element into multiple pieces.
* Fold - Folds the element like a piece of paper.
* Puff - Scale and fade out animations create the puff effect.
* Slide - Slides the element out of the viewport.
* Scale - Shrink or grow an element by a percentage factor.
*/
$(document).ready( function() {
$("#accordionLeft").accordion( {
//icons : {
// 'header' : 'ui-icon-circle-arrow-e',
// 'headerSelected' : 'ui-icon-circle-arrow-s'
//},
active : 0,
autoHeight : false,
collapsible : false,
event : 'click', // click, mouseover
fillSpace : true
});
$("#accordion").accordion( {
//icons : {
// 'header' : 'ui-icon-circle-arrow-e',
// 'headerSelected' : 'ui-icon-circle-arrow-s'
//},
active : 0,
autoHeight : false,
collapsible : false,
event : 'click', // click, mouseover
fillSpace : false
});
/*
$('.accordion .head').click( function() {
$(this).next().toggle('slow');
return false;
}).next().hide();
*/
$("#datepicker").datepicker( {
buttonImage : 'themes/base/jquery/calendar.gif',
buttonImageOnly : true,
buttonText : 'Choose',
changeMonth : true,
changeYear : true,
closeText : 'Done',
constrainInput : true,
//currentText : 'Today',
dateFormat : 'mm/dd/yy',
// dayNames : ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
// dayNamesMin : ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
// dayNamesShort : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
defaultDate : '+2',
duration : 'fast',
firstDay : 1,
gotoCurrent : false, // false
hidelfNoPrevNext : false, // false
isRTL : false, // false
maxDate : '+2m',
minDate : '-1',
// monthNames : ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
// monthNamesShort : ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
navigationAsDateFormat : true,
nextText : 'Next',
numberOfMonths : 1, // [ 2, 2]
prevText : 'Prev',
shortYearCutoff : '+10',
showAnim : 'show', // show, slideDown, fadeIn, fold
showButtonPanel : true,
showCurrentAtPos : 0,
showMonthAfterYear : false,
showOn : 'both', // focus, button, both
showOptions: {direction: 'up' },
stepMonths : 1,
yearRange : '-10:+10'
});
$("#dialog").dialog( {
autoOpen : false,
buttons : {
"Ok" : function() {
$(this).dialog("close");
}
},
closeOnEscape : true,
draggable : false,
height : 'auto',
hide : 'slide',
maxHeight : false, // false or # in pixels
maxWidth : false, // false or # in pixels
minHeight : 150,
minWidth : 150,
modal : true,
position : 'center', // 'center', 'left', 'right', 'top', 'bottom', or array of coordinate pair
resizable : false,
show : 'slide',
width : 300
});
$("#tabs").tabs( {
/* disabled: [1, 2], */
//cache : true,
collapsible : false,
event : 'click', // click, mouseover
fx : {
opacity : 'toggle'
}, // toggle
selected : 0,
spinner : 'Retrieving data...'
});
$("#tabs2").tabs( {
/* disabled: [1, 2], */
//cache : true,
collapsible : false,
event : 'click', // click, mouseover
fx : {
opacity : 'toggle'
}, // toggle
selected : 0,
spinner : 'Retrieving data...'
});
$("#vtabs").tabs( {
/* disabled: [1, 2], */
//cache : true,
collapsible : false,
event : 'click', // click, mouseover
fx : {
opacity : 'toggle'
}, // toggle
selected : 0,
spinner : 'Retrieving data...'
});
$("#vtabs").tabs().addClass('ui-tabs-vertical ui-helper-clearfix');
$("#vtabs li").removeClass('ui-corner-top').addClass('ui-corner-left');
});
</script>
</head>
<body class="thrColHybHdr">
<div id="container">
<div id="header">
header
<br class="clearfloat" />
</div>
<div id="sidebarLeft">
<div id="accordionLeft">
<h4><a href="#">Section 1</a></h4>
<div>Section 1 content</div>
<h4><a href="#">Section 2</a></h4>
<div>Section 2 content</div>
<h4><a href="#">Section 3</a></h4>
<div>Section 3 content</div>
</div>
</div>
<div id="sidebarRight">sidebar right</div>
<div id="mainContent">
<div id="accordion">
<h4><a href="#">Section 1</a></h4>
<div>Section 1 content</div>
<h4><a href="#">Section 2</a></h4>
<div>Section 2 content</div>
<h4><a href="#">Section 3</a></h4>
<div>Section 3 content</div>
</div>
<br />
<p>Date: <input type="text" id="datepicker"></p>
<div id="dialog" title="Dialog Title">I'm in a dialog</div>
<br />
<div id="tabs">
<ul>
<li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Three</span></a></li>
</ul>
<div id="fragment-1">
<p>First tab is active by default:</p>
<pre><code>$('#example').tabs();</code></pre></div>
<div id="fragment-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div id="fragment-3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</div>
<div id="tabs2">
<ul>
<li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Three</span></a></li>
</ul>
<div id="fragment-1">
<p>First tab is active by default:</p>
<pre><code>$('#example').tabs();</code></pre></div>
<div id="fragment-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div id="fragment-3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</div>
<div id="vtabs">
<ul>
<li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Three</span></a></li>
</ul>
<div id="fragment-1">
<p>First tab is active by default:</p>
<pre><code>$('#example').tabs();</code></pre></div>
<div id="fragment-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div id="fragment-3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</div>
</div>
<br class="clearfloat" />
<div id="footer">footer</div>
</body>
</html>