...

View Full Version : Simple Table Issue



mgs5053
02-20-2009, 02:31 AM
I want the table in the following link to have the bullets right up below the Drink Specials tab... I only did it on Monday just as a test to see if I could do it. I was looking all last night but couldn't find the code to fix it. I know the markup isn't perfect, a friend gave me the code and ask me to look at it, I didn't feel like going through and fixing errors. I just want to know if there is a way so there is no space when the list starts.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Not Important</title>
</head>

<body>

<table class="one" border="1" cellpadding="10px" width="800px">
<tr>
<td width="125px"><big><center><i>Monday</i></center></big>
<p><b>Entertainment:</b> 80's Night with DJ Remedy! 10pm-close</p>
<p><b>Drink Specials:</b> <ul style=margin-top:0; margin-bottom:0; list-style-type:disc; list-style-position:outside;><li><i>10pm-midnight</i></li><li>25 cent Bud Light Drafts!</li> <li>$1 Jack and Colas!</li> <li>$1 Grape and Cherry Vodkas!</li></p></ul>
</td>
<td width="125px"><big><center><i>Tuesday</i></center></big>
<p><b>Entertainment:</b> 80's Night with DJ Remedy! 10pm-close</p>
<p><b>Drink Specials:</b> 25 cent Bud Light Drafts! $1 Jack and Colas! $1 Grape and Cherry Vodkas! 10pm-midnight</p>
</td>
<td width="125px"><big><center><i>Wednesday</i></center></big>
<p><b>Happy Hour</b> - Half Priced Drinks! 10pm-midnight</p>
<p><b>Drink Specials:</b> $2 Hoegaarden Drafts! 10pm-midnight</p>
</td>
<td width="125px"><big><center><i>Thursday</i></center></big>
<p><b>Entertainment:</b> DJ Pete Butta! 10pm-midnight. DJ Killa Kaos! Midnight-close</p>
<p><b>Drink Specials:</b> $1 Captain and Colas! $1 Smirnoff and Cranberry! $1 Iced Teas! $1 Kamikaze Shots! $1 Coors Lite Drafts! 10pm-midnight</p>
</td>
<td width="125px"><big><center><i>Friday</i></center></big>
<p><b>Entertainment:</b> DJ Pete Butta! 10pm-midnight. DJ Killa Kaos! Midnight-close</p>
<p><b>Drink Specials:</b> $1 Captain and Colas! $1 Smirnoff and Cranberry! $1 Iced Teas! $1 Kamikaze Shots! $1 Miller Lite Drafts! 10pm-midnight</p>
</td>
<td width="125px"><big><center><i>Saturday</i></center></big>
<p><b>Entertainment:</b> 80's Night with DJ Remedy! 10pm-close</p>
<p><b>Drink Specials:</b> 25 cent Bud Light Drafts! $1 Jack and Colas! $1 Grape and Cherry Vodkas! 10pm-midnight</p>
</td>
</tr>
</table>

</body>
</html>

<style type="text/css">

table.one {
table-layout: fixed;
margin-left: auto;
margin-right: auto;
text-align: left;
}
table.one td {
vertical-align: top;
}

ul { text-indent:0px; padding: 8px; margin: 0px; }
li { margin-top:0px; }
</style>

Example: http://www.personal.psu.edu/mgs5053/lionsdentable.html

spetsacdc
02-20-2009, 03:12 AM
Try this:

I removed the <p> before the ordered list because it had a padding. Also, the padding of the ul is now 0 8px 8px (0 padding on the top) . It was 8px (which gave it a top padding).


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Not Important</title>
</head>

<body>

<table class="one" border="1" cellpadding="10px" width="800px">
<tr>
<td width="125px"><big><center><i>Monday</i></center></big>
<p><b>Entertainment:</b> 80's Night with DJ Remedy! 10pm-close</p>
<b>Drink Specials:</b>
<ul style="margin-top:0px; margin-bottom:0px; list-style-type:disc; list-style-position:outside;">
<li>
<i>10pm-midnight</i>
</li>
<li>25 cent Bud Light Drafts!</li>
<li>$1 Jack and Colas!</li>
<li>$1 Grape and Cherry Vodkas!</li>
</ul>
</td>
<td width="125px"><big><center><i>Tuesday</i></center></big>
<p><b>Entertainment:</b> 80's Night with DJ Remedy! 10pm-close</p>
<p><b>Drink Specials:</b> 25 cent Bud Light Drafts! $1 Jack and Colas! $1 Grape and Cherry Vodkas! 10pm-midnight</p>
</td>
<td width="125px"><big><center><i>Wednesday</i></center></big>
<p><b>Happy Hour</b> - Half Priced Drinks! 10pm-midnight</p>
<p><b>Drink Specials:</b> $2 Hoegaarden Drafts! 10pm-midnight</p>
</td>
<td width="125px"><big><center><i>Thursday</i></center></big>
<p><b>Entertainment:</b> DJ Pete Butta! 10pm-midnight. DJ Killa Kaos! Midnight-close</p>
<p><b>Drink Specials:</b> $1 Captain and Colas! $1 Smirnoff and Cranberry! $1 Iced Teas! $1 Kamikaze Shots! $1 Coors Lite Drafts! 10pm-midnight</p>
</td>
<td width="125px"><big><center><i>Friday</i></center></big>
<p><b>Entertainment:</b> DJ Pete Butta! 10pm-midnight. DJ Killa Kaos! Midnight-close</p>
<p><b>Drink Specials:</b> $1 Captain and Colas! $1 Smirnoff and Cranberry! $1 Iced Teas! $1 Kamikaze Shots! $1 Miller Lite Drafts! 10pm-midnight</p>
</td>
<td width="125px"><big><center><i>Saturday</i></center></big>
<p><b>Entertainment:</b> 80's Night with DJ Remedy! 10pm-close</p>
<p><b>Drink Specials:</b> 25 cent Bud Light Drafts! $1 Jack and Colas! $1 Grape and Cherry Vodkas! 10pm-midnight</p>
</td>
</tr>
</table>

