Jump to content

problem with space between cell of a table


vit320

Recommended Posts

hello i use this surce inside a page and it work well..

<table border="0" cellpadding="0" cellspacing="0" width="183">
<tr>
<td rowspan="1" colspan="2" width="14" height="60">
    <img name="box0" src="http://www.pcutile.it/images/box_1x1.jpg" width="14" height="60" border="0" alt="" /></td>
<td rowspan="1" colspan="1" width="152" height="60">
    <img name="box1" src="http://www.pcutile.it/images/box_1x2.jpg" width="152" height="60" border="0" alt="" /></td>
<td rowspan="1" colspan="1" width="17" height="60">
    <img name="box2" src="http://www.pcutile.it/images/box_1x3.jpg" width="17" height="60" border="0" alt="" /></td>
</tr>

<tr>
<td rowspan="1" colspan="2" width="14" height="90">
    <img name="box3" src="http://www.pcutile.it/images/box_2x1.jpg" width="14" height="90" border="0" alt="" /></td>
<td rowspan="1" colspan="1" width="152" height="90">
    <img name="box4" src="http://www.pcutile.it/images/box_2x2.jpg" width="152" height="90" border="0" alt="" /></td>
<td rowspan="1" colspan="1" width="17" height="90">
    <img name="box5" src="http://www.pcutile.it/images/box_2x3.jpg" width="17" height="90" border="0" alt="" /></td>
</tr>

<tr>
<td rowspan="1" colspan="2" width="14" height="6">
    <img name="box6" src="http://www.pcutile.it/images/box_3x1.jpg" width="14" height="6" border="0" alt="" /></td>
<td rowspan="1" colspan="1" width="152" height="6">
    <img name="box7" src="http://www.pcutile.it/images/box_3x2.jpg" width="152" height="6" border="0" alt="" /></td>
<td rowspan="1" colspan="1" width="17" height="6">
    <img name="box8" src="http://www.pcutile.it/images/box_3x3.jpg" width="17" height="6" border="0" alt="" /></td>
</tr>

<tr>
<td rowspan="1" colspan="1" width="13" height="58">
    <img name="box9" src="http://www.pcutile.it/images/box_4x1.jpg" width="13" height="58" border="0" alt="" /></td>
<td rowspan="1" colspan="2" width="153" height="58">
    <img name="box10" src="http://www.pcutile.it/images/box_4x2.jpg" width="153" height="58" border="0" alt="" /></td>
<td rowspan="1" colspan="1" width="17" height="58">
    <img name="box11" src="http://www.pcutile.it/images/box_4x3.jpg" width="17" height="58" border="0" alt="" /></td>
</tr>

<tr>
<td width="13" height="1">
    <img name="box11" src="http://www.pcutile.it/images/blank.gif" width="13" height="1" border="0"></td>
<td width="1" height="1">
    <img name="box12" src="http://www.pcutile.it/images/blank.gif" width="1" height="1" border="0"></td>
<td width="152" height="1">
    <img name="box13" src="http://www.pcutile.it/images/blank.gif" width="152" height="1" border="0"></td>
<td width="17" height="1">
    <img name="box14" src="http://www.pcutile.it/images/blank.gif" width="17" height="1" border="0"></td>
</tr>
</table>

 

it works well likwe an html page but when i use inside kurouto skin it is showed wrong..like the posted image. infact looks to strabge opacity between the image that compose the table.now anyone know how can solve it? i have used several type of code like css that in this example are not present, but they don't work hovewer...

Link to comment
Share on other sites

The parameters cellpadding="0" and cellspacing="0" is good. But be aware that everything between the <td></td> tags gets shown in the cell.

 

That is, the whitespace (a newline in this case) is getting in the cell along with the image.

 

So, try:

<td width="17" height="1"><img name="box14" ...snipped... border="0"></td>

 

The above statement has nothing (not even a newline character) but the image between the tags.

