#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    2
    Rep Power
    0

    Button close the tab doesn't appear in IE8


    Hi for all,

    I'm facing problems to make the button close the tab to appear in IE8, other browsers like Firefox and Chrome everything works fine.

    What could be wrong?

    Regards,

    Christian

    Code:
    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <style>
    html,body {
    	margin:0;
    	padding:0;
    	height:100%;
    }
    
    ul {
      list-style: none;
    }
    
    body {
    	font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
    	font-size: 62.5%;
    }
    
    .ui-icon {
        height: 16px;
        width: 16px;
    }
    
    .ui-icon {
        background-repeat: no-repeat;
        display: block;
        overflow: hidden;
        text-indent: -99999px;
    }
    
    .ui-state-default .ui-icon { background-position: -80px -128px; }
    	
    .ui-state-active .ui-icon { background-position: -80px -128px; }
    
    .ui-icon-close { background-position: -80px -128px; }
    			
    #tabss {
      overflow: hidden;
      width: 100%;
      margin: 0;
      padding: 0;
      list-style: none;
      background: #32a55c;
    }
    
    #tabss li {
      float: left;
      margin: 0 -15px 0 0;
    }
    
    #tabss li .ui-icon-close {
        cursor: pointer;
        float: left;
        margin: 0.3em 0.2em 0 -4.3em;
    	opacity: .65;
    	filter: alpha(opacity=65);}
    
    #tabss a {
      float: left;
      position: relative;
      padding: 1px 20px;
      height: 0; 
      line-height: 23px;
      text-decoration: none;
      color: #fff;
      border-right: 30px solid transparent;
      border-bottom: 20px solid #3D3D3D;
      border-bottom-color: #777\9;
      opacity: .45;
      filter: alpha(opacity=45);	  
    }
    
    #tabss a:hover {
      border-bottom-color: #45930b;
      opacity: 1;
      filter: alpha(opacity=100);
    }
    
    #tabss a:focus {
      outline: 0;
      border-bottom-color: #3D4248;
      opacity: 1;
      filter: alpha(opacity=100);	
    }
    
    #tabss .tab-selected {
      border-bottom-color: #3D4248;
      opacity: 1;
      filter: alpha(opacity=100);	  
    }
    
    
    #tabss a {
      height: 0; 
      line-height: 20px;
      border-right: 30px solid transparent;
      border-bottom: 20px solid #3D4248;	  
    }
        </style>   
    
      <script type="text/javascript">
            $(function () {
                tabs = $("#tabs").tabs();
            });
        </script>           
    
    </head>
    <body>
        <div class="content">
    		<div id="tabs1"> 
    			<div id="tabss">
    				<ul>
    					<li><a href="#tabs-1">Tab 1</a><span class='ui-icon ui-icon-close' role='presentation'>Remover Tab</span></li>
    					<li><a href="#tabs-2">Tab 2</a><span class='ui-icon ui-icon-close' role='presentation'>Remover Tab</span></li>
    					<li><a href="#tabs-3">Tab 3</a><span class='ui-icon ui-icon-close' role='presentation'>Remover Tab</span></li>
    				</ul>
    			</div>
    		</div>
    	</div>
    </body>
    </html>
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    828
    Rep Power
    275
    Add this in your style and see if it helps.
    Code:
    .ui-icon-close{position:relative;z-index:100;}
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    2
    Rep Power
    0
    thank you so much DonR. it worked well

IMN logo majestic logo threadwatch logo seochat tools logo