The Official Browser Bar - FinerBrowsing

The Browser Bar

With your help, the web can become a better place . . . one browser at a time.

browser-bar-display

Get the Code

To add the Browser Bar to your site, simply copy and paste the following code just below the body tag (or wherever appropriate).
Customization is welcome! See a live sample here. To properly render rounded corners of the Browser Bar in older browsers, try using CSS3 Pie.

<!--[if lt IE 9]>

<style type="text/css">
	
	body {
		padding-top: 35px !important;
	}
	
	.browser-bar {
		background-repeat: repeat-x;
		background-image: url(http://www.finerbrowsing.com/images/framework/warning-bar.jpg);
		width: 100%;
		top: 0px;
		height: 35px;
		position: fixed;
		box-shadow: 0px 0px 5px #4c4438 ;
		z-index: 1000;
		opacity: 0.85;
	}
	
	.browser-bar .browser-bar-wrapper {
		display: block;
		width: 500px;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: 3px;
		padding: 5px;
		color: white;
		background-color: black;
		border-radius: 50px;
		opacity: 0.85;
	}
	
	.browser-bar .browser-bar-wrapper a {
		color: inherit;
		text-decoration: none;
	}
	
	.browser-bar .browser-bar-wrapper a span {
		padding-top: 2px;
		padding-bottom: 2px;
		padding-left: 10px;
		padding-right: 10px;
		background-color: white;
		color: black;
		border-radius: 15px;
		margin-left: 10px;
	}
	
</style>

<div class="browser-bar">
	
	<div class="browser-bar-wrapper">
		
		<a href="http://www.finerbrowsing.com/">Hey! It looks like you are using an outdated browser. <span>Upgrade Now!</span></a>
		
	</div>
	
</div>

<![endif]-->