a problem about css in firefox

jinlong - May 10, 2008 - 15:16

when clicking the tab in firefox,the style can change ,but this is ok in ie.

please help me ! thank you !

this is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
demo
</title>
<style type="text/css">
<!--
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
body {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
}
a:link {
color: #000000;
text-decoration: underline;
}
a:visited {
text-decoration: underline;
color: #000000;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: underline;
}
#container{
    margin-left:auto;
margin-right:auto;
width:1066px;;
}
#left{
    margin-top:20px;
    margin-left:40px;
    width:710px;
float:left;
clear:right; 
}
#up{
    margin:0px;
width:684px;
height:264px;
}
.sec1 {
  background:transparent  #FFFFFF no-repeat 0px 0em;
  cursor: pointer;
  color: #000000;
  font-weight: bold;
  height:40px;
  font-size:16px;
  }
.sec2 {
  background:transparent #66CCFF no-repeat 0px 0em;
  cursor: pointer;
  color: #FF0000;
  font-weight: bold;
  height:40px;
  font-size:16px;
  }
.main_tab {
  background-color:#FFFF33;
  position:inherit;
}
.STYLE3 {font-size: 10px; color: #666666; }

-->
</style>
<script language=javascript>
function secBoard(n)
{
for(i=0;i<document.getElementById('secTable').rows[0].cells.length;i++){
document.getElementById('secTable').rows[0].cells.className="sec2";
document.getElementById('secTable').rows[0].cells[n].className="sec1";
}
for(i=0;i<document.getElementById('mainTable').tBodies.length;i++){
document.getElementById('mainTable').tBodies.style.display="none";
}
document.getElementById('mainTable').tBodies[n].style.display="block";
}
</script>
</head>
<body>
<div id="container">
     <div id="left">
               <div id="up">
               <table width="516px" height="40px;" border=0 cellpadding=0 cellspacing=0 id=secTable>
           <tr align=center> 
                      <td width="258px" valign="middle"  class=sec1 onclick="secBoard(0)">Find a business</td>
                      <td width="258px" valign="middle" class=sec2 onclick="secBoard(1)">Add your buisiness</td>
            </tr>
           </table> 
          <table width="685px" height="224px"  border="0"  cellpadding="o" cellspacing="0" class="main_tab" id="mainTable">
            <form action="" method="post" name="find_business" id="find_business">
              <tbody style="display:block;">
               <tr><td>1111111111111111111111</td></tr>
              </tbody>
            </form>
            <tbody style="display:none;">
              <tr>
                <td align="center" valign="top"><br />
                  2222222222 </td>
              </tr>
            </tbody>
          </table>
       </div>
      </div>
</div>
</body>
</html>

» Login or register to post comments

I love it when...

zeta ζ - May 10, 2008 - 16:10

someone just dumps a load of code in their post.

Which bit is the tab? what is its style? how does it change? How do you expect people to wade through this in order to help?

Here is an exercise in the value of indenting code;-

<script language=javascript>
function secBoard(n){
  for(i=0;i<document.getElementById('secTable').rows[0].cells.length;i++){
    document.getElementById('secTable').rows[0].cells[i].className="sec1";
  }
  document.getElementById('secTable').rows[0].cells[n].className="sec2";
  for(i=0;i<document.getElementById('mainTable').tBodies.length;i++){
    document.getElementById('mainTable').tBodies[i].style.display="none";
  }
  document.getElementById('mainTable').tBodies[n].style.display="block";
}
</script>

___________________
It’s in the detaιls…
_{demonstration portfolio}

thank you very much for your

jinlong - May 15, 2008 - 02:28

thank you very much for your suggestion! but it can't fix the text of the table when changing tags in firefox,too.

my code can run. please copy it to your computer for test, then you give me good idears.

i very need it,wait for on line....

thank you again!!!!!!!!!

---------------------------------------------------------------------------
Women Lose Weight-->I would love to lose weight!

Your code is not correctly

zeta ζ - May 15, 2008 - 11:01

Your code is not correctly structured (see indentation), gives errors, and doesn’t do what it should.

Your html has a table with two tbody tags, which causes layout problems when changing the display property. It would be better to use div tags. Your tabs are also in a table, this would be better as ul & li tags.

These changes will mean your code will need to be changed also.

My code doesn’t fix the text of the table when changing tags in firefox but it could. It changes the display of your text when a tab is clicked.

My suggestion would be to look at these links and choose the most suitable solution;-

___________________
It’s in the detaιls…
_{demonstration portfolio}

thank you very much! i

jinlong - May 22, 2008 - 00:53

thank you very much! i sloved it by div.