Problem with Tab Menu_问答_开发者_运维开发者技术经验分享

Why does tab menu not display across even though "display:inline" is called at: ul#tabs li { ?

<style type="text/css">

    body {  
        background-image:url(images/background.jpg);  
        background-repeat:no-repeat;  
        background-position:top center;  
        background-color:#657077;  
        margin:40px;  
   }  


   #tabbed_box {  
       margin: 0px auto 0px auto;  
       width:300px;  
   }  


   .tabbed_box h4 {  
   position: relative; 
     top: 10px; 
     left: 0px; 
       font-family:Arial, Helvetica, sans-serif;  
       font-size:23px;  
       color:#ffffff;  
       letter-spacing:-1px;  
       margin-bottom:10px;  
   }  

   .tabbed_box h4 small {  
       color:#e3e9ec;  
       font-weight:normal;  
       font-size:9px;  
       font-family:Verdana, Arial, Helvetica, sans-serif;  
       text-transform:uppercase;  
       position:relative;  
       top:-4px;  
       left:6px;  
       letter-spacing:0px;  
   }  

   .tabbed_area {  
        border:1px solid #494e52;  
        background-color: #FF99FF;    /* border color on tabbed box */  
        float: left;                        /* use this or it goes across entire page */
        padding:8px;      
   }  

   ul#tabs {  
        margin:0px; padding:0px;  
   }  
   ul#tabs li {  
        display:inline;  
   }  

  ul#tabs li a {  
       background-color:#464c54;  
       color:#ffebb5;  
       padding:8px 14px 8px 14px;  
       text-decoration:none;  
       font-size:9px;  
       font-family:Verdana, Arial, Helvetica, sans-serif;  
       font-weight:bold;  
       text-transform:uppercase;  
       border:1px solid #464c54;   
   }  
   ul#tabs li a:hover {  
       background-color:red;  
       border-color:#2f343a;  
   } 

   ul#tabs li a.active {  
       background-color:#ffffff;  
       color:#282e32;  
       border:1px solid #464c54;   
       border-bottom: 1px solid #ffffff;  
  }  

  /* for 2nd tab */
  ul#tabs li a.second {  
       background-color:#ffffff;  
       color:#FF99FF;  
       border:1px solid #464c54;   
       border-bottom: 1px solid #ffffff;  
  }  


    .content {  
       background-color:#ffffff;  
       padding:10px;  
       border:1px solid #464c54;     
   }  
   #content_2, #content_3 { display:none; }  

   ul#tabs {  
        margin:0px; padding:0px;  
       margin-top:5px;  
       margin-bottom:6px;  
   }  

    .content ul {  
       margin:0px;  
       padding:0px 20px 0px 20px;  
    }  
   .content ul li {  
       list-style:none;     /* remove the bullet points */
       border-bottom:1px solid #d6dde0;  
       padding-top:15px;  
       padding-bottom:15px;  
       font-size:13px;  
    }  
   .content ul li a {  
       text-decoration:none;  
       color:#3e4346;  
   }  
   .content ul li a small {  
       color:#8b959c;  
       font-size:9px;  
       text-transform:uppercase;  
       font-family:Verdana, Arial, Helvetica, sans-serif;  
       position:relative;  
       left:4px;  
       top:0px;  
   }  

   .content ul li:last-child {  /* removes the last thin border line from the end of the list...but not on IE 6 */
        border-bottom:none;  
   }  


  /* ---- some gradients -----*/
   ul.tabs li a {  
       background-image:url(images/tab_off.jpg);  
       background-repeat:repeat-x;    
       background-position:bottombottom;  
   }  
   ul.tabs li a.active {  
       background-image:url(images/tab_on.jpg);  
       background-repeat:repeat-x;  
       background-position:top;   
   }  
   .content {  
       background-image:url(images/content_bottom.jpg);  
       background-repeat:repeat-x;    
       background-position:bottombottom;   
   }  

/*-------- display frame code ------*/      

div.iframe-link {
 position: relative;
 float: left;
 width: 475px;
 height: 305px;
 border: 3px solid blue;
}

div.swedish {
}


div.medical { 
}

</style>

</head>  

<body>  
   <div id="tabbed_box_1" class="tabbed_box">  
       <h4>Browse Site <small>Select a Tab</small></h4>  
       <div class="tabbed_area">  

           <ul class="tabs">  
               <li><a href="" id="tab_1" class="active">Patient</a></li>  
               <li><a href="" id="tab_2">Referrals</a></li>  
               <开发者_如何学Pythonli><a href="" id="tab_3">History</a></li>  
           </ul>  

           <div id="content_1" class="content">  
               <ul>  
                   <li><a class="swedish" id="swed" title="Click to see Swedish description on right" href="javascript: void(0);">Swedish Massage</a></li>  
                   <li><a class="medical" id="med" title="Click to see Medical description on right" href="javascript: void(0);">Medical Massage</a></li>
               </ul>  
           </div>  

           <div id="content_2" class="content">  
               <ul>  
                   <li><a href="">December 2008</a></li>  
                   <li><a href="">November 2008</a></li>  
                   <li><a href="">October 2008</a></li>  
               </ul>  
           </div>  

           <div id="content_3" class="content">  
               <ul>  
                   <li><a href="">Home</a></li>  
                   <li><a href="">About</a></li>  
               </ul>  
           </div>  

       </div>  <!-- end tabbed_area -->

   </div>  <!-- end tabbed_box_1 -->      

     <div class="iframe-link">
</div>

In your style sheet, take out the ul before ul#tabs. It should just read something like this: