how do I make a tiny space between each row?

Forum Moderators: open

Message Too Old, No Replies

how do I make a tiny space between each row?

jackdack

10:45 pm on Oct 13, 2005 (gmt 0)

My left column navigation menu needs better spacing between each line. If I use a <br> between each entry the spacing is too large. If I put each entry in a table cell the spacing between each line entry is again too large.

Some entries in the menu span two lines.

I am using line height spacing but I haven't been able to make a small gap between each entry.

There must be a way to do this - please tell me how!

thanks

Robin_reala

10:53 pm on Oct 13, 2005 (gmt 0)

Use a list, and put a small margin on each list item using CSS. E.g.:

li { list-style-type: none; margin-bottom: 5px; }

Sportscapper Island

8:46 pm on Oct 18, 2005 (gmt 0)

Add a higher cellspacing value to the table. Thats what I do

jackdack

2:05 am on Oct 19, 2005 (gmt 0)

thansks for the repsonses.

the list adds bullets & indent which I don't want (but good idea)

I gather the table cell height is not supported by a lot of browsers - perhaps someone can confirm that?

I've currently added 1x1px image which works great for IE, spacing looks good, but it's ugly in FireFOx as it shows extra line which is too big.

Gene_B

3:16 am on Oct 19, 2005 (gmt 0)

jackdack,

Here is a bit of what I use on our church website, just enough to give you the idea. The nav links are in boxes down the left side, some have 2 lines of text in them. Margin sets the space above and below the box, padding the space in the box, border color makes it look like a button. The nav link boxes float against the right of the td, against a border image in the second td.

<STYLE TYPE="text/css">
.navclass A {
float:right;
height:auto;
width:112px;
margin-top:1px;
margin-bottom:1px;
border:1px solid;
border-color: #8888aa #222222 #222222 #8888aa;
font-weight:bold;
text-decoration: none;
padding-top:2px;padding-bottom:2px;
}

.navclass A:link {..text size, color, background color..etc...
}

.navclass A:hover {... change text and background color on hover....
}

.....etc....
</style>

<body>

<td width="30" valign="top" background="borderimage.jpg"> </td>

<td> all the page stuff here....
</td>
</tr>
</table>

MatthewHSE

4:24 pm on Oct 25, 2005 (gmt 0)

the list adds bullets & indent which I don't want (but good idea)

Use CSS to remove the bullets and indents:

ul, li {
list-style-type: none;
margin: 0;
padding: 0;
}

Lists are really the "most correct" way to markup most navigation systems. After all, most navigation systems are simply lists of links. Therefore, an unordered list is normally the best option, semantically-speaking.

g1smd

1:07 pm on Oct 28, 2005 (gmt 0)

Use a list and play with the margins, borders, and padding in the CSS in an external stylesheet file.

tata668

8:45 pm on Oct 28, 2005 (gmt 0)

Maybe it's not the nicest way to do it but here's what I use, when playing with tables:

(with X time the "<br />" tag)

realHan1

5:19 pm on Nov 1, 2005 (gmt 0)

I just use  

Han.

g1smd

8:05 pm on Nov 1, 2005 (gmt 0)

If you swap your document structure away from <br> tags, and usage of   and spacer GIFs, into semantic markup using headings, paragraphs, lists, tables, and forms, you will find it easier to style them using an external CSS file.

Banish all the <font> tags from your page to make the most lightweight of HTML markup, markup that will work in the widest array of browsers, be easier to maintain, will be portable to future document standards, and easier for bots to spider.