bennadel/code-1.cfm

## code-1.cfm
<!DOCTYPE HTML>
<html>
<head>
	<title>Using CSS Fixed Position Across Browsers</title>
	<style type="text/css">

		html,
		body {
			margin: 0px 0px 0px 0px ;
			padding: 0px 0px 0px 0px ;
			}

		#site-body-container {}

		#site-body-content {
			padding: 15px 15px 15px 15px ;
			}

		#site-bottom-bar {
			background-color: #F0F0F0 ;
			border-top: 1px solid #CCCCCC ;
			bottom: 0px ;
			font-family: verdana, arial ;
			font-size: 11px ;
			height: 30px ;
			position: fixed ;
			width: 100% ;
			z-index: 1000 ;
			}

		#site-bottom-bar-frame {
			height: 30px ;
			margin: 0px 10px 0px 10px ;
			position: relative ;
			}

		#site-bottom-bar-content {
			padding: 3px 0px 0px 0px ;
			}

		#menu-root {
			background-color: #E8E8E8 ;
			border: 1px solid #D0D0D0 ;
			color: #000000 ;
			display: block ;
			height: 22px ;
			line-height: 22px ;
			text-align: center ;
			text-decoration: none ;
			width: 105px ;
			}

		#menu-root:hover {
			background-color: #666666 ;
			border-color: #000000 ;
			color: #FFFFFF ;
			}

		#menu {
			background-color: #E8E8E8 ;
			border: 1px solid #666666 ;
			bottom: 32px ;
			display: none ;
			left: 0px ;
			padding: 5px 5px 1px 5px ;
			position: absolute ;
			width: 200px ;
			}

		#menu a {
			background-color: #E8E8E8 ;
			border: 1px solid #FFFFFF ;
			color: #000000 ;
			display: block ;
			margin-bottom: 4px ;
			padding: 5px 0px 5px 5px ;
			text-decoration: none ;
			}

		#menu a:hover {
			background-color: #666666 ;
			border-color: #000000 ;
			color: #FFFFFF ;
			}

		/* -------------------------------------------------- */
		/* -- IE 6 FIXED POSITION HACK ---------------------- */
		/* -------------------------------------------------- */

		html,
		body,
		#site-body-container {
			_height: 100% ;
			_overflow: hidden ;
			_width: 100% ;
			}

		#site-body-container {
			_overflow-y: scroll ;
			_overflow-x: hidden ;
			_position: relative ;
			}

		/* To make up for scroll-bar. */
		#site-bottom-bar {
			_bottom: -1px ;
			_position: absolute ;
			_right: 16px ;
			}

		/* To make up for overflow left. */
		#site-bottom-bar-frame {
			_margin-left: 26px ;
			}

		/* To fix IE6 display bugs. */
		#menu a {
			_display: inline-block ;
			_width: 99% ;
			}

	</style>
	<script type="text/javascript" src="jquery-1.3.2.js"></script>
	<script type="text/javascript">

		jQuery(function( $ ){
			var menuRoot = $( "#menu-root" );
			var menu = $( "#menu" );

			// Hook up menu root click event.
			menuRoot
				.attr( "href", "javascript:void( 0 )" )
				.click(
					function(){
						// Toggle the menu display.
						menu.toggle();

						// Blur the link to remove focus.
						menuRoot.blur();

						// Cancel event (and its bubbling).
						return( false );
					}
				)
			;

			// Hook up a click handler on the document so that
			// we can hide the menu if it is not the target of
			// the mouse click.
			$( document ).click(
				function( event ){
					// Check to see if this came from the menu.
					if (
						menu.is( ":visible" ) &&
						!$( event.target ).closest( "#menu" ).size()
						){

						// The click came outside the menu, so
						// close the menu.
						menu.hide();

					}
				}
			);

		});

	</script>
</head>
<body>

	<div id="site-bottom-bar" class="fixed-position">
		<div id="site-bottom-bar-frame">
			<div id="site-bottom-bar-content">

				<a id="menu-root" href="##">Toggle Menu</a>

				<div id="menu">
					<a href="##">Here is a menu item</a>
					<a href="##">Here is a menu item</a>
					<a href="##">Here is a menu item</a>
					<a href="##">Here is a menu item</a>
					<a href="##">Here is a menu item</a>
					<a href="##">Here is a menu item</a>
				</div>

			</div>
		</div>
	</div>


	<!-- ------- -->
	<!-- ------- -->


	<div id="site-body-container">
		<div id="site-body-content">

			<cfloop
				index="i"
				from="1"
				to="20"
				step="1">

				<p>
					Lorem ipsum dolor sit amet, consectetur
					adipiscing elit. Aliquam dictum enim in mauris
					luctus convallis. Aliquam erat volutpat.
					Suspendisse potenti. Duis blandit, urna vitae
					feugiat porttitor, risus est ornare metus, at
					dignissim urna velit id enim. Donec lectus nisi,
					consectetur eget sollicitudin id, bibendum
					laoreet velit.
				<p>

			</cfloop>

		</div>
	</div>

