Background does not appear in Internet Explorer

Question

I am trying to create a header with a logo and navigation. logo - background. It displays correctly in all browsers except the Internet browser. here is the HTML for the header:

    <div id="header"><div id="navigation"><ul>
<li>
<a href="#" >Home</a>
</li><li>
<a href="#">Profile</a>
</li><li>
<a href="#">Topics</a>
</li><li>
<a href="#">Chat</a>
</li>
</ul>
</div>
</div>

and here is css:

    #header{
position:fixed;
left:0;
right:0;
top:0;
z-index:1000;
width:100%;
height:48px;
}

/* Navigation */
#navigation{
    padding-left:50px;
background:url("http://localhost/img/logo/purple.png")no-repeat;
    position:absolute;
    left:0;
    top:0;
    min-height:48px;
     z-index:1010;
     display:inline-block;
}

can someone tell me why the background image is not showing in IE? It is displayed in all other browsers!

Answer 1

Try using

background-image:url('http://localhost/img/logo/purple.png');

Answer 2

You need to have a space between background:url("http://localhost/img/logo/purple.png")and no-repeat;:

background:url("http://localhost/img/logo/purple.png") no-repeat;

Also - do not use this URL for the image - it will only work when viewing a page from your own computer. Use a relative URL instead /img/logo/purple.png.