SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast stoopid's Avatar
    Join Date
    Sep 2004
    Location
    Vilnius, Lithuania
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow Hover image loading too long..

    Hey guys,
    I have some problems with my navigation menu. Here it is:
    http://comicoza.theseducersdiary.com/navigation.html

    This is my html:
    Code:
    	<ul id="nav" style="clear:both;">
      		<li><a href="#" id="navHome" class="currentSection">Home</a></li>
      		<li><a href="#" id="navCategories">Categories</a></li>
      		<li><a href="#" id="navUpload" >Upload</a></li>	
      		<li><a href="#" id="navSearch">Search</a></li>
      		<li><a href="#" id="navMembers">Members List</a></li>
      		<li><a href="#" id="navForum">Forum</a></li>
      		<li><a href="#" id="navHelp">FAQ</a></li>
      		<li><a href="#" id="navContact">Contact Us</a></li>
      	</ul>
    And here's my CSS:
    Code:
    /* CSS Document */
     
     	#nav { 
     		height: 28px; 
     		margin: 0; 
     		padding: 0; 
     		list-style: none; 
     		}
     	#nav li {
     		float: left;
     		margin-right: 1px;
     		height: 28px;
     		overflow: hidden; /* if text-resize, this'll keep the nav the same size */
     		}
     	#nav li a {
     		display: block;
     		line-height: 28px;
     		text-indent: -5000px;
     		overflow: hidden;
     		background-position: center top; /* horizontally centers the background image */
     		}
     	#navHome {
     		width: 76px;
     		background: url(images/nav-home.gif) no-repeat;
     		}
     	#navCategories {
     		width: 105px;
     		background: url(images/nav-categories.gif) no-repeat;
     		}
     	#navUpload {
     		width: 90px;
     		background: url(images/nav-upload.gif) no-repeat;
     		}
     	#navForum {
     		width: 85px;
     		background: url(images/nav-forum.gif) no-repeat;
     		}
     	#navRules {
     		width: 80px;
     		background: url(images/nav-rules.gif) no-repeat;
     		}
     	#navMembers {
     		width: 114px;
     		background: url(images/nav-members.gif) no-repeat;
     		}
     	#navHelp {
     		width: 75px;
     		background: url(images/nav-help.gif) no-repeat;
     		}
     	#navSearch {
     		width: 90px;
     		background: url(images/nav-search.gif) no-repeat;
     		}
     	#navContact {
     		width: 107px;
     		background: url(images/nav-contact.gif) no-repeat;
     		}
     		
     #nav li a:hover {
     	background-position: 50% -28px;
     	}
     	#nav li a.currentSection,
     	#nav li a.currentSection:hover {
     	background-position: 50% -56px;
     	}
    And now the problem. It looks fine with FF but when you load the page in IE and roll the mouse over the image there is a time delay between when the mouse is over the image and when the hover image shows up. And it very annoying!

    What's the problem?

    Thanks!

  2. #2
    SitePoint Enthusiast stoopid's Avatar
    Join Date
    Sep 2004
    Location
    Vilnius, Lithuania
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I guess the fault is my hosting plan.. 'Couse when I uploaded few images on imageshack.us it works fine:

    http://comicoza.theseducersdiary.com...avigation.html

    ('Member List' button is uploaded on imageshack.us)

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,855
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    It seems similar to this problem:

    http://www.vbulletin.com/forum/archi...p/t-91182.html

    Which also seems to be a hosting issue.


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
  •