Skip to content

Instantly share code, notes, and snippets.

Created August 9, 2012 08:31
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save anonymous/3302327 to your computer and use it in GitHub Desktop.
CSS3 PIE ie6 misposition test
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>CSS3 PIE ie6 misposition</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1"/>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 10]>
<script src="http://ship.raonnet.com/switchs/head/html5forIE/PIE.js"></script>
<![endif]-->
<script type="text/javascript">
$(document).ready(function(){
if (window.PIE) {
$(".menutabs li").each(function() {
PIE.attach(this);
});
}
});
</script>
<style>
body
{
margin: 0;
padding: 0;
}
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary
{
display: block;
margin-bottom: 0 !important;
margin-top: 0 !important;
}
#middle
{
border-bottom: #C6C6C6 solid 1px;
background: #F9F9F9;
border-bottom: #DFDFDF solid 1px;
}
#aside
{
margin: 0 auto;
width: 950px;
}
#header
{
background: #eee;
border-bottom: #C6C6C6 solid 1px;
clear: both;
height:200px;
}
#header .logo
{
float: left;
}
#header .logo h1
{
margin: 0;
padding: 0;
}
#header .logo a
{
display: block;
font-family: arial;
font-size: 30px;
outline: none;
}
#header .headertop
{
width:950px
}
#topnav
{
float: right;
}
#header .menutabs
{
clear: right;
float: right;
width: 750px;
}
#header .menutabs ul
{
text-align: center;
display: block;
list-style-type: none;
padding: 0;
position: relative;
}
#header .menutabs li
{
float: left;
margin-left: 24px;
position: relative;
width: 100px;
height: 100px;
background: #ffffff;
background: linear-gradient(to bottom, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);
background: -moz-linear-gradient(top, #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);
background: -o-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f3f3f3), color-stop(51%,#ededed), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);
border-radius: 50px;
box-shadow: rgba(0, 0, 0, 0.2) 3px 3px 3px;
pie-background: linear-gradient( #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);
}
#header .menutabs li a
{
color: #454442;
padding: 35px 0;
position: relative;
text-shadow: 1px 1px 1px #ffffff;
display: block;
font-family: arial;
font-size: 20px;
top: 1px;
}
</style>
</head>
<body>
<header id="header">
<div class="headertop">
<div class="logo">
<h1><a href="#">LOGO</a></h1>
</div>
<div class="menutabs">
<nav id="topnav">
<ul>
<li><a href="#" target="">MENU1</a></li>
<li><a href="#" target="">MENU2</a></li>
<li><a href="#" target="">MENU3</a></li>
<li><a href="#" target="">MENU4</a></li>
<li><a href="#" target="">MENU5</a></li>
</ul>
</nav>
</div>
</div>
</header>
<section id="container">
<section id="middle">
<div class="subbox"></div>
</section>
<aside id="aside">
<article id="content"></article>
</aside>
</section>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment