SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist
    Join Date
    Jul 2002
    Location
    Italy
    Posts
    425
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS problem with IE8

    I have a menu based on liveMenu (Sourceforge) at www.hostpolicyresearch.com. It is fine in all browsers I have tried (even IE6 and 7) except IE8. In IE8 where I have a menu or submenu item on two lines sometimes I get no bottom border.

    Can anyone suggest what I need to do the get IE8 to fall into line, please? Thanks

    My CSS is:
    Code:
    #vertical-menu-container {
        float: left;
        width: 200px;
    }
    
    .lm-menu {
        list-style-type: none;
        padding-left: 0;
        margin-left: 0;
    }
    .lm-submenu {
        display: none;
        list-style-type: none;
        position: relative;
        margin: 0;
        padding-left: 0;
    }
    .lm-container {
        position: absolute;
        top: -1000px;
        overflow: hidden;
        visibility: hidden;
        margin: 0;
        padding: 0;
    }
    /* Konqueror and IE6 need this to slide horizontal submenus correctly: */
    .lm-submenu.lm-horizontal {
        float: left;
    }
    
    .lm-horizontal li {
        float: left;
    }
    
    .lm-menu li, 
    .lm-submenu li {
        /* Should be specified in order to prevent ie6 unpredictable behaviour */
        width: 80px;
        background: transparent url(bogus); /* url(bogus) is a fix for IE */
    }
    .lm-menu li a, 
    .lm-submenu li a {
        display: block;
    }
    
    .lm-menu li {
        background: #381f65;
        background: -moz-linear-gradient(top, #381f65 0%, #4e2b8c 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#381f65), color-stop(100%,#4e2b8c));
        background: -webkit-linear-gradient(top, #381f65 0%,#4e2b8c 100%);
        background: -o-linear-gradient(top, #381f65 0%,#4e2b8c 100%);
        background: -ms-linear-gradient(top, #381f65 0%,#4e2b8c 100%);
        background: linear-gradient(to bottom, #381f65 0%,#4e2b8c 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#381f65', endColorstr='#4e2b8c',GradientType=0 );
        padding: 1px;
        margin-bottom: 1px;
        width: 200px;
    }
    .lm-submenu li {
        background: #4e2b8c;
        background: -moz-linear-gradient(top, #4e2b8c 0%, #6437b3 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4e2b8c), color-stop(100%,#6437b3));
        background: -webkit-linear-gradient(top, #4e2b8c 0%,#6437b3 100%);
        background: -o-linear-gradient(top, #4e2b8c 0%,#6437b3 100%);
        background: -ms-linear-gradient(top, #4e2b8c 0%,#6437b3 100%);
        background: linear-gradient(to bottom, #4e2b8c 0%,#6437b3 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4e2b8c', endColorstr='#6437b3',GradientType=0 );
        padding: 1px;
        margin-bottom: 1px;
        width: 200px;
    }
    .lm-submenu.lm-horizontal li {
        width: 200px;
    }
    
    .lm-menu li a, 
    .lm-submenu li a {
        text-decoration: none;
        color: #fff;
        margin-right: 7px;
        padding: 5px;
    }
    A simplified menu is:
    HTML Code:
    <div id="vertical-menu-container">
      <ul id="liveMenu" class="lm-vertical lm-menu">
        <li><a href=".">home page</a></li>
        <li><a href="expertise-circles.php">expertise: subject circles...</a>
          <ul class="lm-vertical lm-right lm-submenu">
            <li><a href="expertise-apprenticeships-skills-competitions.php">apprenticeships/skills competitions</a></li>
            <li><a href="expertise-disadvantaged-groups-neets.php">disadvantaged groups/NEET</a></li>
            <li><a href="expertise-employment-and-labour-market.php">employment and labour market</a></li>
            <li><a href="expertise-further-education-and-skills.php">further education and skills</a></li>
          </ul>
        </li>
        <li><a href="clients.php">our clients</a></li>
        <li><a href="projects.php">projects and consultations...</a>
          <ul class="lm-vertical lm-right lm-submenu">
            <li><a href="projects-current-projects.php">current projects</a></li>
            <li><a href="projects-recent-projects.php">recently completed projects</a></li>
          </ul>
        </li>
        <li><a href="publications.php">HOST&rsquo;s publications...</a>
          <ul class="lm-vertical lm-right lm-submenu">
            <li><a href="publications-research-and-guidance.php">HOST research and guidance series</a></li>
            <li><a href="publications-published-research.php">recently published HOST research</a></li>
            <li><a href="publications-older-published-research.php">older published HOST research</a></li>
          </ul>
        </li>
        <li><a href="corporate-social-responsibility.php">corporate social responsibility</a></li>
        <li><a href="working.php">working with HOST...</a>
          <ul class="lm-vertical lm-right lm-submenu">
            <li><a href="working-supporting-clients.php">supporting clients</a></li>
            <li><a href="working-in-partnership.php">working in partnership</a></li>
            <li><a href="working-for-host.php">working for HOST</a></li>
            <li><a href="working-in-wales.php">gweithio yng Nghymru / working in Wales</a></li>
            <li><a href="ethics.php">research ethics</a></li>
          </ul>
        </li>
      </ul>
    </div>
    blessed are the cracked for they let in the light

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    The problem is caused by the IE gradfent filters (yet again) and if you remove them from the list styles the gap appears as normal.

    Alternatively use a bottom border instead of a margin and it will work in IE with the filters.

    e.g.
    Code:
    .lm-menu li {
    	background: #381f65;
    	background: -moz-linear-gradient(top, #381f65 0%, #4e2b8c 100%);
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#381f65), color-stop(100%,#4e2b8c));
    	background: -webkit-linear-gradient(top, #381f65 0%,#4e2b8c 100%);
    	background: -o-linear-gradient(top, #381f65 0%,#4e2b8c 100%);
    	background: -ms-linear-gradient(top, #381f65 0%,#4e2b8c 100%);
    	background: linear-gradient(to bottom, #381f65 0%,#4e2b8c 100%);
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#381f65', endColorstr='#4e2b8c',GradientType=0 );
    	padding: 1px;
    	margin-bottom: 0;
    	border-bottom:1px solid #fff;
    	width: 200px;
    }
    .lm-submenu li {
    	background: #4e2b8c;
    	background: -moz-linear-gradient(top, #4e2b8c 0%, #6437b3 100%);
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4e2b8c), color-stop(100%,#6437b3));
    	background: -webkit-linear-gradient(top, #4e2b8c 0%,#6437b3 100%);
    	background: -o-linear-gradient(top, #4e2b8c 0%,#6437b3 100%);
    	background: -ms-linear-gradient(top, #4e2b8c 0%,#6437b3 100%);
    	background: linear-gradient(to bottom, #4e2b8c 0%,#6437b3 100%);
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4e2b8c', endColorstr='#6437b3',GradientType=0 );
    	padding: 1px;
    	margin-bottom: 0;
    	border-bottom:1px solid #fff;
    	width: 200px;
    }
    In my opinion the solid white border looks much better than the transparent gap you had but if you want that gap in other browsers to be transparent then give the above changesd to IE8 and under only using conditional comments.

  3. #3
    SitePoint Evangelist
    Join Date
    Jul 2002
    Location
    Italy
    Posts
    425
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks as always Paul. I agree about the transparent gap - I'd forgotten about it!
    blessed are the cracked for they let in the light


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
  •