#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2011
    Posts
    10
    Rep Power
    0

    Question Issue with Tables, table cell borders and no data in cell


    I have a table that is populated using Spry. For some of the users, the table is showing its' borders in white when there is no data in the cell and for other users (like me) it's showing its' borders in black like expected. This is occurring in IE8 for the user. I have IE8 as well.

    Here is a setup of my table
    Code:
    <div id="Content">
            <p class='instructions'>Click a column header to sort the table.</p>
            <div spry:region="jdmba">
              <div spry:state="loading" class="loading">Please wait while alumni data loads&hellip;</div>
              <table class="spry" cellspacing="0" cellpadding="0">
                <tr>
                  <th scope="col" width="108px" class="sortable" spry:sort="last" id="last">Last Name</th>
                  <th scope="col" width="106px" class="sortable" spry:sort="first" id="first">First Name</th>
                  <th scope="col" width="269px" class="sortable" spry:sort="account" id="account">Company</th>
                  <th scope="col" width="66px" class="sortable" spry:sort="state" id="state">State</th>
                  <th scope="col" width="82px" class="sortable" spry:sort="hls_year" id="hls_year">JD</th>
                  <th scope="col" width="82px" class="sortable" spry:sort="hbs_year" id="hbs_year">MBA</th>
                </tr>
              </table>
              <div class="Overload">
                <table class="spry" cellspacing="0" cellpadding="0">
                  <tr spry:repeat="jdmba" spry:setrow="jdmba" spry:odd="odd" spry:even="even" spry:hover="hover" >
                    <td width="108px">{last}</td>
                    <td width="106px">{first}</td>
                    <td width="269px">{account}</td>
                    <td width="66px">{state}</td>
                    <td width="82px">{hls_year}</td>
                    <td width="82px">{hbs_year}</td>
                  </tr>
                </table>
              </div>
            </div>
    Here is my CSS file
    Code:
    a:link {
    	text-decoration: none;
    }
    a:visited {
    	text-decoration: none;
    }
    a:hover {
    	text-decoration: none;
    }
    a:active {
    	text-decoration: none;
    }
    #News a:link {
    	color: #00F;
    }
    #News a:hover {
    	color: #00F;
    	text-decoration: underline;
    }
    
    
    
    
    body {
    	background: #000 repeat;
    }
    
    
    
    
    #wrap {
    	background: #000;
    	width: 900px;
    	border: thick solid #9C0029;
    	float: left;
    	height: auto;
    	padding: 0px 0px 1em;
    	margin-top: 2%;
    	margin-left: 10%;
    }
    #footer {
    	font: bold small/50px Arial, Helvetica, sans-serif;
    	color: #FFF;
    	background: #9C0029;
    	text-align: center;
    	height: 50px;
    	width: 850px;
    	margin-left: 25px;
    }
    
    #Header {
    	background: #8F001C url(../images/banner.jpg) no-repeat center center;
    	width: 850px;
    	height: 150px;
    	margin-top: 20px;
    	margin-right: 20px;
    	margin-left: 25px;
    }
    h1 {
    	font: normal 18px Arial, Helvetica, sans-serif;
    	color: #000;
    	text-align: left;
    }
    h2 {
    	font: small Georgia, "Times New Roman", Times, serif;
    	color: #333;
    	text-align: justify;
    }
    h3 {
    	font: normal medium "Times New Roman", Times, serif;
    	color: #FFF;
    }
    h4 {
    	font-size: small;
    	color: #333;
    	text-align: left;
    }
    .banners {
    	background: #FFF0B2;
    	width: auto;
    	height: auto;
    	font: 18px Arial, Helvetica, sans-serif;
    	padding-top: .5em;
    	padding-bottom: .5em;
    	text-indent: 10px;
    }
    .Content {
    	font: 14px/normal Georgia, "Times New Roman", Times, serif;
    	text-align: justify;
    	display: block;
    	padding: 2em 3em 3em;
    }
    .Content a:link {
    	color: #00F;
    }
    .Content a:hover {
    	color: #00F;
    	text-decoration: underline;
    }
    .Content a:visited {
    	color: #00F;
    }
    
    #inner_body {
    	background: #FFF;
    	height: auto;
    	width: 800px;
    	margin-top: 0px;
    	margin-left: 50px;
    	padding-top: 0.5em;
    	padding-bottom: .5em;
    }
    #inner_border {
    	margin: 0em auto auto;
    	border: thin solid #8E887C;
    	width: 775px;
    	padding: 1em 0em 0em;
    }
    #nav_bar {
    	height: 3em;
    	width: 100%;
    	margin-left: 0%;
    	text-align: center;
    }
    
    
    #Content {
    	height: auto;
    	width: 95%;
    	padding: 0em 0% 5em;
    	margin: 2.5% 2.55% 2%;
    	text-align: left;
    	font-family: Verdana;
    }
    #nav {
    	height: auto;
    	width: 20em;
    }
    
    #News {
    	margin-left: 2px;
    	height: 30%;
    	background: #FFF0B2;
    	padding: 3%;
    }
    #News a:visited {
    	color: #00F;
    }
    
    .Overload
    {
    	height: 208px;
    	overflow: auto;
    }
    
    .odd { background-color: #E8E8E8; }
    .even { background-color: #E8E8E8;}
    .hover { background-color: #FFC;}
    table.spry {
    	font-family: Verdana;
    	font-size: 12px;
    	line-height:20px;
    	cursor: pointer;
    }
    
    .instructions {
    	font-family: Verdana;
    	font-weight:bold;
    	font-size: 12px;
    	line-height:20px;
    	cursor: pointer;
    	margin-bottom:8px;
    }
    
    .loading {
    	font-family: Verdana;
    	font-weight:bold;
    	font-size: 12px;
    	line-height:20px;
    	cursor: pointer;
    	margin-top:0px;
    	margin-bottom:8px;
    	color:#900;
    }
    
    table.spry th {
    	border-left: 1px solid #000000;
    	border-bottom: 1px solid #000000;
    	border-top: 1px solid #000000;
    	
    	font-family:Verdana;
    	padding: 0px;
    	margin: 0px;
    }
    table.spry td {
    	border-left: 1px solid #000000;
    	border-bottom: 1px solid #000000;
    	
    	font-family:Verdana;
    	padding: 0px;
    	margin: 0px;
    }
    table.spry th.sortable:hover { cursor: pointer; }
    table.spry th.sortable { text-align:left; color:#FFFFFF; background: #8F001C url(../SpryAssets/bg.gif) no-repeat 95% 6px; }
    table.spry th.ascending { background: #8F001C url(../SpryAssets/SpryMenuBarUpHover.gif) no-repeat 95% 8px;  }
    table.spry th.descending { background: #8F001C url(../SpryAssets/SpryMenuBarDownHover.gif) no-repeat 95% 8px; }
    I'm only placing borders on the left and bottom so that in my detail cells the borders aren't doubled up. So for example when I have no data for the cell State, the left and bottom border of that cell is white rather than black.

    Any ideas?

    Thanks!
  2. #2
  3. JavaScript is not spelt java
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2011
    Location
    Landan, England
    Posts
    743
    Rep Power
    170
    Code:
    table.spry {
        empty-cells: show; /* try this first, */
        border-collapse: collapse;   /* if not, add this */
    }
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2011
    Posts
    10
    Rep Power
    0
    Originally Posted by AndrewSW
    Code:
    table.spry {
        empty-cells: show; /* try this first, */
        border-collapse: collapse;   /* if not, add this */
    }
    I had to use them both but that did it. Thanks again!

IMN logo majestic logo threadwatch logo seochat tools logo