Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Nov 2007
    Posts
    71
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Issues with FF, IE works fine.

    I have following code and works great if there are many records. However, for just one record, FF keeps record in the middle rather than in 1st row. Can someone please find a fix for me? Thanks.

    Code:
    <html>
    
    <head>
    <meta name="GENERATOR" content="Microsoft FrontPage 5.0">
    <meta name="ProgId" content="FrontPage.Editor.Document">
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Station</title>
    
    <style type="text/css">
    div.tableContainer {
    	width: 65%;		/* table width will be 99% of this*/
    	height: 120px; 	/* must be greater than tbody*/
    	overflow: auto;
    	margin: 0 auto;
    	}
    
    table {
    	width: 99%;		/*100% of container produces horiz. scroll in Mozilla*/
    	border: none;
    	background-color: #f7f7f7;
    	}
    
    table>tbody	{  /* child selector syntax which IE6 and older do not support*/
    	overflow: auto; 
    	height: 100px;
    	overflow-x: hidden;
    	}
    	
    	
    thead tr	{
    	position:relative; 
    	top: expression(offsetParent.scrollTop); /*IE5+ only*/
    	}
    	
    thead td, thead th {
    	text-align: center;
    	font-size: 14px; 
    	background-color: oldlace;
    	color: steelblue;
    	font-weight: bold;
    	border-top: solid 1px #d8d8d8;
    	}	
    	
    td	{
    	color: #000;
    	padding-right: 2px;
    	font-size: 12px;
    	text-align: right;
    	border-bottom: solid 1px #d8d8d8;
    	border-left: solid 1px #d8d8d8;
    	}
    	
    td:last-child {padding-right: 20px;} /*prevent Mozilla scrollbar from hiding cell content*/
    
    </style>
    
    
    </head>
    
    <body>
    
    <div class="tableContainer">
      <table cellspacing="0">
         <thead>
          <tr> 
            <td width="18%">Station</td>
            <td width="38%">Date</td>
            <td width="28%">Status</td>
            <td width="16%">Num.</td>
          </tr>
        </thead>
       
        <tbody>
          <tr> 
            <td>KABC</td>
            <td>09/12/2002</td>
            <td>Submitted</td>
            <td>0</td>
          </tr>
        </tbody>
      </table>
    </div>
    
    </body>
    </html>

  • #2
    Regular Coder
    Join Date
    Feb 2009
    Location
    Wheeling, IL
    Posts
    358
    Thanks
    5
    Thanked 62 Times in 60 Posts
    Don't see how this is related to javascript in any way, but... most of the time, IE would be the browser that is doing wrong, rather than FF. At this point, it seems that the following seems to be the cause of your trouble (marked in red):

    Code:
    table>tbody    {  /* child selector syntax which IE6 and older do not support*/
        overflow: auto; 
        height: 100px;
        overflow-x: hidden;
        }
    And yes, as the comment clearly states, the child selector syntax which IE6 and older do not support.... would essentially cause IE6 and older to ignore the whole property, thus it displays incorrectly in IE, but it does quite well in FF, assigning the proper height to the tbody. Either way, this is not a JS issue, but an issue with CSS. Please post in the appropriate forum in the future and ask a mod to move this to the proper forum.
    The way to success is to assume that there are no impossible things. After all, if you think something is impossible, you will not even try to do it.

    How to ask smart questions?

  • #3
    New Coder
    Join Date
    Nov 2007
    Posts
    71
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Thanks. I removed height and now header is also scrolling in FF.

  • #4
    New Coder
    Join Date
    Nov 2007
    Posts
    71
    Thanks
    9
    Thanked 0 Times in 0 Posts
    I did it with different way using DIV. Thanks.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •