can't get ul list on bottom of table cell

#1

Hi people,
I've been trying to get the text of a menu list to align at the bottom of a
table cell. Can't get to work with html or css and html. Menu should be
lined up with bottom right of logo. But the text always comes out higher up,
in Firefox and IE6. (Borders turned on to see while developing.) TIA

(other style declarations)
#topnav{
text-align: left;
line-height:1.5em;
margin-bottom:0;
margin-top:0;
vertical-align: text-bottom;
}

li.inline {
list-style-type: none;
padding-right:1.2em;
display:inline;
padding-left:0.1em;
margin-left:0;
margin-bottom:0;
margin-top:0;
}

<body>
<table border="1" width="700px" align="center" cellspacing="0">

<! logo cell>
<tr><td width="81" rowspan="2"><img src="images/logo2.png" alt="Logo"
width="81" height="106" /></td>

< ! blank spaces aboive menu>
<td width="69" height="88"> </td><td width="536"> </td>

<! top menu cell- here is the problem area>
<tr>
<td height="22" colspan="2" valign="bottom">
<ul>
<li class="inline"><a href="const.htm"
target="_blank">Advanced Materials</a></li>
<li class="inline"><a href="const.htm" target="_blank">Ballistics
Control</a></li>
<li class="inline"><a href="const.htm"
target="_blank">Design</a></li>
<li class="inline"><a href="const.htm" target="_blank">Sports
Technology</a></li>
</ul></td>

<! other stuff not implemented yet.>
<tr><td height="22" colspan="3">hr</td></tr>
<tr><td height="22" colspan="2">iframe</td><td>cbox</td></tr>

<tr><td height="22" colspan="3">hr</td></tr>
<tr><td height="22" colspan="3">bottom menu</td></tr>

<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
--

Patrick Sullivan, AA-BA, BA-IT

#2

Patrick Sullivan <psully99 (AT) bellsouth (DOT) net> scripsit:

Quote:

I've been trying to get the text of a menu list to align at the
bottom of a table cell.

You should have posted the URL of your best effort. Don't stop thinking
about the matter before you realize why. Hint: try copying the fragment you
posted and turning it into page that can be tested. Notice in particular
what happens to the image and to the quasicomments.

Quote:

table border="1" width="700px" align="center" cellspacing="0"

You should really design the page from scratch. Fixed-width layout tables
are a complicated way of creating problems that can only be solved by a
rewrite of the page.

Quote:

td height="22" colspan="2" valign="bottom"
ul
- -
/ul></td

On the very technical side, a <ul> element typically have default margins,
or at least a default bottom margin, and to remove them you would use
ul { margin: 0; }

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

#3

Thank you Jukka,

I did not have the page uploaded to a URL, there's been so many versions
that I am sick of doing that unless I think it's ready for production. Last
effort was ok but I did not test in FireFox and did not think the client
would even know what Firefox was. So boxes came out different sizes when he
accidentally saw it with FF.

Now, this page was from scratch, laid out on paper first, but then I used
dreamweaver on it, that was probably a mistake. The ul {margin:0} worked
great, thank you. I guess I need to rewrite it again, using more columns now
(by hand, Dreamweaver always seems to add more stuff than necessary).
<sigh>...

BTW, I originally tried to get this design working with pure css, but was
plagued with columns and menus bouncing around when the page was resized, so
I am doing layout with a table now, yep.
--

Patrick Sullivan, AA-BA, BA-IT

"Jukka K. Korpela" <jkorpela (AT) cs (DOT) tut.fi> wrote

Quote:

Patrick Sullivan <psully99 (AT) bellsouth (DOT) net> scripsit:

I've been trying to get the text of a menu list to align at the
bottom of a table cell.

You should have posted the URL of your best effort. Don't stop thinking
about the matter before you realize why. Hint: try copying the fragment
you
posted and turning it into page that can be tested. Notice in particular
what happens to the image and to the quasicomments.

table border="1" width="700px" align="center" cellspacing="0"

You should really design the page from scratch. Fixed-width layout tables
are a complicated way of creating problems that can only be solved by a
rewrite of the page.

td height="22" colspan="2" valign="bottom"
ul
- -
/ul></td

On the very technical side, a <ul> element typically have default margins,
or at least a default bottom margin, and to remove them you would use
ul { margin: 0; }

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

can't get ul list on bottom of table cell

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)

can't get ul list on bottom of table cell - 09-09-2006 , 01:01 AM

Re: can't get ul list on bottom of table cell - 09-09-2006 , 02:40 AM

Re: can't get ul list on bottom of table cell - 09-09-2006 , 01:03 PM