Results 1 to 6 of 6
  1.    #1  
    I am having issues with a table with CSS that I hope someone can help me with. I can't seem to get the table/cell border to not take up space...

    Here is a complete screen shot:
    b1.png

    Here is a blow up of the problem area:
    b2.png

    The purple-ish arrows show point to the 1 tall row at the bottom and 2 pixel wide columns that the table is adding between cells. I have tried using "border-collapse: collapse;" and tried zeroing out cell padding, spacing, etc.

    Here is the code for the table:
    Code:
    <div id="footer-title" style="width: 960; height: 45; position: fixed; bottom: 0px; right: 0px">
    	<table class="table-ns" style="width: 960; height: 45;"> 
    <!-- title 3 -->
    		<tr class="table-ns"> 
    			<td style="width: 320px; height: 45;"> 
    				<div class="pyTimer" id="pyTimer"></div>
    			</td> 
    <!-- title 2 -->
    			<td style="width: 25px; height: 45;> 
    				<div class="menu-spacer">
    				</div>
    			</td> 
    			<td style="width: 45px; height: 45;"> 
    				<div class="menu-airship" id="menu-airship"></div>
    			</td> 
    			<td style="width: 45px; height: 45;"> 
    				<div class="menu-ferry" id="menu-ferry"></div>
    			</td> 
    			<td style="width: 45px; height: 45; border: 0;"> 
    				<div class="menu-guild" id="menu-guild"></div>
    			</td> 
    			<td style="width: 45px; height: 45; border: 0;"> 
    				<div class="menu-moon" id="menu-moon"></div>
    			</td> 
    			<td style="width: 45px; height: 45;"> 
    				<div class="menu-rse" id="menu-rse"></div>
    			</td> 
    			<td style="width: 45px; height: 45;"> 
    				<div class="menu-race" id="menu-race"></div>
    			</td> 
    			<td style="width: 25px; height: 45;"> 
    				<div class="menu-spacer">
    				</div>
    			</td> 
    <!-- title 1 -->
    			<td style="width: 320px; height: 45;"> 
    				<div class="titleTextLeft">
    					HOME
    				</div>
    			</td> 
    		</tr> 
    	</table> 
    </div>
    And here is the CSS:
    Code:
    .table-ns
    {
    	border-collapse: collapse; 
    	border: 0px;
    	padding:0px;
    	cellpadding: 0px;
    	cellspacing: 0px;
    }
    .pyTimer
    {
    	width:320px;
    	height:45px;
    	background:url(../images/py-right.png) 0px 0px no-repeat;
    }
    .menu-spacer
    {
    	width:23px;
    	height:43px;
    }
    .menu-airship
    {
    	width:45px;
    	height:45px;
    	background:url(../images/menu-airship.png) 0px 0px no-repeat;
    }
    .menu-ferry
    {
    	width:45px;
    	height:45px;
    	background:url(../images/menu-ferry.png) 0px 0px no-repeat;
    }
    .menu-guild
    {
    	width:45px;
    	height:45px;
    	background:url(../images/menu-guild.png) 0px 0px no-repeat;
    }
    .menu-moon
    {
    	width:45px;
    	height:45px;
    	background:url(../images/menu-moon.png) 0px 0px no-repeat;
    }
    .menu-rse
    {
    	width:45px;
    	height:45px;
    	background:url(../images/menu-rse.png) 0px 0px no-repeat;
    }
    .menu-race
    {
    	width:45px;
    	height:45px;
    	background:url(../images/menu-race.png) 0px 0px no-repeat;
    }
    .titleTextLeft
    {
    	color: white;
    	text-align: left;
    	height: 28px;
    	width: 298px; 
    	top: 10px;
    	padding-top:0px;
    	padding-bottom:0px;
    	padding-right:0px;
    	padding-left:20px;
    	font-size: 14pt;	
    }
    Any ideas what is adding the rows and columns between the cells?

    BTW, this is a menu at the bottom of the card that scrolls left and right
  2. #2  
    Possibly stupid question, but have you tried sticking the cellspacing and cellpadding on the tables as attributes?

    Eg.
    Code:
    <table cellspacing="0" border="0"></table>
    Alternatively I'd just implement the same thing without tables at all, just use floated divs.
    My apps:
    ReWeather - Attractive weather app that reflects current conditions
    Suburbly UK (trial version) - Search for properties to rent, share or buy all over UK.

    Twitter: @joshsharp / @recursivemedia
  3.    #3  
    Quote Originally Posted by joshsharp View Post
    Possibly stupid question, but have you tried sticking the cellspacing and cellpadding on the tables as attributes?

    Eg.
    Code:
    <table cellspacing="0" border="0"></table>
    Alternatively I'd just implement the same thing without tables at all, just use floated divs.
    Yeah, the class "table-ns" has "border-collapse: collapse; border: 0px; padding:0px; cellpadding: 0px; cellspacing: 0px;" I've tried with all sorts of combinations too. Also I have tried hard coding them as a style rather than using a class, all to no avail.
  4. #4  
    From your comment, it looks like you didn't quite understand. He's saying DON'T use css. 'style' just sets CSS styles inline. The method Josh described actually sets the hard attributes directly on the table, not on the table's style attribute. There is a difference.

    Also, cellpadding and cellspacing are not CSS attributes. use padding and border-spacing respectively. Note that when working in web browsers, IE may not handle border-spacing properly and thus using the cellspacing attribute directly on the tag is recommended. For a WebOS app though you should be fine.
    danNielson.com - Slalom - twitter - facebook
    A posted thanks dies with the thread. Clicking the button lasts until the admins get bored with this site and throw it in the recycling bin.
  5.    #5  
    Quote Originally Posted by unfairSurprisery View Post
    From your comment, it looks like you didn't quite understand. He's saying DON'T use css. 'style' just sets CSS styles inline. The method Josh described actually sets the hard attributes directly on the table, not on the table's style attribute. There is a difference.

    Also, cellpadding and cellspacing are not CSS attributes. use padding and border-spacing respectively. Note that when working in web browsers, IE may not handle border-spacing properly and thus using the cellspacing attribute directly on the tag is recommended. For a WebOS app though you should be fine.

    I tried that and still was getting the lines.

    Quote Originally Posted by joshsharp View Post
    Alternatively I'd just implement the same thing without tables at all, just use floated divs.
    I have since fixed it using floated divs as recommended.
  6. #6  
    Glad we could help.
    My apps:
    ReWeather - Attractive weather app that reflects current conditions
    Suburbly UK (trial version) - Search for properties to rent, share or buy all over UK.

    Twitter: @joshsharp / @recursivemedia

Posting Permissions