Re: CSS cell padding

J Williams wrote:

Can anyone explain why the following code results in different padding for
the 2 table cells? i.e. the Linked Item cell is higher than the Not Linked
cell and there is a gap between the edge of the cell and the start of the
text.

Because you told it to. ;-)

td.lnavhead a {
display: block;
padding: 4px;
text-decoration: none;
}


With 4px of padding (top, right, bottom, and left), it should be 8
pixels higher. Remove the padding and the size should match.


Gary

Thanks for your reply

Yes, if I remove the padding, both cells match. However I do want the
padding - the text in the cells is too close otherwise. The Linked Item
cell in my original code is exactly as I want it to be and I want the Not
Linked cell to look exactly the same, but without the hover effect because
the text isn't a link.

"Gary White" <reply (AT) newsgroup (DOT) please> wrote

J Williams wrote:

Can anyone explain why the following code results in different padding for
the 2 table cells? i.e. the Linked Item cell is higher than the Not
Linked
cell and there is a gap between the edge of the cell and the start of the
text.


Because you told it to. ;-)

td.lnavhead a {
display: block;
padding: 4px;
text-decoration: none;
}


With 4px of padding (top, right, bottom, and left), it should be 8
pixels higher. Remove the padding and the size should match.


Gary

.oO(J Williams)

Thanks, that's perfect .

OK.

I was missing several things, particularly the
span> tag and the * in the 2nd style.

That was just one idea how to do it:

The

td.lnavhead * {...}

is short for

td.lnavhead a, td.lnavhead span {...}

While it's not the same (a * matches all elements), it should work in
this case. And the span-element is just there to be able to apply a
padding to the non-linked text.

You should also consider to use an unordered list instead of a table for
the navigation. It keeps the code smaller and is more reasonable markup.

<ul id="nav">
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><span>no link</span></li>
</ul>

Micha

"Michael Fesser" <netizen (AT) gmx (DOT) net> wrote

You should also consider to use an unordered list instead of a table for
the navigation. It keeps the code smaller and is more reasonable markup.

ul id="nav"
li><a href="">link</a></li
li><a href="">link</a></li
li><span>no link</span></li
/ul

Using an ordered list instead of a table is often suggested, but I've always
wondered how to do it, whilst keeping the same positioning and formatting
(fore and background colours, mouse hover effect, 1 menu item per row, etc.)
that a table (or nested table) provides. I'd like to have a go at changing
my navigation menus to use unordered lists, whilst keeping the current look
and feel. Any pointers to HTML code or guides and tutorials on the web for
doing this would be much appreciated.

Thanks.

"J Williams" <ZjohnZwilliams_Zesquire (AT) Zhotmail (DOT) com> wrote

Using an ordered list instead of a table is often suggested, but I've
always wondered how to do it, whilst keeping the same positioning and
formatting (fore and background colours, mouse hover effect, 1 menu
item per row, etc.) that a table (or nested table) provides. I'd like
to have a go at changing my navigation menus to use unordered lists,
whilst keeping the current look and feel. Any pointers to HTML code
or guides and tutorials on the web for doing this would be much
appreciated.

Perhaps this tutorial will be helpful:
http://www.projectseven.com/tutorials/css/uberlinks/index.htm


--
Al Sparber - PVII
http://www.projectseven.com
DW Extensions - Menu Systems - Tutorials - CSS FastPacks
---------------------------------------------------------
Webdev Newsgroup: news://forums.projectseven.com/pviiwebdev/
CSS Newsgroup: news://forums.projectseven.com/css/
RSS/XML Feeds: http://www.projectseven.com/xml/

Thank you, Micha and Al.