By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
445,876 Members | 1,206 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 445,876 IT Pros & Developers. It's quick & easy.

can't get ul list on bottom of table cell

P: n/a
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">&nbsp;</td><td width="536">&nbsp;</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>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</body>
</html>
--

Patrick Sullivan, AA-BA, BA-IT

Sep 9 '06 #1
Share this Question
Share on Google+
2 Replies


P: n/a
Patrick Sullivan <ps******@bellsouth.netscripsit:
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 <ulelement 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/

Sep 9 '06 #2

P: n/a
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" <jk******@cs.tut.fiwrote in message
news:kl*****************@reader1.news.jippii.net.. .
Patrick Sullivan <ps******@bellsouth.netscripsit:
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 <ulelement 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/
Sep 9 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.