Hello Everybody
I am trying to place navigation button right side of logo but Google Chrome 30 not accepting my code, where as my code is working perfect in FF 25.0 and IE 9. For testing purpose I uploaded the files here contact us,Kindly check in Chrome and FF and IE then you can see the problem. Or kindly see the attached images.
Image from FireFox
Image from Google Chrome
Here is my HTML code
<body>
<div class="container">
<!-- Top Navigation -->
<div class="codrops-top clearfix">
<span class="right"><a class="codrops-icon codrops-icon-drop" href="#"><span>Back to the Codrops Article</span></a></span>
</div>
<header>
<img src="images/demo4/othermanazeschoollogo.jpg" width="430" height="109" />
<nav class="codrops-demos">
<a href="index.html">Home</a>
<a href="http://software.manazeschool.com">Demo</a>
<a href="index4.html">Clients</a>
<a class="current-demo" href="#">Contact</a>
</nav>
</header>
<form method="post" action="mailsend.php" name="form1">
<table width="57%" border="1" style="text-align:left;">
CSS code
/* Header Style */
.main,
.container > header {
margin: 0 auto;
padding: 0.5em;
}
.container {
height: 100%;
}
.container > header {
background: rgba(0,0,0,0.03);
}
/* Demo Buttons Style */
.codrops-demos {
float:right;
padding-top: 1em;
font-size: 0.9em;
position:relative;
}
.codrops-demos a {
margin: 0.2em;
padding: 0.45em 1em;
background: #555;
color: #fff;
font-weight: 700;
border-radius: 2px;
}
.codrops-demos a:hover,
.codrops-demos a.current-demo,
.codrops-demos a.current-demo:hover {
opacity: 0.6;
}
.codrops-nav {
text-align: center;
}
.codrops-nav a {
display: inline-block;
margin: 20px auto;
padding: 0.3em;
}