Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Feb 2009
    Posts
    13
    Thanks
    1
    Thanked 1 Time in 1 Post

    Simple Table Issue

    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:
    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

  • #2
    New Coder
    Join Date
    Mar 2008
    Posts
    92
    Thanks
    19
    Thanked 0 Times in 0 Posts
    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).

    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>
            <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>

  • #3
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts
    This may work.
    Code:
    <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>
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx

  • #4
    New Coder
    Join Date
    Feb 2009
    Posts
    13
    Thanks
    1
    Thanked 1 Time in 1 Post
    Thanks guys! I figured it out!

  • #5
    New Coder
    Join Date
    Jan 2009
    Location
    Cornwall - UK
    Posts
    47
    Thanks
    0
    Thanked 9 Times in 9 Posts
    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.

    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>
        <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
    Code:
    text-align: left;
    The default is left, so there's no reason to use this here.

    Removed from ul
    Code:
    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.

  • #6
    New Coder
    Join Date
    Feb 2009
    Posts
    13
    Thanks
    1
    Thanked 1 Time in 1 Post
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •