SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    List display differences in FF & IE6

    The unordered list in the left hand column is displaying as I want it to in FF (with no spacing between the li elements), but in IE6 there is padding/margin between them which I want to get rid of.

    Could someone please point me in the right direction.

    Thanks

    An example can be seen here:http://www.littlegalleryonthefarm.co.../template.html

    The HTML for the "leftcol" div is below:
    <div class="navigation" id="leftcol" > <ul>
    <li class="gallery"><a href="http://www.littlegalleryonthefarm/index.shtml" class="biglink">The Gallery</a></li>
    <li class="paint"><a href="http://www.littlegalleryonthefarm/paintings.shtml" class="biglink">Paintings</a></li>
    <li class="photo"><a href="http://www.www.littlegalleryonthefarm/photos.shtml" class="biglink">Photographs</a></li>
    <li class="news"><a href="http://www.www.littlegalleryonthefarm/news.shtml" class="biglink">News</a></li>
    <li class="visit"><a href="http://www.www.littlegalleryonthefarm/visit.shtml" class="biglink">Visit Us</a></li>
    </ul>
    <p>Mail order available. Credit ard payments accepted. Please call within
    opening hours, or <a href="mailto: info@littlegalleryonthegreen.co.uk">email</a> out
    of hours for details.</p>
    <p class="cow"><img src="images/cowhead2.jpg" alt="" width="106" height="80" /></p>
    </div>

    And the CSS here:
    .navigation ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    }

    .navigation li {
    margin: 0px;
    padding: 0;
    }

    .navigation li a:link, .navigation li a:visited {
    margin: 0px;
    padding: 5px;
    padding-right: 5px;
    text-decoration: none;
    font-size: 80%;
    font-weight: bold;
    color: #333333;
    display: block;
    }

    .navigation li a:hover {
    color: #FFFFFF;
    background: #00CC66;

    }

    .biglink {
    position: relative ; padding: 0.25em 0.15em 0.35em; z-index: 1;
    }

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's probably a hasLayout issue. Try setting a height (any height) for IE6 and, if necessary, a min-height for IE7:
    Code:
    .navigation li a:link, .navigation li a:visited {
    margin: 0px;
    padding: 5px;
    padding-right: 5px;
    text-decoration: none;
    font-size: 80&#37;;
    font-weight: bold;
    color: #333333;
    display: block;
    min-height:1px;
    }
    
    * html .navigation li a:link, * html .navigation li a:visited {
      height: 1px;
    }
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That worked a treat!

    Many thanks


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
  •