Link to comment
Share on other sites

you mean write all <td>.<img...></td> in on rows or line it's true? well look this please..

 

<table style="width=183; margin: 0; padding: 0; border: 0; border-collapse: collapse;" >
<tr>
<td rowspan="1" colspan="2" style="width=14; height=60; img { border: 0; }"><img src="http://www.pcutile.it/images/box_1x1.jpg" width="14" height="60" alt="" /></td>
<td width="154" colspan="1" rowspan="1" style="width=152; height=60; img { border: 0; }"><img src="http://www.pcutile.it/images/box_1x2.jpg" width="152" height="60" alt="" /></td>
<td width="17" colspan="1" rowspan="1" style="width=17; height=60; img { border: 0; }"><img  src="http://www.pcutile.it/images/box_1x3.jpg" width="17" height="60" alt="" /></td>
</tr>

<tr>
<td rowspan="1" colspan="2" style="width=14; height=90; img { border: 0; } vertical-align=top; background-image:url(http://www.pcutile.it/images/box_2x1.jpg); background-position:top 0px; background-repeat:repeat-y;"></td>
<td colspan="1" rowspan="1" valign="top" style="width=152; height=90; background-color: #feed01; img { border: 0; }" > <div>
  <h2>{$NAVIGATION_TREE}</h2>
</div>
</td>
<td rowspan="1" colspan="1" style="width=17; height=90; img { border: 0; } vertical-align=top; background-image:url(http://www.pcutile.it/images/box_2x3.jpg); background-position:top 0px; background-repeat:repeat-y;"></td>
</tr>

<tr>
<td rowspan="1" colspan="2" style="width=14; height=6; img { border: 0; }"><img src="http://www.pcutile.it/images/box_3x1.jpg" width="14" height="6" alt="" /></td>
<td rowspan="1" colspan="1" style="width=152; height=6; img { border: 0; }"><img src="http://www.pcutile.it/images/box_3x2.jpg" width="152" height="6" alt="" /></td>
<td rowspan="1" colspan="1" style="width=17; height=6; img { border: 0; }"><img src="http://www.pcutile.it/images/box_3x3.jpg" width="17" height="6" alt="" /></td>
</tr>

<tr>
<td width="13" colspan="1" rowspan="1" style="width=13; height=58; img { border: 0; }"><img src="http://www.pcutile.it/images/box_4x1.jpg" width="13" height="58" alt="" /></td>
<td rowspan="1" colspan="2" style="width=153; height=58; img { border: 0; }"><img src="http://www.pcutile.it/images/box_4x2.jpg" width="153" height="58" alt="" /></td>
<td rowspan="1" colspan="1" style="width=17; height=58; img { border: 0; }"><img src="http://www.pcutile.it/images/box_4x3.jpg" width="17" height="58" alt="" /></td>
</tr>

<tr>
<td style="width=13; height=1; img { border: 0; }"><img src="http://www.pcutile.it/images/blank.gif" width="13" height="1" alt=""></td>
<td width="1" style="width=1; height=1; img { border: 0; }"><img  src="http://www.pcutile.it/images/blank.gif" width="1" height="1" alt=""></td>
<td style="width=152; height=1; img { border: 0; }"><img src="http://www.pcutile.it/images/blank.gif" width="152" height="1" alt=""></td>
<td style="width=17; height=1; img { border: 0; }"><img src="http://www.pcutile.it/images/blank.gif" width="17" height="1" alt=""></td>
</tr>
</table>

 

know i have 3 space.. <td> was writed on the same line of code but in 3 parts i have hovewer a space between cell.

code was suggest from validator...help me if possibles. thanks.

Link to comment
Share on other sites

There are no spaces, that's good.

 

But this is bad:

<td rowspan="1" colspan="2" style="width=14; height=6; img { border: 0; }">

 

<td rowspan="1" colspan="2" style="width:14px; height:6px; padding:0;"><img src="http...jpg" style="width:14px; height:6px; border:0;" alt="" /></td>

