7 replies [Last post]
vikavika
Offline
newbie
Last seen: 13 years 35 weeks ago
Joined: 2007-04-02
Posts: 3
Points: 0

The panels with the class="panel" are shifted to the right in FireFox, thought in IE6.0 it's shown right below the tabs (aspx .net page).
How to make them look the same in both browsers?

Thanks a lot


WebForm1





.toggle{background:#e6e7e9; width: 100%; height:17px; border-bottom:1px solid #a5b2bd; }
.toggle ul{float:left; margin:0; padding:0; list-style:none; width:550px; }
.toggle li{float:left; font-family:verdana; display:block; padding-bottom:7px; }
.toggle li a{float:left; display:block; text-decoration:none; color:#003DB8 ; }
.toggle li a:visited{color:#003DB8 ; text-decoration:none;}
.toggle li a:hover{text-decoration:underline; }
.toggle li em{float:left; display:block; padding:0 4px; font:10px verdana; margin:8px 0 0 0; font-style:normal; color:#003DB8 ; border-right:1px solid #666; cursor:pointer; }
.toggle li.on{background:url(images/ptr.gif) bottom center no-repeat; }
.toggle li.on a{color:#fff; background:#a5b1bd url(images/tab_left.gif) no-repeat; padding-left:3px; text-decoration:none; }
.toggle li.on a:visited{color:#fff; text-decoration:none;}
.toggle li.on a:hover{text-decoration:none; }
.toggle li.on em{background:#a5b1bd url(images/tab_right.gif) no-repeat top right; margin:0; padding:8px 7px 5px 4px; border:none; font-weight:bold; color:#fff; }
a.tab { border-collapse: collapse; border-style: solid solid none solid; border-color: black; border-width: 1px 1px 0px 1px; background-color: silver; padding: 2px 0.5em 0px 0.5em; margin-top: 4px; font-family: arial; text-decoration: none; }
a.tab:hover { border-color: black; background-color: white; }
.panel { border: solid 1px LightSteelBlue; background-color: white; padding: 2px; height: 250px; width:100%; overflow: auto;}




var panels = new Array('panel1', 'panel2');
var lis = new Array('li1', 'li2');
var selectedTab = null;
function showPanel(tab, name, li)
{
selectedTab = tab;
for(j = 0; j < lis.length; j++)
{
document.getElementById(lis[j]).className = (li == lis[j]) ? 'on':'';
}
for(i = 0; i < panels.length; i++)
{
document.getElementById(panels[i]).style.display = (name == panels[i]) ? 'block':'none';
}
return false;
}






  • tab1

  • tab2









panel1


panel2



thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 36 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

I've edited your post to add

I've edited your post to add in code tags, but please please PLEASE read the forum rules (the pinky topics at the top of EVERY forum) before we continue Wink

Verschwindende wrote:
  • CSS doesn't make pies

vikavika
Offline
newbie
Last seen: 13 years 35 weeks ago
Joined: 2007-04-02
Posts: 3
Points: 0

I'm sorry. I see the tags

I'm sorry. I see the /code/ tags you've added are necessary.
No solution for my problem yet, right?

Thanks

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 36 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Have you tried the complete

Have you tried the complete doctype one? That's one of my faves.

Verschwindende wrote:
  • CSS doesn't make pies

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 4 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi Apart from the fact that

Hi

Apart from the fact that you have coding errors, the quick fix is to add clear:both to the .panel class

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 20 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

thepineapplehead wrote:Have

thepineapplehead wrote:
Have you tried the complete doctype one? That's one of my faves.

w00t - i've always been a fan of this quick fix!

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

vikavika
Offline
newbie
Last seen: 13 years 35 weeks ago
Joined: 2007-04-02
Posts: 3
Points: 0

thanks a million. clear:both

thanks a million. clear:both works fine.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 36 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

vikavika wrote:thanks a

vikavika wrote:
thanks a million. clear:both works fine.

Glad you got it sorted, but you really could do with a complete doctype Wink

Verschwindende wrote:
  • CSS doesn't make pies