#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2001
    Location
    Riverdale, NYC
    Posts
    9
    Rep Power
    0

    Question CSS table problem


    Hello, I have a problem with the table format in CSS.
    How can I remove all the space (in yellow) between the cells? Please take a look at the following page:
    http://mkashlev.dyndns.org:7771/ISSI2003-web/css3.html
    I want all the blue stuff together without any spaces between pictures. How can i accomplish this?

    The code is as follows:
    Code:
      <?xml version="1.0"?>
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <title>CSS TEST</title>
      <style type="text/css">
    
      body {
      margin:0;
      padding:0;
      color:#000;
      background: #f5f5f5;
      font: 0.8em Verdana, arial, sans-serif;
      }
    
      div.centered {text-align: center;} 
      div.centered table {margin:4 auto; text-align:left; width:700px; height:600; background-color:yellow; border:0px;} 
      td.main {margin:0px; padding 0px;}
      td.logo {margin:0px; padding 0px; width:97px; height:79px; border:0px}
      td.title {margin:0px; padding 0px; width:595px; height:79px; border:0px}
      td.navbar {margin:0px; padding 0px; width:97px; border:0px}
      td.body {margin:0px; padding 0px;}
      td.hrleft {margin:0px; padding 0px; width:97; height:9;}
      td.hrright {margin:0px; padding 0px; width:595; height:9;}
      td.vrtop {margin:0px; padding 0px;}
      td.vrmid {margin:0px; padding 0px; width:8; height:9;}
      td.vrbottom {margin:0px; padding 0px; width:8px; height:155px border:0px}
      td.bottombar {margin:0px; padding 0px; width:105px; border:0px}
      img.logo 
      {
        height: 79px;
        width: 97px;
        border: 0px;
        margin: 0px;
      }
      img.title
      {
        height: 79px;
        width: 595px;
        border: 0px; 
      }
      img.navbar
      {
        width: 97px;
        padding: 0px;
        border: 0px;
      }
      img.vrtop 
      {
        height: 79px;
        width: 8px;
      }
      img.vrmid 
      {
        height: 9px;
        width: 8px;
      }
      img.vrbottom 
      {
        height: 155px;
        width: 8px;
      }
      img.hrleft 
      {
        height: 9px;
        width: 97px;
      }
      img.hrright 
      {
        height: 9px;
        width: 595px;
      }
      img.bottombar
      {
        width: 105px;
        border: 0px;
      }
    
      </style>
      </head>
    
      <body>
    
    <div class="centered">
    <table> 
    	<TR>
    		<TD class="logo">
    			<A HREF="http://www.weizmann.ac.il">
    				<IMG class="logo" SRC="images/Weizmann-Institute.gif" ALT=""></A></TD>
    		<TD class="vrtop">
    			<IMG class="vrtop" SRC="images/about_02.gif" ALT=""></TD>
    		<TD class="title">
    			<IMG class="title" SRC="images/about_03.gif" ALT=""></TD>
    	</TR>
    	<TR>
    		<TD class="hrleft">
    			<IMG class="hrleft" SRC="images/about_04.gif" ALT=""></TD>
    		<TD class="vrmid">
    			<IMG class="vrmid" SRC="images/about_05.gif" ALT=""></TD>
    		<TD class="hrright">
    			<IMG class="hrright" SRC="images/about_06.gif" ALT=""></TD>
    	</TR>
    	<TR>
    		<TD class="navbar" bgcolor=yellow>
    			<A HREF="index.html">
    			<IMG class="navbar" SRC="images/Home.gif" HEIGHT=34 ALT=""></A>
    		</TD>
    		<TD class="vrbottom" ROWSPAN=5 bgcolor=pink>
    			<IMG class="vrbottom" SRC="images/about_08.gif" ALT="">
    		</TD>
    		<TD class="body" ROWSPAN=6 bgcolor=red>
    			body
    		</TD>
    	</TR>
    	<TR valign=top>
    		<TD class="navbar" bgcolor=green>
    			<A HREF="about.html">
    			<IMG class="navbar" SRC="images/About.gif" HEIGHT=31 ALT=""></A>
    		</TD>
    	</TR>
    	<TR valign=top>
    		<TD class="navbar" bgcolor=orange>
    			<A HREF="students.html">
    			<IMG class="navbar" SRC="images/Students.gif" HEIGHT=37 ALT=""></A>
    		</TD>
    	</TR>
    	<TR valign=top>
    		<TD class="navbar" bgcolor=brown>
    			<A HREF="pics.html">
    			<IMG class="navbar" SRC="images/Pictures.gif" HEIGHT=38 ALT=""></A>
    		</TD>
    	</TR>	
    	<TR valign=top>
    		<TD class="navbar" bgcolor=blue>
    			<IMG class="navbar" SRC="images/about_13.gif" HEIGHT=15 ALT="">
    		</TD>
    	</TR>
    	<TR valign=top>
    		<TD class="bottombar" colspan=2 bgcolor=purple>
    			<IMG class="bottombar" SRC="images/about_13.gif" height=300 ALT="">
    		</TD>
    	</TR>
    </table>
    
    </div> 
    
      </body>
      </html>
    Thanks in advance,

    ~Dmitry
  2. #2
  3. mod_dev_shed
    Devshed Supreme Being (6500+ posts)

    Join Date
    Sep 2002
    Location
    Atlanta, GA
    Posts
    14,817
    Rep Power
    1100
    Code:
    border-collapse: collapse;
    http://www.w3.org/TR/CSS21/tables.html#borders

    Glad to see you moved all that to CSS. You know it's only one step further to use <div>s for your layout!
    # Jeremy

    Explain your problem instead of asking how to do what you decided was the solution.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Location
    Cambridge, UK
    Posts
    31
    Rep Power
    12
    probably good to add:

    <table cellspacing="0" cellpadding="0"> if the border-collapse doesn't work
  6. #4
  7. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2001
    Location
    Riverdale, NYC
    Posts
    9
    Rep Power
    0

    Angry still not working


    Still there are some spaces between cells in the navbar.
    Look here: http://mkashlev.dyndns.org:7771/ISSI2003-web/css4.html
    I modified the code like this:
    Code:
      <?xml version="1.0"?>
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <title>CSS TEST</title>
      <style type="text/css">
    
      body {
      margin:0;
      padding:0;
      color:#000;
      background: #f5f5f5; 
      font: 0.8em Verdana, arial, sans-serif;
      }
         
      div#centered {text-align: center;} 
      div#centered table {margin:0 auto; text-align:left; width:700px; height:550; background-color:yellow; border:0px; border-
    
    collapse: collapse;} 
      td#main {margin:0px; padding 0px;}
      td#logo {margin:0px; padding 0px; width:97px; border:0px}
      td#title {margin:0px; padding 0px; width:595px; border:0px}
      td#navbar {margin:0px; padding 0px; width:97px; border:0px margin-bottom: 0px; bottom:0px;}
      td#body {margin:0px; padding 0px;}
      td#hrleft {margin:0px; padding 0px; width:97;}
      td#hrright {margin:0px; padding 0px; width:595;}
      td#vrtop {margin:0px; padding 0px;}
      td#vrmid {margin:0px; padding 0px; width:8;}
      td#vrbottom {margin:0px; padding 0px; width:8px; border:0px bottom:0px;}
      td#bottombar {margin:0px; padding 0px; width:105px; border:0px}
      img#logo 
      {
        height: 79px;
        width: 97px;
        border: 0px;
        margin: 0px;
        margin-bottom: 0px;
      }
      img#title
      {
        height: 79px;
        width: 595px;
        border: 0px; 
      }
      img#navbar
      {
        width: 97px;
        padding: 0px 0px;
        border: 0px;
        margin-bottom: 0px;
        bottom:0px;
      }
      img#vrtop 
      {
        height: 79px;
        width: 8px;
      }
      img#vrmid 
      {
        height: 9px;
        width: 8px;
      }
      img#vrbottom 
      {
        height: 155px;
        width: 8px;
        bottom:0px;
      }
      img#hrleft 
      {
        height: 9px;
        width: 97px;
      }
      img#hrright 
      {
        height: 9px;
        width: 595px;
      }
      img#bottombar
      {
        width: 105px;
        border: 0px;
      }
    
      </style>
      </head>
    
      <body>
    
    <div id="centered">
    <table cellpadding="0" cellspacing="0"> 
    	<TR>
    		<TD id="logo">
    			<A HREF="http://www.weizmann.ac.il">
    				<IMG id="logo" SRC="images/Weizmann-Institute.gif" ALT=""></A></TD>
    		<TD id="vrtop">
    			<IMG id="vrtop" SRC="images/about_02.gif" ALT=""></TD>
    		<TD id="title">
    			<IMG id="title" SRC="images/about_03.gif" ALT=""></TD>
    	</TR>
    	<TR>
    		<TD id="hrleft" valign=top>
    			<IMG id="hrleft" SRC="images/about_04.gif" ALT=""></TD>
    		<TD id="vrmid">
    			<IMG id="vrmid" SRC="images/about_05.gif" ALT=""></TD>
    		<TD id="hrright">
    			<IMG id="hrright" SRC="images/about_06.gif" ALT=""></TD>
    	</TR>
    	<TR height=34 style="max-height:34;">
    		<TD id="navbar" bgcolor=yellow valign=top>
    			<A HREF="index.html">
    			<IMG id="navbar" SRC="images/Home.gif" HEIGHT=34 ALT=""></A>
    		</TD>
    		<TD id="vrbottom" ROWSPAN=5 bgcolor=pink valign=top>
    			<IMG id="vrbottom" SRC="images/about_08.gif" ALT="">
    		</TD>
    		<TD id="body" ROWSPAN=6 bgcolor=red>
    			body
    		</TD>
    	</TR>
    	<TR valign=top height=31 style="max-height:34;">
    		<TD id="navbar" bgcolor=green>
    			<A HREF="about.html">
    			<IMG id="navbar" SRC="images/About.gif" HEIGHT=31 ALT=""></A>
    		</TD>
    	</TR>
    	<TR valign=top height=37 style="max-height:34;">
    		<TD id="navbar" bgcolor=orange>
    			<A HREF="students.html">
    			<IMG id="navbar" SRC="images/Students.gif" HEIGHT=37 ALT=""></A>
    		</TD>
    	</TR>
    	<TR valign=top height=38 style="max-height:34;">
    		<TD id="navbar" bgcolor=brown>
    			<A HREF="pics.html">
    			<IMG id="navbar" SRC="images/Pictures.gif" HEIGHT=38 ALT=""></A>
    		</TD>
    	</TR>	
    	<TR valign=top height=15>
    		<TD id="navbar" bgcolor=blue>
    			<IMG id="navbar" SRC="images/about_13.gif" HEIGHT=15 ALT="">
    		</TD>
    	</TR>
    	<TR valign=top>
    		<TD id="bottombar" colspan=2 bgcolor=purple>
    			<IMG id="bottombar" SRC="images/about_13.gif" height=300 ALT="">
    		</TD>
    	</TR>
    </table>
    
    </div> 
    
      </body>
      </html>
    Last edited by MKashlev; August 5th, 2003 at 04:52 PM.

IMN logo majestic logo threadwatch logo seochat tools logo