Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Tab UI not showig fullimage size in FF & Chrome

    i need some help getting this html to Show the Full image witdh and Height in Firefox and Chrome
    this work perfect in IE but seems to be having a issue in the other 2 browsers

    and here is the link to the HTML code
    HTML...
    if any one can help me to work out why its not working i know i miss somethink but am not sure what your looking at the button images

    also am trying to get the text center too cant see to do it


    here is my css
    Code:
    /* $Id: example.css,v 1.5 2006/03/27 02:44:36 pat Exp $ */
    
    /*--------------------------------------------------
      REQUIRED to hide the non-active tab content.
      But do not hide them in the print stylesheet!
      --------------------------------------------------*/
    .tabberlive .tabbertabhide {
     display:none;
    }
    
    /*--------------------------------------------------
      .tabber = before the tabber interface is set up
      .tabberlive = after the tabber interface is set up
      --------------------------------------------------*/
    .tabber {
    }
    .tabberlive {
    	margin-top:6px;
    	margin-left: 5px;
    }
    
    /*--------------------------------------------------
      ul.tabbernav = the tab navigation list
      li.tabberactive = the active tab
      --------------------------------------------------*/
    ul.tabbernav
    {
    	margin:0;
    	font-family: Verdana, sans-serif;
    	font-size: 10px;
    	font-weight: bold;
    	height: 28px;
    	width: 500px;
    	padding-top: 3px;
    	padding-right: 0;
    	padding-bottom: 3px;
    	padding-left: 0;
    
    }
    
    ul.tabbernav li
    {
    	list-style: none;
    	margin: 0;
    	display: inline;
    
    }
    
    ul.tabbernav li a
    {
    	margin-left: 3px;
    	text-decoration: none;
    	background-image: url(http://files.enjin.com/55387/siggen/img/instru.png);
    	height: 28px;
    	width: 121px;
    	padding-top: 3px;
    	padding-right: 0.5em;
    	padding-bottom: 3px;
    	padding-left: 0.5em;
    	text-indent: 0;
    }
    
    ul.tabbernav li a:link {
    	color: #FFF;
        height: 28px;
    	width: 121px;
    }
    ul.tabbernav li a:visited {
    	color: #FFF;
        height: 28px;
    	width: 121px;
    }
    
    ul.tabbernav li a:hover
    {
    	color: #FFF;
    	background-image: url(http://files.enjin.com/55387/siggen/img/instru.png);
    	background-position: 0px -28px;
    	height: 28px;
    	width: 121px;
    }
    
    ul.tabbernav li.tabberactive a
    {
    	background-image: url(http://files.enjin.com/55387/siggen/img/instru.png);
    	background-position: 0px -28px;
    	height: 28px;
    	width: 121px;
    }
    
    ul.tabbernav li.tabberactive a:hover
    {
    	color: #FFF;
    	background-image: url(http://files.enjin.com/55387/siggen/img/instru.png);
    	background-position: 0px -28px;
    	height: 28px;
    	width: 121px;
    }
    
    /*--------------------------------------------------
      .tabbertab = the tab content
      Add style only after the tabber interface is set up (.tabberlive)
      --------------------------------------------------*/
    .tabberlive .tabbertab {
    	padding:5px;
    	border-top:0;
    	 /* If you don't want the tab size changing whenever a tab is changed
        you can set a fixed height */
     /* height:200px; */
    
     /* If you set a fix height set overflow to auto and you will get a
        scrollbar when necessary */
    
     /* overflow:auto; */
    }
    
    /* If desired, hide the heading since a heading is provided by the tab */
    .tabberlive .tabbertab h2 {
    	display:none;
    	font-size: 10px;
    	line-height: 28px;
    	height: 28px;
    	width: 121px;
    }
    .tabberlive .tabbertab h3 {
    	display:none;
    	font-size: 10px;
    	line-height: 28px;
    	height: 28px;
    	width: 121px;
    }
    
    /* Example of using an ID to set different styles for the tabs on the page */
    .tabberlive#tab1 {
    }
    .tabberlive#tab2 {
    }
    .tabberlive#tab2 .tabbertab {
     height:200px;
     overflow:auto;
    }
    Last edited by redlines; 04-24-2011 at 03:00 AM.

  • #2
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    5
    Thanks
    0
    Thanked 1 Time in 1 Post
    hope this works...

    Code:
    ul.tabbernav li a {
        background-image: url("http://files.enjin.com/55387/siggen/img/instru.png");
        background-repeat: no-repeat;
        display: block;
        float: left;
        height: 28px;
        line-height: 28px;
        margin-left: 3px;
        /* padding: 3px 0.5em; */
        text-align: center;
        text-decoration: none;
        text-indent: 0;
        width: 121px;
    }

  • Users who have thanked artus.systems for this post:

    redlines (04-24-2011)

  • #3
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by artus.systems View Post
    hope this works...

    Code:
    ul.tabbernav li a {
        background-image: url("http://files.enjin.com/55387/siggen/img/instru.png");
        background-repeat: no-repeat;
        display: block;
        float: left;
        height: 28px;
        line-height: 28px;
        margin-left: 3px;
        /* padding: 3px 0.5em; */
        text-align: center;
        text-decoration: none;
        text-indent: 0;
        width: 121px;
    }
    Thxs mate i knew i was missing something hahah nice find


  •  

    Posting Permissions

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