Frame shows spaces between the table cells.

  • Thread starter Thread starter Cal Who
  • Start date Start date
C

Cal Who

I want to making a frame so I made a table:

..
<table>

<tr><td id="TL"></td><td id="T"></td><td id="TR"></td></tr>

<tr><td id="L"></td><td id="C"></td><td id="R"></td></tr>

<tr><td id="BL"></td><td id="B"></td><td id="BR"></td></tr>





</table>

and in my .css added things like that shown below.

Works OK except that the cells do not touch. There is a little space between
the images like there is a margin or padding.

Got any ides how to fix that?


Thanks
#BR

{

background:url("../MapBorderImages/BR.jpg") no-repeat scroll left top
transparent;

width:28px;

height:28px;

padding :0 ;

margin :0 ;


}

?

#B

{

background:url("../MapBorderImages/B.jpg") repeat scroll left top
transparent;

width:100px;

height:28px;

padding :0 ;

margin :0 ;


}
 
I want to making a frame so I made a table:

.
<table>

<tr><td id="TL"></td><td id="T"></td><td id="TR"></td></tr>

<tr><td id="L"></td><td id="C"></td><td id="R"></td></tr>

<tr><td id="BL"></td><td id="B"></td><td id="BR"></td></tr>

</table>

and in my .css added things like that shown below.

Works OK except that the cells do not touch. There is a little space between
the images like there is a margin or padding.

Got any ides how to fix that?

Thanks
#BR

{

background:url("../MapBorderImages/BR.jpg") no-repeat scroll left top
transparent;

width:28px;

height:28px;

padding :0 ;

margin :0 ;

}

?

#B

{

background:url("../MapBorderImages/B.jpg") repeat scroll left top
transparent;

width:100px;

height:28px;

padding :0 ;

margin :0 ;



}
Click to expand...

<table cellpadding="0" cellspacing="0" border="0">
 
I want to making a frame so I made a table:

.
<table>

<tr><td id="TL"></td><td id="T"></td><td id="TR"></td></tr>

<tr><td id="L"></td><td id="C"></td><td id="R"></td></tr>

<tr><td id="BL"></td><td id="B"></td><td id="BR"></td></tr>

</table>

and in my .css added things like that shown below.

Works OK except that the cells do not touch. There is a little space
between
the images like there is a margin or padding.

Got any ides how to fix that?

Thanks
#BR

{

background:url("../MapBorderImages/BR.jpg") no-repeat scroll left top
transparent;

width:28px;

height:28px;

padding :0 ;

margin :0 ;

}

?

#B

{

background:url("../MapBorderImages/B.jpg") repeat scroll left top
transparent;

width:100px;

height:28px;

padding :0 ;

margin :0 ;



}
Click to expand...

<table cellpadding="0" cellspacing="0" border="0">


That did it. I tried putting it into my .css file but I was told they were
unknown property names. Comment??

But it works great in the markup.

Thanks
 
<table cellpadding="0" cellspacing="0" border="0">

That did it. I tried putting it into my .css file but I was told they were
unknown property names. Comment??

But it works great in the markup.

Thanks
Click to expand...

Well, there isn't actually a CSS properties for cellpadding or
cellspacing, but there is the CSS padding property which allows you to
achieve the same effect.

table {
border-collapse: collapse;
}
table td,
table th {
padding: 0;
}

but this may not work in the same way in all browsers and I would
recommend to use the cellspacing/cellpadding attributes.
 
<table cellpadding="0" cellspacing="0" border="0">

That did it. I tried putting it into my .css file but I was told they were
unknown property names. Comment??

But it works great in the markup.

Thanks
Click to expand...

Well, there isn't actually a CSS properties for cellpadding or
cellspacing, but there is the CSS padding property which allows you to
achieve the same effect.

table {
border-collapse: collapse;
}
table td,
table th {
padding: 0;
}

but this may not work in the same way in all browsers and I would
recommend to use the cellspacing/cellpadding attributes.


Thanks a lot
 
Back
Top