...

View Full Version : Tab UI not showig fullimage size in FF & Chrome



redlines
04-24-2011, 01:46 AM
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... (http://files.enjin.com/55387/siggen/tabber/example.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

/* $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;
}

artus.systems
04-24-2011, 07:36 AM
hope this works...


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;
}

redlines
04-24-2011, 11:54 AM
hope this works...


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 :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum