Help in writing Css

[altafhpatel]

#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

<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

[LearningCoder]

I think maybe it's to do with your rgba declaration. When I add a simple 'background: red' for example, it works in all browsers.

Maybe add a conditional statement to deal with IE:

http://www.quirksmode.org/css/condcom.html

Or you could just set the color of your navigation bar using background: #color-hex, then you won't have the issue of it not working in IE.

Regards,

LC.