Reputation: 97
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. 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;">
Style Sheet 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;
}
Thanx in advance
Upvotes: 1
Views: 4142
Reputation: 97
I add these 2
header {overflow: hidden;}
header img {float: left;}
And every thing working fine in all browsers.
Any way thank you for considering my problem.
Upvotes: 1