Link to comment
Share on other sites

Ok :-) first of all i say thanks for your help.

this is new versione , i made it followoing your suggestions

 

<table style="width:183px; margin:0; padding:0; border:0; border-collapse: collapse;" >
<tr>
<td rowspan="1" colspan="2" style="width:14px; height:60px; padding:0;"><img src="http://www.pcutile.it/images/box_1x1.jpg" style="width:14px; height:60px; border:0;" alt="" /></td>
<td colspan="1" rowspan="1" style="width:152px; height:60px; padding:0;"><img src="http://www.pcutile.it/images/box_1x2.jpg" style="width:152px; height:60px; border:0;" alt="" /></td>
<td colspan="1" rowspan="1" style="width:17px; height:60px; padding:0; "><img src="http://www.pcutile.it/images/box_1x3.jpg" style="width=17px; height:60px; border:0;" alt="" /></td>
</tr>

<tr>
<td rowspan="1" colspan="2" style="width:14px; height:90px; padding:0; vertical-align:top; background-image:url(http://www.pcutile.it/images/box_2x1.jpg); background-position:top 0px; background-repeat:repeat-y;"></td>
<td colspan="1" rowspan="1" style="width:152px; height:90px; vertical-align:top; background-color: #feed01; padding:0; " >
</td>
<td rowspan="1" colspan="1" style="width:17px; height:90px; padding:0; vertical-align:top; background-image:url(http://www.pcutile.it/images/box_2x3.jpg); background-position:top 0px; background-repeat:repeat-y;"></td>
</tr>

<tr>
<td rowspan="1" colspan="2" style="width:14px; height:6px; padding:0;"><img src="http://www.pcutile.it/images/box_3x1.jpg" style="width:14px; height:6px; border:0;" alt="" /></td>
<td rowspan="1" colspan="1" style="width:152px; height:6px; padding:0;"><img src="http://www.pcutile.it/images/box_3x2.jpg" style="width:152px; height:6px; border:0;" alt="" /></td>
<td rowspan="1" colspan="1" style="width:17px; height6px; padding:0;"><img src="http://www.pcutile.it/images/box_3x3.jpg" style="width:17px; height:6px; border:0;" alt="" /></td>
</tr>

<tr>
<td colspan="1" rowspan="1" style="width:13px; height:58px; padding:0;"><img src="http://www.pcutile.it/images/box_4x1.jpg" style="width:13px; height:58px border:0;" alt="" /></td>
<td rowspan="1" colspan="2" style="width:153px; height:58px; padding:0"><img src="http://www.pcutile.it/images/box_4x2.jpg" style="width:153px; height:58px border:0;" alt="" /></td>
<td rowspan="1" colspan="1" style="width:17px; height:58px; padding:0"><img src="http://www.pcutile.it/images/box_4x3.jpg" style="width:17px; height:58px; border:0;" alt="" /></td>
</tr>

<tr>
<td style="width:13px; height:1px; padding:0;"><img src="http://www.pcutile.it/images/blank.gif" style="width:13px; height:1; border:0;" alt=""></td>
<td style="width:1px; height:1px; padding:0;"><img src="http://www.pcutile.it/images/blank.gif" style="width:1px; height:1px; border:0;" alt=""></td>
<td style="width:152px; height:1px; padding:0;"><img src="http://www.pcutile.it/images/blank.gif" style="width:152px; height:1; border:0;" alt=""></td>
<td style="width:17px; height:1px; padding:0;"><img src="http://www.pcutile.it/images/blank.gif" style="width:17px; height:1px border:0;" alt=""></td>
</tr>
</table>

 

 

Know when i analyze source page into browser it show me the first line (<table ......>)

in red color.

but  if i use it how html code it show me correct table if i use it inside box.navigation.php it show always the same space between line. pheraps it is for error in first line of code? please help me. i leave open www.pcutile.it