</body>
</html>

<style type="text/css">

table.one {
table-layout: fixed;
margin-left: auto;
margin-right: auto;
text-align: left;
}
table.one td {
vertical-align: top;
}

ul { text-indent:0px; padding: 0 8px 8px; margin: 0px; }
li { margin-top:0px; }
</style>

marilynn.fowler
02-20-2009, 03:13 AM
This may work.


<p style="margin-bottom: 0; font-weight:bold;">Drink Specials:</p>
<ul style="margin-top: 0; padding-top: 0;>
<li>25 cent Bud Light Drafts!</li>
<li>$1 Jack and Colas!</li>
<li>$1 Grape and Cherry Vodkas!</li>
</ul>

<p>10pm-midnight</p>

mgs5053
02-20-2009, 03:59 AM
Thanks guys! I figured it out!

redspyder
02-20-2009, 04:03 AM
You'll get hammered for using tables. You friend didn't do you any favours, the style information goes in the head, there should not be anything after the /html tag.

All ul styles have been moved to the embedded css.
margin:0 auto; replaces both margin-left:auto and margin-right:auto; the 0 is 0px for top and bottom, auto is left and right margins.

Here's your code tidied up a bit with a load of errors corrected.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Not Important</title>
<style type="text/css">
table.one
{
table-layout: fixed;
margin:0 auto;
}
table.one td
{
vertical-align:top;
}
ul
{
padding:8px;
margin:0px;
list-style-type:disc;
list-style-position:outside;
}
li
{
margin-top:0px;
}
</style>
</head>
<body>
<table class="one" border="1" cellpadding="10" width="800">
<tr>
<td width="125">
<center><big><i>Monday</i></big></center>
<p><b>Entertainment:</b> 80's Night with DJ Remedy! 10pm-close</p>
<p><b>Drink Specials:</b></p>
<ul>
<li><i>10pm-midnight</i></li>
<li>25 cent Bud Light Drafts!</li>
<li>$1 Jack and Colas!</li>
<li>$1 Grape and Cherry Vodkas!</li>
</ul>
</td>
<td width="125">
<center><big><i>Tuesday</i></big></center>
<p><b>Entertainment:</b> 80's Night with DJ Remedy! 10pm-close</p>
<p><b>Drink Specials:</b> 25 cent Bud Light Drafts! $1 Jack and Colas! $1 Grape and Cherry Vodkas! 10pm-midnight</p>
</td>
<td width="125">
<center><big><i>Wednesday</i></big></center>
<p><b>Happy Hour</b> - Half Priced Drinks! 10pm-midnight</p>
<p><b>Drink Specials:</b> $2 Hoegaarden Drafts! 10pm-midnight</p>
</td>
<td width="125">
<center><big><i>Thursday</i></big></center>
<p><b>Entertainment:</b> DJ Pete Butta! 10pm-midnight. DJ Killa Kaos! Midnight-close</p>
<p><b>Drink Specials:</b> $1 Captain and Colas! $1 Smirnoff and Cranberry! $1 Iced Teas! $1 Kamikaze Shots! $1 Coors Lite Drafts! 10pm-midnight</p>
</td>
<td width="125">
<center><big><i>Friday</i></big></center>
<p><b>Entertainment:</b> DJ Pete Butta! 10pm-midnight. DJ Killa Kaos! Midnight-close</p>
<p><b>Drink Specials:</b> $1 Captain and Colas! $1 Smirnoff and Cranberry! $1 Iced Teas! $1 Kamikaze Shots! $1 Miller Lite Drafts! 10pm-midnight</p>
</td>
<td width="125">
<center><big><i>Saturday</i></big></center>
<p><b>Entertainment:</b> 80's Night with DJ Remedy! 10pm-close</p>
<p><b>Drink Specials:</b> 25 cent Bud Light Drafts! $1 Jack and Colas! $1 Grape and Cherry Vodkas! 10pm-midnight</p>
</td>
</tr>
</table>
</body>
</html>




The following are un-necessary and have been removed:

Removed from table.one

text-align: left;

The default is left, so there's no reason to use this here.

Removed from ul

text-indent:0px;

Again the default is 0, so it's pointless. You may want to add it back if you need to indent by 1px or more.

mgs5053
02-20-2009, 04:05 AM
I understand there is no need for tables, however he is using a web builder to build his site up for now, and the only way to make sure something is aligned correctly in this builder is via a simple table. I tried the other way that I designed my site and all and nothing would work for me.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum