Results 1 to 6 of 6

Thread: IE & FF OL & UL Spacing

  1. #1
    Join Date
    Jul 2005
    Posts
    223
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Question IE & FF OL & UL Spacing

    The page I will be referring to is japantown.awardspace.com/japantown.shtml

    In IE and FF, the tables on the page have a vertical space beneith the text in the tables, only at the bottom, not the top. How can I remove the vertical bottom spaces in the three tables? It has something to do with the OL and UL.

    Thanks
    My Web Site
    Japan Town

  2. #2
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    At a guess, remove the bottom margin and/or padding from the list and/or its items.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends français | entiendo español | tôi ít hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  3. #3
    Join Date
    Jul 2005
    Posts
    223
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Default

    What, how? Heres the code for one of the tables.

    Code:
    <table width="228" border="5" style="border:5px solid #d1b2ef;border-right-color:#390071;border-bottom-color:#390071;" align="center" cellpadding="0" cellspacing="0">
                  <tr> 
                    <td width="216" align="center"><font color="#CC0000" size="2">What's 
                        open?</font></td>
                  </tr>
                  <tr> 
                    <td align="left"><ul>
                        <li><font size="2"><a href="generalchat.php?frames">General 
                          Chat</a></font></li>
                        <li><font size="2"><a href="languagechat.php?frames">Language 
                          Chat</a></font></li>
                        <li><font size="2"><a href="/Board/index.php">Message Board</a></font></li>
                        <li><font size="2"><a href="interestingfacts.shtml">Interesting 
                          Facts</a></font></li>
                        <li><font size="2"><a href="emoticons.shtml">Emoticons</a></font></li>
                        <li><font size="2"><a href="news.shtml">News</a></font></li>
                        <li><a href="staff.shtml"><font size="2">Staff</font></a></li>
                      </ul></td>
                  </tr>
                  <tr> 
                    <td align="center" valign="top"><font color="#CC0000" size="2">Updates 
                        coming soon!!</font></td>
                  </tr>
                </table>
    My Web Site
    Japan Town

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Add this rule to your style section:

    Code:
    ul, ol {
    margin-bottom:0;
    }
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jul 2005
    Posts
    223
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Default

    I put the code in it worked, but then after I put the code into the other two tables it did not work.

    So I took the code out of the other two tables and then the first table didn't even work.

    When I say the tables didn't work I mean the bottom spacing was still there.

    Here is the style section code of the first table.

    Code:
     style="border:5px solid #d1b2ef;border-right-color:#390071;border-bottom-color:#390071; ul, ol {margin-bottom:0;}"
    My Web Site
    Japan Town

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I didn't mean to use that inline. Your page has two style sections, the second one looks like so:

    Code:
    <style type="text/css">
    
    #dropmenudiv{
    position:absolute;
    border:1px solid black;
    border-bottom-width: 0;
    font:normal 13px Times New Roman;
    line-height:17px;
    z-index:100;
    }
    
    #dropmenudiv a, span{
    color: black;
    width: 159;
    display: block;
    text-indent: 2px;
    border-bottom: 1px solid black;
    padding: 1px 0;
    text-decoration: none;
    font-weight: none;
    }
    
    #dropmenudiv a:hover{ /*hover background color*/
    background-color: #3399FF;
    color: white;
    }
    
    </style>
    To be more clear about what I was suggesting, find the above section of your code and make it look like so:

    Code:
    <style type="text/css">
    
    #dropmenudiv{
    position:absolute;
    border:1px solid black;
    border-bottom-width: 0;
    font:normal 13px Times New Roman;
    line-height:17px;
    z-index:100;
    }
    
    #dropmenudiv a, span{
    color: black;
    width: 159;
    display: block;
    text-indent: 2px;
    border-bottom: 1px solid black;
    padding: 1px 0;
    text-decoration: none;
    font-weight: none;
    }
    
    #dropmenudiv a:hover{ /*hover background color*/
    background-color: #3399FF;
    color: white;
    }
    
    ul, ol {
    margin-bottom:0;
    }
    
    </style>
    As long as you have no other ul or ol elements on the page that this could cause a problem with, this will be the easiest way to get them all at one shot. I tried this out locally and it seemed fine. If you have to add the style inline, it must be done to each of the ul and ol elements individually, example using a ul:

    HTML Code:
    <ul style="margin-bottom:0;">
    Do it one way or the other, in the style section or inline, do not do it in both places and do not do what you did to the table's inline style. That is non-standard and I am surprised that it worked at all.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

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