SitePoint Sponsor

User Tag List

Results 1 to 1 of 1

Thread: IE Problem?

Threaded View

  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE Problem?

    Hey i have been working on a new nav system for my site rather than explaining i will show you.

    http://www.liveanime.org/test.html

    You can see the tabs on the left and on a mouse over it loads the relevent content. This all works perfectly in Opera and Firefox.

    However IE is, as usual, a little buggy. It works fine if you go on each tab indevidualy but if you scroll down directly from one tab to another the start dissapearing ...

    Not sure where the problem lies but here are the relevent code. Guessing it is the javascript??

    This is the Javascript for the Tab Swaps
    Code JavaScript:
    function show_manga() 
    {
    	anime = document.getElementById('anime_navbox');
    	anime.style.display = 'none';
    	site = document.getElementById('site_navbox');
    	site.style.display = 'none';
    	manga = document.getElementById('manga_navbox');
    	manga.style.display = 'block';
    	site = document.getElementById('side_navbox');
    	site.style.backgroundColor = '#c33636';
    }
    function show_anime() 
    {
    	site = document.getElementById('site_navbox');
    	site.style.display = 'none';
    	manga = document.getElementById('manga_navbox');
    	manga.style.display = 'none';
    	anime = document.getElementById('anime_navbox');
    	anime.style.display = 'block';
    	site = document.getElementById('side_navbox');
    	site.style.backgroundColor = '#8cae36';
    }
    function show_site() 
    {
    	anime = document.getElementById('anime_navbox');
    	anime.style.display = 'none';
    	manga = document.getElementById('manga_navbox');
    	manga.style.display = 'none';
    	site = document.getElementById('site_navbox');
    	site.style.display = 'block';
    	site = document.getElementById('side_navbox');
    	site.style.backgroundColor = '#2d6d80';
    }


    HTML for the nav menu.

    Code HTML4Strict:
    <div id="side_navbox" style="width:240px; height:229px; position:absolute; top:140px; left:105px; background-color:#8cae36;">
     
    <img onmouseover="show_anime();" class="nav_anime_tab" src="/images/style2/nav_tab_anime.jpg" alt="Anime Navagation" style="position:absolute; top:0px; left:0px;" />
    <img onmouseover="show_manga();" class="nav_manga_tab" src="/images/style2/nav_manga_tab.jpg" alt="Manga Navagation" style="position:absolute; top:79px; left:0px;" />
    <img onmouseover="show_site();" class="nav_site_tab" src="/images/style2/nav_site_tab.jpg" alt="Site Navagation" style="position:absolute; top:172px; left:0px;" />
     
    <div class="anime_navbox" id="anime_navbox" style=" position:absolute; top:5px; left:50px; width:180px; display:block; background-image:url(/images/style2/anime_nav_bg.jpg); background-repeat:no-repeat; background-position:bottom ; height:224px;">
    <img src="/images/style2/anime_nav.jpg" alt="Anime Navagation" />
    <div class="anime_nav_div"><a href="#"><div class="nav_go">GO HERE</div>Anime List </a></div>
    <div class="anime_nav_div"><a href="#"><div class="nav_go">GO HERE</div>Anime Episodes </a></div>
    <div class="anime_nav_div"><a href="#"><div class="nav_go">GO HERE</div>Anime Staff </a></div>
    <div class="anime_nav_div"><a href="#"><div class="nav_go">GO HERE</div>Anime OST </a></div>
    <div class="anime_nav_div"><a href="#"><div class="nav_go">GO HERE</div>Anime Characters </a></div>
    <div class="anime_nav_div"><a href="#"><div class="nav_go">GO HERE</div>Anime Media </a></div>
    <div class="anime_nav_div"><a href="#"><div class="nav_go">GO HERE</div>Anime Gallery </a></div>
    </div>
     
    <div class="manga_navbox" id="manga_navbox" style=" position:absolute; top:5px; left:50px; width:180px; display:none; background-image:url(/images/style2/manga_nav_bg.jpg); background-repeat:no-repeat; background-position:bottom ; height:224px;">
    <img src="/images/style2/manga_nav.jpg" alt="Manga Navagation" />
    <div class="manga_nav_div"><a href="#"><div class="nav_go">GO HERE</div>Manga List </a></div>
    <div class="manga_nav_div"><a href="#"><div class="nav_go">GO HERE</div>Manga Volumes </a></div>
    <div class="manga_nav_div"><a href="#"><div class="nav_go">GO HERE</div>Manga Staff </a></div>
    <div class="manga_nav_div"><a href="#"><div class="nav_go">GO HERE</div>Manga Characters </a></div>
    <div class="manga_nav_div"><a href="#"><div class="nav_go">GO HERE</div>Manga Viewer </a></div>
    </div>
     
     
    <div class="site_navbox" id="site_navbox" style=" position:absolute; top:5px; left:50px; width:180px; display:none; background-image:url(/images/style2/site_nav_bg.jpg); background-repeat:no-repeat; background-position:bottom; height:224px;">
    <img src="/images/style2/site_nav.jpg" alt="Site Navagation" />
    <div class="manga_nav_div"><a href="#"><div class="nav_go">GO HERE</div>Home Page </a></div>
    <div class="manga_nav_div"><a href="#"><div class="nav_go">GO HERE</div>News Archive </a></div>
    <div class="manga_nav_div"><a href="#"><div class="nav_go">GO HERE</div>Features </a></div>
    <div class="manga_nav_div"><a href="#"><div class="nav_go">GO HERE</div>Live Anime Staff </a></div>
    <div class="manga_nav_div"><a href="#"><div class="nav_go">GO HERE</div>Forums </a></div>
    <div class="manga_nav_div"><a href="#"><div class="nav_go">GO HERE</div>Anime Gallery </a></div>
    <div class="manga_nav_div"><a href="#"><div class="nav_go">GO HERE</div>Learn Japanese </a></div>
    <div class="manga_nav_div"><a href="#"><div class="nav_go">GO HERE</div>Contact </a></div>
    </div>
     
    <img src="/images/style2/mascot.gif" alt="Live Anime Mascot" style="position:absolute; top:-140px; left:-18px;" />
    </div>


    And the relevent CSS
    Code CSS:
    .nav_anime_tab {
    border:0;
    }
     
    .nav_anime_tab:HOVER {
    border-left:5px solid #526a14;
    }
     
    .nav_manga_tab {
    border:0;
    }
     
    .nav_manga_tab:HOVER {
    border-left:5px solid #7c1d1d;
    }
     
    .nav_site_tab {
    border:0;
    }
     
    .nav_site_tab:HOVER {
    border-left:5px solid #0c3947;
    }
     
    .anime_navbox {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-variant:small-caps;
    font-size:12px;
    font-weight:bold;
     
    }
     
    .anime_nav_div {
    border-bottom:1px dotted #0c3947;
    width:100%;
    padding-top:3px;
    padding-bottom:3px;
     
    }
     
    .anime_navbox a {
    text-decoration:none;
    color:#EEEEEE;
     
    }
     
    .nav_go {
    display:none;
    background-color:#E8D69F;
    color:#663300;
    font-size:8px;
    padding-left:2px;
    padding-right:2px;
    float:right;
    vertical-align:middle;
    margin-top:1px;
     
    }
     
    .anime_navbox a:HOVER .nav_go  {
    display:inline;
     
    }
     
    .manga_navbox {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-variant:small-caps;
    font-size:12px;
    font-weight:bold;
     
    }
     
    .manga_nav_div {
    border-bottom:1px dotted #651313;
    width:100%;
    padding-top:3px;
    padding-bottom:3px;
     
    }
     
    .manga_navbox a {
    text-decoration:none;
    color:#EEEEEE;
     
    }
     
     
    .manga_navbox a:HOVER .nav_go  {
    display:inline;
     
    }
     
    .site_navbox {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-variant:small-caps;
    font-size:12px;
    font-weight:bold;
     
    }
     
    .site_nav_div {
    border-bottom:1px dotted #1e5262;
    width:100%;
    padding-top:3px;
    padding-bottom:3px;
     
    }
     
    .site_navbox a {
    text-decoration:none;
    color:#EEEEEE;
     
    }
     
     
    .site_navbox a:HOVER .nav_go  {
    display:inline;
     
    }

    hope you can all see what the problem is and hopefuly someone can fix it .

    If you cant see the problem in IE (i tested in 7) here is an image of what happens.
    Attached Images Attached Images


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •