Code:
#top-navigation {
/* Adds the transparent background */
background-color: rgba(1, 1, 1, 0.8);
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
color: #f1f1f1;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
#top-navigation h1 {
float: left;
line-height: 30px;
font-size:25px;
margin: 2px 5px 0;
padding-right: 15px;
color:#f1f1f1;
}
#top-Navigation h1 a{
float: left;
line-height: 30px;
font-size:25px;
margin: 2px 5px 0;
padding-right: 15px;
color:#f1f1f1;
}
#top-navigation img{
float:left;
margin-top:4px;
margin-left:10px;
}
#top-navigation ul {
float: right;
list-style-type: none;
margin: 0;
padding: 0;
}
#top-navigation li {
display: inline;
}
#top-navigation li a {
font-size: 14px;
padding: 15px;
color: white;
text-decoration: none;
display: inline-block;
}
#top-navigation li a:hover {
background:white;
text-decoration:bold;
color: grey;
}
/* This just adds some style to the placeholder text */
#top-navigation #searchbox
{
margin-top: 10px;
margin-left:1px;
margin-right: 40px;
float:left;
}
#top-navigation #search, #submit
{
float: left;
}
#top-navigation #search
{
padding: 5px 7px;
height: 15px;
width: 250px;
border: 1px solid #a4c3ca;
font: normal 13px 'trebuchet MS', arial, helvetica;
background: #f1f1f1;
-moz-border-radius: 50px 3px 3px 50px;
border-radius: 50px 3px 3px 50px;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
}
/* ----------------------- */
#top-navigation #submit
{
background: #f1f1f1;
-moz-border-radius: 3px 50px 50px 3px;
border-radius: 3px 50px 50px 3px;
border-width: 1px;
border-style: solid;
border-color: #ffffff #ffffff #ffffff;
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
height: 28px;
margin: 0 0 0 10px;
padding: 0;
width: 70px;
cursor: pointer;
font: bold 14px Arial, Helvetica;
color: #23441e;
}
Here is the Html
Code:
<div id='top-navigation'>
<h1><b:section id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='P Answers (Header)' type='Header'/>
</b:section></h1>
<img src='http://www.dotcy.com.cy/CMSTemplates/DOTCY/Images/home_button_icon.png'/>
<form action='' id='searchbox'>
<input id='search' placeholder='Type here' type='text'/>
<input id='submit' type='submit' value='Search'/>
</form> <ul>
<li><a href='#'>Home</a></li>
<li><a href='http://panswer.blogspot.com/search/label/Blogger'>Blogger</a></li>
<li><a href='http://panswer.blogspot.com/search/label/Tutorials'>Tutorials</a></li>
<li><a href='http://panswer.blogspot.com/search/label/Earn Money'>Earn Money</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
It working fine in mozilla see here
http://panswer.blogspot.com
but not fine in IE and i didn't check in chrome
please let me help to solve this. It's fixed in IE but not showing background color. like showing in mozilla