• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 464
  • Last Modified:

CSS width not working in Firefox

I found this piece of code on EE, it breaks a page up into simple tabs.

I've tried to adjust the width of the tabs by adding the width tag as below but it wont work in Firefox, it works perfecctly in Internet Explorer. Anyone any thoughts? Many thanks
<style type="text/css">
#tab1, #tab2, #tab3, #tab4 {display:none;}
.tabBtn {background:#ccc;width:200px;}
 
.showTab1 #tab1,
.showTab2 #tab2,
.showTab3 #tab3,
.showTab4 #tab4 {display:block;}
 
.showTab1 #tabBtn1,
.showTab2 #tabBtn2,
.showTab3 #tabBtn3,
.showTab4 #tabBtn4 {background:pink;}
</style>
<script type="text/javascript">
function setTab(num)
{
  document.getElementById('tabHolder').className = 'showTab' + num;
}
</script>
<div id="tabHolder" class="showTab1">
  <a href="#" id="tabBtn1" class="tabBtn" onclick="setTab(1)">Tab 1</a>
  <a href="#" id="tabBtn2" class="tabBtn" onclick="setTab(2)">Tab 2</a>
  <a href="#" id="tabBtn3" class="tabBtn" onclick="setTab(3)">Tab 3</a>
  <a href="#" id="tabBtn4" class="tabBtn" onclick="setTab(4)">Tab 4</a>
  <table id="tab1">
    <tr><th>Data1</th></tr>
  </table>
  <table id="tab2">
    <tr><th>Data2</th></tr>
  </table>
  <table id="tab3">
    <tr><th>Data3</th></tr>
  </table>
  <table id="tab4">
    <tr><th>Data4</th></tr>
  </table>
</div>

Open in new window

0
kbit
Asked:
kbit
2 Solutions
 
SreejithGCommented:
Use padding (padding-right) instead of width. Code attached.

regards,
Sreejith
<style type="text/css">
#tab1, #tab2, #tab3, #tab4 {display:none;}
.tabBtn {background:#ccc;padding-right:200px;	}
 
.showTab1 #tab1,
.showTab2 #tab2,
.showTab3 #tab3,
.showTab4 #tab4 {display:block;}
 
.showTab1 #tabBtn1,
.showTab2 #tabBtn2,
.showTab3 #tabBtn3,
.showTab4 #tabBtn4 {background:pink;}
</style>
<script type="text/javascript">
function setTab(num)
{
  document.getElementById('tabHolder').className = 'showTab' + num;
}
</script>
<div id="tabHolder" class="showTab1">
  <a href="#" id="tabBtn1" class="tabBtn" onclick="setTab(1)">Tab 1</a>
  <a href="#" id="tabBtn2" class="tabBtn" onclick="setTab(2)">Tab 2</a>
  <a href="#" id="tabBtn3" class="tabBtn" onclick="setTab(3)">Tab 3</a>
  <a href="#" id="tabBtn4" class="tabBtn" onclick="setTab(4)">Tab 4</a>
  <table id="tab1">
    <tr><th>Data1</th></tr>
  </table>
  <table id="tab2">
    <tr><th>Data2</th></tr>
  </table>
  <table id="tab3">
    <tr><th>Data3</th></tr>
  </table>
  <table id="tab4">
    <tr><th>Data4</th></tr>
  </table>
</div>

Open in new window

0
 
VallerianiCommented:
I have used padding for this:

padding:0px 52px; <-- change the 52px and it will set.

With the first number can change the height a bit, though it will clash if you don't move down the data.

Second number is the padding width, it will stay centered.
<style type="text/css">
#tab1, #tab2, #tab3, #tab4 {display:none;}
.tabBtn {
background:#ccc;
padding:0px 52px;
}
 
.showTab1 #tab1,
.showTab2 #tab2,
.showTab3 #tab3,
.showTab4 #tab4 {display:block;}
 
.showTab1 #tabBtn1,
.showTab2 #tabBtn2,
.showTab3 #tabBtn3,
.showTab4 #tabBtn4 {background:pink;}
</style>
<script type="text/javascript">
function setTab(num)
{
  document.getElementById('tabHolder').className = 'showTab' + num;
}
</script>
<div id="tabHolder" class="showTab1">
  <a href="#" id="tabBtn1" class="tabBtn" onclick="setTab(1)">Tab 1</a>
  <a href="#" id="tabBtn2" class="tabBtn" onclick="setTab(2)">Tab 2</a>
  <a href="#" id="tabBtn3" class="tabBtn" onclick="setTab(3)">Tab 3</a>
  <a href="#" id="tabBtn4" class="tabBtn" onclick="setTab(4)">Tab 4</a>
  <table id="tab1">
    <tr><th>Data1</th></tr>
  </table>
  <table id="tab2">
    <tr><th>Data2</th></tr>
  </table>
  <table id="tab3">
    <tr><th>Data3</th></tr>
  </table>
  <table id="tab4">
    <tr><th>Data4</th></tr>
  </table>
</div>

Open in new window

0
 
kbitAuthor Commented:
Many thanks both, I've taken inspiration from each of you!
0

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

Tackle projects and never again get stuck behind a technical roadblock.
Join Now