Programming Forums

Programming Forums (http://www.programmingforums.org/forumindex.php)
-   HTML / XHTML / CSS (http://www.programmingforums.org/forum27.html)
-   -   tables dont work in firefox; they work in IE (http://www.programmingforums.org/showthread.php?t=10955)

angry_asian Aug 5th, 2006 3:23 PM
tables dont work in firefox; they work in IE
 
hi guys,
this page (copy paste in notepad save as .htm and open)
:
<!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>
<title>Sreenath Pillai's Homepage</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
    body {
        margin:0;
        padding:0;
        font: bold 11px/1.5em Verdana;
}

h2 {
        font: bold 14px Verdana, Arial, Helvetica, sans-serif;
        color: #000;
        margin: 0px;
        padding: 0px 0px 0px 15px;
}

       
       
/*- Menu Tabs F--------------------------- */

    #tabsF {
      float:left;
      width:100%;
      background:#efefef;
      font-size:93%;
      line-height:normal;
          border-bottom:1px solid #666;
      }
    #tabsF ul {
        margin:0;
        padding:10px 10px 0 50px;
        list-style:none;
      }
    #tabsF li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsF a {
      float:left;
      background:url("tableftF.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabsF a span {
      float:left;
      display:block;
      background:url("tabrightF.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#666;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsF a span {float:none;}
    /* End IE5-Mac hack */
    #tabsF a:hover span {
      color:#FFF;
      }
    #tabsF a:hover {
      background-position:0% -42px;
      }
    #tabsF a:hover span {
      background-position:100% -42px;
      }
       
       

</style>
</head>

<body bgcolor="#cccccc">
<h1 align="center">Sreenath Pillai's Homepage</h1>
<div id="tabsF">
  <ul>
    <li><a href="#" title="Link 1"><span>Home Page</span></a></li>
    <li><a href="#" title="Link 2"><span>Forums</span></a></li>
    <li><a href="#" title="Link 3"><span>Store (coming soon)</span></a></li>
    <li><a href="#" title="Longer Link Text"><span>About me</span></a></li>
    <li><a href="#" title="Link 5"><span>My writings/publications</span></a></li>
    <li><a href="#" title="Link 6"><span>My Current Projects</span></a></li>
    <li><a href="#" title="Link 7"><span>Site News</span></a></li>
    <li><a href="#" title="Link 8"><span>Contact Me</span></a></li>
  </ul>
</div>
<table border="1" width="100%" id="table1">
        <tr height=100%>
                <td width=20%>adsf</td>
                <td width=60%>adsfafa</td>
                <td width=20%>asdfasdf</td>
        </tr>
</table>
</body>
</html>
works in IE but in firefox the table appears to the right instead of below the CSS nav bar. why?

AntiNinja Aug 5th, 2006 4:34 PM
:
...
<div id="tabsF">
  <ul>
    <li><a href="#" title="Link 1"><span>Home Page</span></a></li>
    <li><a href="#" title="Link 2"><span>Forums</span></a></li>
    <li><a href="#" title="Link 3"><span>Store (coming soon)</span></a></li>
    <li><a href="#" title="Longer Link Text"><span>About me</span></a></li>
    <li><a href="#" title="Link 5"><span>My writings/publications</span></a></li>
    <li><a href="#" title="Link 6"><span>My Current Projects</span></a></li>
    <li><a href="#" title="Link 7"><span>Site News</span></a></li>
    <li><a href="#" title="Link 8"><span>Contact Me</span></a></li>
  </ul>
</div>
<script type="text/javascript">
var browser=navigator.appName
if (browser=="Netscape")
  {document.write("<br><br><br><br>")}
</script>
<table border="1" width="100%" id="table1">
        <tr height=100%>
                <td width=20%>adsf</td>
                <td width=60%>adsfafa</td>
                <td width=20%>asdfasdf</td>
        </tr>
</table></body></html>
//edit: fixed it

Arevos Aug 5th, 2006 5:33 PM
Uh... With all due respect, AntiNinja, Javascript hacks are not usually the way to solve CSS problems. Your solution also won't help Opera or Safari users. Why not just fix the CSS, instead of applying an arcane hack?

In this case, the problem revolves around all those "float: left;"s. Remove them, and the "display: block;" on "#tabsF a span", add a bit more padding to the enclosing div, and there's your solution.

angry_asian Aug 5th, 2006 7:00 PM
thanks, i got it
 
thanks arevos and ninja, but i got it. this is what i did:
:
<!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>
<title>Sreenath Pillai's Homepage</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body {
margin:0;
padding:0;
font-family: Verdana;
font-weight:bold;
font-size: 8pt;
background-color:#cccccc;
}
h2 {
font-family: Verdana;
font-weight:bold;
font-size: 14pt;
margin: 0px;
padding: 0px;
height:25px;
}
#HeaderBlock
{
height:90px;
position:absolute;
top:5px;
}
#ContentBlock
{
position:absolute;
top:100px;
}

/*- Menu Tabs F--------------------------- */
#tabsF {
float:left;
width:100%;
height:30px;
background-color:#efefef;
border-bottom:1px solid #666666;
}
#tabsF ul {
margin:0;
padding:9px 10px 0px 50px;

list-style:none;
}
#tabsF li {
display:inline;
margin:0;
padding:0;
font-size:93%;
border-bottom:1px solid #666666;

}
.normal a {
float:left;
background:url("tableftF.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
.selected a {
float:left;
background:url("tableftF.gif") no-repeat left top;
background-position:0% -42px;
margin:0;
padding:0px 0 0 4px;
text-decoration:none;
}
.normal a span {
float:left;
display:block;
background:url("tabrightF.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666666;
}

.selected a span {
float:left;
display:block;
background:url("tabrightF.gif") no-repeat right top;
background-position:100% -42px;
padding:5px 15px 4px 6px;
color:#666666;
}

.normal a:hover span {
color:#FFFFFF;
}
.normal a:hover {
background-position:0% -42px;
}
.normal a:hover span {
background-position:100% -42px;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
.normal a span {float:none;}
/* End IE5-Mac hack */

</style>
</head>
<body>
<div id="HeaderBlock">
<h1 align="center">Sreenath Pillai's Homepage</h1>
<div id="tabsF">
<ul>
<li class="normal"><a href="#" title="Link 1"><span>Home Page</span></a></li>
<li class="normal"><a href="#" title="Link 2"><span>Forums</span></a></li>
<li class="normal"><a href="#" title="Link 3"><span>Store (coming soon)</span></a></li>
<li class="normal"><a href="#" title="Longer Link Text"><span>About me</span></a></li>
<li class="selected"><a href="#" title="Link 5"><span>My writings/publications</span></a></li>
<li class="normal"><a href="#" title="Link 6"><span>My Current Projects</span></a></li>
<li class="normal"><a href="#" title="Link 7"><span>Site News</span></a></li>
<li class="normal"><a href="#" title="Link 8"><span>Contact Me</span></a></li>
</ul>
</div>
</div>
<br/><br/>
<div id="ContentBlock" style="position:absolute:top:5px;left:0px;">
<table border="1" width="100%" id="table1">
<tr height=100%>
<td width=20%>adsf</td>
<td width=60%>adsfafa</td>
<td width=20%>asdfasdf</td>
</tr>
</table>
</div>
</body>
</html>


All times are GMT -5. The time now is 12:23 AM.

Powered by vBulletin® Version 3.7.0, Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Copyright ©2007 DaniWeb® LLC