</body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<title>Using CSS Fixed Position Across Browsers</title>
	<style type="text/css">

	html,
	body {
	margin: 0px 0px 0px 0px ;
	padding: 0px 0px 0px 0px ;
	}

	#site-body-container {}

	#site-body-content {
	padding: 15px 15px 15px 15px ;
	}

	#site-bottom-bar {
	background-color: #F0F0F0 ;
	border-top: 1px solid #CCCCCC ;
	bottom: 0px ;
	font-family: verdana, arial ;
	font-size: 11px ;
	height: 30px ;
	position: fixed ;
	width: 100% ;
	z-index: 1000 ;
	}

	#site-bottom-bar-frame {
	height: 30px ;
	margin: 0px 10px 0px 10px ;
	position: relative ;
	}

	#site-bottom-bar-content {
	padding: 3px 0px 0px 0px ;
	}

	#menu-root {
	background-color: #E8E8E8 ;
	border: 1px solid #D0D0D0 ;
	color: #000000 ;
	display: block ;
	height: 22px ;
	line-height: 22px ;
	text-align: center ;
	text-decoration: none ;
	width: 105px ;
	}

	#menu-root:hover {
	background-color: #666666 ;
	border-color: #000000 ;
	color: #FFFFFF ;
	}

	#menu {
	background-color: #E8E8E8 ;
	border: 1px solid #666666 ;
	bottom: 32px ;
	display: none ;
	left: 0px ;
	padding: 5px 5px 1px 5px ;
	position: absolute ;
	width: 200px ;
	}

	#menu a {
	background-color: #E8E8E8 ;
	border: 1px solid #FFFFFF ;
	color: #000000 ;
	display: block ;
	margin-bottom: 4px ;
	padding: 5px 0px 5px 5px ;
	text-decoration: none ;
	}

	#menu a:hover {
	background-color: #666666 ;
	border-color: #000000 ;
	color: #FFFFFF ;
	}

	/* -------------------------------------------------- */
	/* -- IE 6 FIXED POSITION HACK ---------------------- */
	/* -------------------------------------------------- */

	html,
	body,
	#site-body-container {
	_height: 100% ;
	_overflow: hidden ;
	_width: 100% ;
	}

	#site-body-container {
	_overflow-y: scroll ;
	_overflow-x: hidden ;
	_position: relative ;
	}

	/* To make up for scroll-bar. */
	#site-bottom-bar {
	_bottom: -1px ;
	_position: absolute ;
	_right: 16px ;
	}

	/* To make up for overflow left. */
	#site-bottom-bar-frame {
	_margin-left: 26px ;
	}

	/* To fix IE6 display bugs. */
	#menu a {
	_display: inline-block ;
	_width: 99% ;
	}

	</style>
	<script type="text/javascript" src="jquery-1.3.2.js"></script>
	<script type="text/javascript">

	jQuery(function( $ ){
	var menuRoot = $( "#menu-root" );
	var menu = $( "#menu" );

	// Hook up menu root click event.
	menuRoot
	.attr( "href", "javascript:void( 0 )" )
	.click(
	function(){
	// Toggle the menu display.
	menu.toggle();

	// Blur the link to remove focus.
	menuRoot.blur();

	// Cancel event (and its bubbling).
	return( false );
	}
	)
	;

	// Hook up a click handler on the document so that
	// we can hide the menu if it is not the target of
	// the mouse click.
	$( document ).click(
	function( event ){
	// Check to see if this came from the menu.
	if (
	menu.is( ":visible" ) &&
	!$( event.target ).closest( "#menu" ).size()
	){

	// The click came outside the menu, so
	// close the menu.
	menu.hide();

	}
	}
	);

	});

	</script>
	</head>
	<body>

	<div id="site-bottom-bar" class="fixed-position">
	<div id="site-bottom-bar-frame">
	<div id="site-bottom-bar-content">

	<a id="menu-root" href="##">Toggle Menu</a>

	<div id="menu">
	<a href="##">Here is a menu item</a>
	<a href="##">Here is a menu item</a>
	<a href="##">Here is a menu item</a>
	<a href="##">Here is a menu item</a>
	<a href="##">Here is a menu item</a>
	<a href="##">Here is a menu item</a>
	</div>

	</div>
	</div>
	</div>


	<!-- ------- -->
	<!-- ------- -->


	<div id="site-body-container">
	<div id="site-body-content">

	<cfloop
	index="i"
	from="1"
	to="20"
	step="1">

	<p>
	Lorem ipsum dolor sit amet, consectetur
	adipiscing elit. Aliquam dictum enim in mauris
	luctus convallis. Aliquam erat volutpat.
	Suspendisse potenti. Duis blandit, urna vitae
	feugiat porttitor, risus est ornare metus, at
	dignissim urna velit id enim. Donec lectus nisi,
	consectetur eget sollicitudin id, bibendum
	laoreet velit.
	<p>

	</cfloop>

	</div>
	</div>

	</body>
	</html>