Link to comment
Share on other sites

yes code works as html but don't  work inside KUROUTO SKIN how you can look in temporary site it's the same code but inside the template it make this strange effect. why? infact i have the code www.pcutile.it/test.html lloks well how you verify. but see in www.pcutile.it

Link to comment
Share on other sites

This for Bsmither..i will try to put all code in a line...

i see that when i insert my coode int editor for example to make home page content, editor seems put other code inside the part betweeen <td>...</td>, for example it insert &nbsp; and format my html in a different code with space tha i don't want..why this?

 

another..code make the same effect if i insert it in editor inside admin..so if i want make a table inside my content i can't? why this? code is only that and follow all requisite because it's is verified with validator and validator say it's ok..

Link to comment
Share on other sites

dirty butter... you be sure for me...i write software  since 1983 i know what is a text file!  Obvious i use notepad and i like it for typing source code. So i have tried several change but nothing, it's at this time if i use simple html without skin it work..inside skyn (any) it make this effect. I read and re-read css file and try to make some modication but NOTHING :-(. thanks hovewer for your help but I had never thought that i can't insert a simple table inside my document in cubecart (because i have used procedure of cart modifing a home page as document and copy past my code in fsck editor, but result is the same).

Where is the problem?

Link to comment
Share on other sites

EXTRA NOTE: sure i not modified any menu settings in all common.css and other problem is showed in CONTENT area always at the same effect.

 

this is what you ask

 

#menu {
    list-style: none outside !important;
    margin: 0px;
    margin-top: 1px;
}
#menu ul {
    display: none;
    list-style: none outside !important;
    padding-left: 7px;
}
#menu li {
    min-height: 20px;
    border-bottom: 1px dotted #959595;
}
#menu li > a {
    display: block;
    line-height: 20px;
    text-indent: 0px;
}
#menu > li > a {
    text-indent: 12px !important;
    height: 38px;
    line-height: 38px;
    font-weight: bold;
}
#menu > li > a.menu_closed {
    background-image: url(../images/menu_top_closed.png);
}
#menu > li > a.menu_open {
    background-image: url(../images/menu_top_open.png) !important;
}
#menu > li > a.menu_closed, #menu > li > a.menu_open {
    background: no-repeat 0px;
}
#menu > li > ul {
    padding-left: 15px;
}
#menu li:first-child {
    border-top: none;
}
#menu li:last-child {
    border-bottom: none;
}

Link to comment
Share on other sites

I can appreciate your frustration with this, and didn't mean to sound like I was disrespecting your coding skills. Your kurouto version of the site looks amazing! I was just hoping that, as a novice myself, I would think of something simple that deeper thinkers would overlook. I would love to have spotted something for you that would have fixed it.

 

The only thing that caught my eye in the #menu css was the height and line-height, although both have the same value. It doesn't make sense that it would be an issue, but thought I'd mention it.

 

#menu > li > a {
    text-indent: 12px !important;
    height: 38px;
    line-height: 38px;
    font-weight: bold;

Link to comment
Share on other sites

this menu voice is related to vanilla skin, but the problem is  in table, that is simple table inserted for example in content of page give same error..look at this time..it's a simple table that if i use it how .html works well but inside kurouto (or when it is parsed via cubecart) it is showed as is now!

http://www.pcutile.it/index.php

 

it is evident at this time that tables are cutted in rows!! why happen this?

 

this is inside common.css

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

Link to comment
Share on other sites

The likely difference between what DB put up and what is at pcutile is that there is no !DOCTYPE statement in the "blank.html" page -- even though there are also no <html> or <body> tags either.

 

Being a CubeCart skin that this table was added, there is the HTML5 protocols working. I think HTML5 will assume that images, being "in-line" elements, have a built-in edge to them. But declaring them as "block" elements, removes that edge.

 

Now, the mystery remains: why were there thicker gaps between some rows and thinner gaps between others?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...