Works in IE but not FF - Can't get image working

Discussion in 'CSS' started by local-realtor, Apr 23, 2007.

  1. #1
    I am building a tab menu and I can get the image for the left hand tab to show up in IE but not FF. Any help would be greatly appreciated.

    
    <style type="text/css">
    p, h1, h2, h3, h4, h5, h6, ul, ol, fieldset, form {
          margin  : 0;
          padding : 0;
      }
      
    /*- Global nav-------------------------- */
    
        #global-nav {
          float:left;
    	  width:760px;
          background:#FFF;
          font-size:100%;
          line-height:normal;
          }
        #global-nav ul {
    	margin:0;
    	padding:10px 0px 0 10px;
    	list-style:none;
          }
        #global-nav li {
          display:inline;
          margin:0;
          padding:0 0 0 0;
          }
        #global-nav a {
          float:left;
          background:url("tableftI.gif") no-repeat left top;
          margin:0;
          padding:0 0 0px 4px;
    	  font:15px Arial, Helvetica, sans-serif;
    	  font-weight:bold;
          text-decoration:none;
          }
        #global-nav a span {
          float:left;
          display:block;
          background:url("tabrightI.gif") no-repeat right top;
          padding:5px 15px 4px 6px;
          color:#012358;
          }
        /* Commented Backslash Hack hides rule from IE5-Mac \*/
        #global-nav a span {float:none;}
        /* End IE5-Mac hack */
        #global-nav a:hover span {
          color:#012358;
    	  text-decoration:underline;
          }
        
    	#global-nav a#activetab span { 
    	  background-position:100% -27px;color: #FFF;  
    	  }
    	  
    
    #global-nav a:link#activetab, #global-nav a:visited#activetab, { 
          background-position: 0% -27px; 
    	  } 
    </style>
    
    <div id="global-nav">
      <ul>
        <li><a id="activetab" href="#" title="Link 1"><span>Home</span></a></li>
        <li><a id="activetab" href="#" title="Link 2"><span>Travel</span></a></li>
        <li><a href="#" title="Longer Link Text"><span>Insurance</span></a></li>
        <li><a href="#" title="Link 3"><span>Cars &amp; Car Care</span></a></li>
        <li><a href="#" title="Link 5"><span>Membership</span></a></li>
        <li><a href="#" title="Link 6"><span>Newsroom</span></a></li>
    	<li><a href="#" title="Link 7"><span>Your Profile</span></a></li>
      </ul>
    </div>
    
    
    Code (markup):
     
    local-realtor, Apr 23, 2007 IP
  2. Mr Blonde

    Mr Blonde Guest

    Messages:
    142
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #2
    try adding a 'display:block' to '#global-nav a'
     
    Mr Blonde, Apr 23, 2007 IP
  3. local-realtor

    local-realtor Guest

    Messages:
    140
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks for help. Turns out I have an extra ","

    That was messing me up.
     
    local-realtor, Apr 24, 2007 IP