Well the problem i'm faced with, after spending a few hours coding my new business website i've come across a problem that has totally lost me, The website works perfectly fine in Mozilla Firefox but when it comes to IE thats a totally different situation.
When loading the site in IE everything appears to be working fine, as soon as you click 1 of the links on the Nav menu its takes you to the page like it should but then after the page has loaded the images from the nav menu then just vanish into thin air. Below i've copied & pasted my Html code for the nav menu aswell as the css style thats been used aswell. Any suggestions are welcome as its really left me stuck.
Html Code
CODE
<!--MENU BAR IMAGE-->
<div id="menubar_bg">
<!--MENU BAR-->
<div id="nav">
<ul class="menu">
<li id="homepage"><a href="index.html"><span>#</span></a></li>
<li id="about"><a href="about.html"><span>#</span></a></li>
<li id="services"><a href="service.html"><span>#</span></a></li>
<li id="gallery"><a href="gallery.html"><span>#</span></a></li>
</ul>
</div></div>
<!--MENU BAR END-->
<div id="menubar_bg">
<!--MENU BAR-->
<div id="nav">
<ul class="menu">
<li id="homepage"><a href="index.html"><span>#</span></a></li>
<li id="about"><a href="about.html"><span>#</span></a></li>
<li id="services"><a href="service.html"><span>#</span></a></li>
<li id="gallery"><a href="gallery.html"><span>#</span></a></li>
</ul>
</div></div>
<!--MENU BAR END-->
Css Style For Nav Menu
CODE
/*MENU BAR IMAGE*/
#menubar_bg {
background-repeat: no-repeat;
background-image: url(images/menubar_image.png);
height: 52px;
width: 851px;
float: left;
margin-left: 25px;
}
/*MENU BAR IMAGE END*/
/*NAVIGATION*/
#nav {
width: 600px;
padding-top: 5px;
float: right;
height: 40px;
margin-right: 50px;
}
.menu ul {
padding: 0;
margin: 0;
list-style-type: none;
list-style: none;
display: inline;
}
.menu li {
padding-right: 10px;
margin: 0 5px 0 0;
height: 40px;
list-style-type: none;
list-style: none;
display: inline;
float: left;
}
span {
display: none;
}
#homepage a{
background: url(images/homepage.png);
width: 103px;
height: 48px;
display: block;
}
#about a{
background: url(images/about.png);
width: 93px;
height: 48px;
display: block;
}
#gallery a{
background: url(images/gallery.png);
width: 86px;
height: 48px;
display: block;
}
#services a{
background: url(images/services.png);
width: 88px;
height: 48px;
display: block;
}
/*NAVIGATION END*/
#menubar_bg {
background-repeat: no-repeat;
background-image: url(images/menubar_image.png);
height: 52px;
width: 851px;
float: left;
margin-left: 25px;
}
/*MENU BAR IMAGE END*/
/*NAVIGATION*/
#nav {
width: 600px;
padding-top: 5px;
float: right;
height: 40px;
margin-right: 50px;
}
.menu ul {
padding: 0;
margin: 0;
list-style-type: none;
list-style: none;
display: inline;
}
.menu li {
padding-right: 10px;
margin: 0 5px 0 0;
height: 40px;
list-style-type: none;
list-style: none;
display: inline;
float: left;
}
span {
display: none;
}
#homepage a{
background: url(images/homepage.png);
width: 103px;
height: 48px;
display: block;
}
#about a{
background: url(images/about.png);
width: 93px;
height: 48px;
display: block;
}
#gallery a{
background: url(images/gallery.png);
width: 86px;
height: 48px;
display: block;
}
#services a{
background: url(images/services.png);
width: 88px;
height: 48px;
display: block;
}
/*NAVIGATION END*/
Thanks in advance
ScottyB