Space in between table cells

[BobbaFet]

Hello all,

I have attached a picture to this post which displays my problem, my question is how can I get rid of those lines?

CSS bg-img + stuff I've tried to get rid of them:

/* the background-image is set for the table row </tr> */
#tr1
{
background-image:url(liteBG.png)
background-repeat:repeat;
}

#tr2
{
background-image:url(darkBG.png)
background-repeat:repeat;
}

/* stuff I tried to get rid of those ugly lines */
td, tr, table
{
border:0px;
border:none;
vertical-align:top;
border:collapse;
outline-width:0px;
outline-style:none;
margin:0px;
}

Nothing seems to work? Can I actually get rid of these or am I missing something?

BobbaFet

if not Programming = 'Severe Migraine' then
                       ShowMessage('Eureka!');

 

[BobbaFet]

Sorry guys, but I have solved the problem:

The answer was to add to the table cells the CSS float:left; property and the verticle lines disappeared. I'm keeping the horizontal ones as it turns out that looks quite good actually! Thanks for taking the time to read my question though!

BobbaFet

if not Programming = 'Severe Migraine' then
                       ShowMessage('Eureka!');

 

[BobbaFet]

Ok, apperantly I am not quite there yet as the float:left; thing doesn't seem to work in Internet Explorer.

I figured that as Internet Explorer supports this CSS tag, it would also work there. Stupid me... So it obviously doesn't. I have hardcoded a clear:none; into my CSS file but it didn't do anything (which was to be expected as none is the default value).

My question now is, how can I make IE behave in the same way FF does?

Pic of what it should look like is below, above is a picture of FF before the fix. It looks the exact same as that in IE.

BobbaFet

if not Programming = 'Severe Migraine' then
                       ShowMessage('Eureka!');

 

[Mugiwara]

Do you have the HTML Code for this table?

 

[BobbaFet]

Yeah but I don't see how that is useful as I've made an effort to make the pages HTML 5.0 compatible. Therefore it is nothing but:

<div id="cultuur"><table>
<tr id="trBG1">
<td id="content"><a target="_blank" href="[URL unfurl="true"]http://www.trouw.nl/cultuur/theater/article3393117.ece/Van_iedere_Bekende_Nederlander_zijn_er_minstens_twee_.htm">Van[/URL] iedere Bekende Nederlander zijn er minstens twee</a></td>
<td id="content"><a target="_blank" href="[URL unfurl="true"]http://www.trouw.nl/cultuur/article3396484.ece/Marten_Toonder_deelt_zijn_levensverhaal.htm">Marten[/URL] Toonder deelt zijn levensverhaal</a></td>
<td id="content"><a target="_blank" href="[URL unfurl="true"]http://www.trouw.nl/cultuur/muziek/article3396424.ece/Jan_Smit_verzorgt_commentaar_songfestival.htm">Jan[/URL] Smit verzorgt commentaar songfestival</a></td>
<td id="content"><a target="_blank" href="[URL unfurl="true"]http://www.trouw.nl/cultuur/muziek/article3396320.ece/Waylon_en_Kane_naar_Indian_Summer_Festival.htm">Waylon[/URL] en Kane naar Indian Summer Festival</a></td>
</tr>
<tr id="trBG2">
<td id="content"><a target="_blank" href="[URL unfurl="true"]http://www.trouw.nl/cultuur/article3396004.ece/Veiling_tweede_deel_Stuyvesant-collectie.htm">Veiling[/URL] tweede deel Stuyvesant collectie</a></td>
<td id="content"><a target="_blank" href="[URL unfurl="true"]http://www.trouw.nl/cultuur/article3395473.ece/Monumentale_boerderij_in_Pieterburen_verwoest.htm">Monumentale[/URL] boerderij in Pieterburen verwoest</a></td>
<td id="content"><a target="_blank" href="[URL unfurl="true"]http://www.trouw.nl/cultuur/muziek/article3395304.ece/Gebroeders_Saunders_gehuldigd_in_Hoorn.htm">Gebroeders[/URL] Saunders gehuldigd in Hoorn</a></td>
<td id="content"><a target="_blank" href="[URL unfurl="true"]http://www.trouw.nl/cultuur/muziek/article3391873.ece/Adele_wordt_volwassen_.htm">Adele[/URL] wordt volwassen</a></td>
</tr>
</table></div>

All the table settings are done by CSS, which is posted above.

BobbaFet

if not Programming = 'Severe Migraine' then
                       ShowMessage('Eureka!');

 

[IPGuru]

google css border-spacing & padding
there should be enough there to get you started.


I do not Have A.D.D. im just easily, Hey look a Squirrel!

 

[vacunita]

I'd say cellspacing is the key. Set it 0, though you'll need to apply a border-bottom to the cells to get the horizontal lines back.

<table cellspacing=0>

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[feherke]

Hi

I would say, it is most probably because of the sloppy use of shorthand properties which are not magic.

For example the [tt]border[/tt] shorthand property not includes [tt]border-collapse[/tt], so [tt]border: collapse[/tt] is wrong. It must be written as [tt]border-collapse: collapse[/tt] .

Beside that, the [tt]border[/tt] shorthand property sets all included properties, even those unspecified. So [tt]border: 0px[/tt] followed by [tt]border: none[/tt] is equivalent of [tt]border: 0px [red]none[/red] [red]transparent[/red][/tt] followed by [tt]border: [red]0[/red] none [red]transparent[/red][/tt], where the second completely overwrites the first.


Feherke.

http://free.rootshell.be/~feherke/

 

[LarrySteele]

I use the CSS Reference on W3Schools when I'm building my style sheets. Helps me keep the property names straight.

Hope that helps,
Larry

 

[BobbaFet]

Thanks Larry, that is exactly what I am using It is a good site I think

BobbaFet

if not Programming = 'Severe Migraine' then
                       ShowMessage('Eureka!');

 

[feherke]

Hi

I use the CSS Reference on W3Schools when I'm building my style sheets.

It is a good site I think

Others think it is not. See W3Fools for details.


Feherke.

http://free.rootshell.be/~feherke/

 

[BobbaFet]

Hmmmm, interesting for sure. I'll be sure to check out the sites that w3fools lists for referencing stuff. I had noticed a few of the mistakes the site talks about but as these are tutorials for beginners I figured this to be a "lies to children" sort of thing. You know, like when kids start out with high school physics the first lesson will not be about quantum chromodynamics but rather something that seems kind of like it but isn't factually true.

(For those who had physics in highschool but never afterwards: almost *EVERYTHING* you think you know about physics is wrong)

BobbaFet

if not Programming = 'Severe Migraine' then
                       ShowMessage('Eureka!');