Help - Search - Members - Calendar
Full Version: Nav images vanishing in IE but working in Firefox
HTMLHelp Forums > Web Authoring > Graphics, Flash and Multimedia
ScottyB
Hey there,

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-->


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*/


Thanks in advance
ScottyB
pandy
It would help to see the vanishing image. Please post the URL to a sample page.
ScottyB
Ah my bad i thought i included the url in the post lol.

www.sabls.co.uk
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2009 Invision Power Services, Inc.