SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    problem with text showing through and breaking suckerfish dropdown

    Hi.....i dont know of anyone has encountered this before. Ive got a suckerfish drop down....it works fine in FF but in IE it breaks......the dropdown drops down fine and as you mouse over each list item its fine....until you come to a list item that has some text underneath it.....be it copy text of a heading.....in ie6 the cursor changes to the the curosor you get when you hover over text on a page ( a capital i )....and the dropdown disappears....i dont know how to fix it...any ideas??

    Heres the css:

    Code CSS:
    ul#navigation {
        width: 796px;
        font-weight: bold;
        background-color: #fff;
        float: left;
     
    }
     
    ul#navigation li:hover ul, #navigation li.sfhover ul {
    	left: auto;
    }
     
     
     
    ul#navigation li.selected ul li a {
      background: transparent url(../images/trans_background1.png);
    }
     
    * html ul#navigation li.selected ul li a {
      background-image: none !important;
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/trans_background1.png", sizingMethod="scale");
    }
     
    ul#navigation li {
        margin-right: 1px;
        float: left;
    }
     
    ul#navigation li ul, ul#navigation li.selected ul {
        position: absolute;
        clear:both;
        background-color: red;
        width:140px;
        left: -999em;
        z-index:10;
    }
     
    ul#navigation li:hover ul, #navigation li.sfhover ul  {     
        left: auto; 
    }
     
    ul#navigation li a {
        display: block;
        margin: 0;
        padding: 0;
        background: transparent;
     
      background-repeat: repeat;
     
        font-size: 12px;
        color: #fff;
        position: relative;
        text-decoration: none;
        visibility:visible; 
     
    }
     
    ul#navigation li a:hover em, ul#navigation li.selected a em{
    background-position: 0 -16px;
    }
     
    a#nav_1 {
    width: 57px;
    }
    a#nav_2 {
    width: 80px;
    }
    a#nav_3 {
    width: 135px;
    }
    a#nav_4 {
    width: 99px;
    }
    a#nav_5 {
    width: 92px;
    }
    a#nav_6 {
    width: 66px;
    }
    a#nav_7 {
    width: 57px;
    }
    a#nav_8 {
    width: 108px;
    }
    a#nav_9 {
    width: 93px;
    }
     
     
     
     
     
    * html ul#navigation li a {
        float:left;
    }
     
     
     
    ul#navigation li ul li, ul#navigation li.selected ul li{
        clear:both;
        float:none !important;
        display:block !important;
          width: 100%;
          padding: 0 !important;
     
     
        font-weight:normal !important;
        margin:0 !important;
    }
     
    ul#navigation li ul, ul#navigation li.selected ul {
      background: transparent url(../images/trans_background1.png);
    }
     
    ul#navigation li ul li a, ul#navigation li.selected ul li a {
        font-weight:normal !important;
        float:none;
    	  padding: 3px;
     
    	  display: block;
    	color: #0A3265;
    }
     
    .hide ul {
        position: absolute;
        left: -999em !important;
    }
     
    ul#navigation li ul li a:hover, ul#navigation li.selected ul li a:hover, ul#navigation ul li a:hover {
        background-color: #0A3265 !important;
    	  color: white;
    }
     
     
    * html ul#navigation li.selected ul li a:hover, ul#navigation li.selected ul li a {
    background-image: none;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/trans_background1.png", sizingMethod="scale");
    }
     
     
     
    * html ul#navigation li ul  {
        background-image: none;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/trans_background1.png", sizingMethod="scale");
    } 
     
     ul#navigation li ul li a {
        display:block;
        background:none;
        margin:0;
    }
    and the html is:

    Code HTML4Strict:
    <ul id="navigation"><li><a accesskey="h" id="nav_1" href="?s=home" title="Home: alt-h"><img name="1" onmouseout="out(this);" onmouseover="swapOut(this);" src="images/nav_1.gif" /></a><!--BEGIN subnav --><ul></ul><!-- END subnav --></li><li><a accesskey="a" id="nav_2" href="?s=about" title="About Us: alt-a"><img name="2" onmouseout="out(this);" onmouseover="swapOut(this);" src="images/nav_2.gif" /></a><!--BEGIN subnav --><ul><li><a href="/?s=&b=20&bc=18">Buyer Services</a></li><li><a href="/?s=&b=20&bc=19">Developer services</a></li><li><a href="/?s=&b=20&bc=20">Overseas offices</a></li><li><a href="/?s=&b=20&bc=21">Careers</a></li><li><a href="/?s=&b=20&bc=22">The Team</a></li><li><a href="/?s=&b=20&bc=17">About</a></li></ul><!-- END subnav --></li><li><a accesskey="b" id="nav_3" href="?s=buying" title="Buying Property: alt-b"><img name="3" onmouseout="out(this);" onmouseover="swapOut(this);" src="images/nav_3.gif" /></a><!--BEGIN subnav --><ul><li><a href="/?s=&b=20&bc=13">Benefits of buying in the Caribbean</a></li><li><a href="/?s=&b=20&bc=12">The process</a></li><li><a href="/?s=&b=20&bc=14">Testimonials</a></li></ul><!-- END subnav --></li><li class="selected"><a accesskey="i" id="nav_4" href="?s=islands" title="The Islands: alt-i"><img name="4" onmouseout="out(this);" onmouseover="swapOut(this);" src="images/nav_4.gif" /></a><!--BEGIN subnav --><ul><li><a href="/?s=&b=20&bc=6">Antigua3</a></li><li><a href="/?s=&b=20&bc=5">Bahamas, Turks and Caicos</a></li><li><a href="/?s=&b=20&bc=8">Barbados</a></li><li><a href="/?s=&b=20&bc=2">Grenada</a></li><li><a href="/?s=&b=20&bc=73">Name 1</a></li><li><a href="/?s=&b=20&bc=65">New Island</a></li><li><a href="/?s=&b=20&bc=3">St Kitts</a></li><li><a href="/?s=&b=20&bc=4">St Lucia</a></li></ul><!-- END subnav --></li><li><a accesskey="p" id="nav_5" href="?s=properties" title="Properties: alt-p"><img name="5" onmouseout="out(this);" onmouseover="swapOut(this);" src="images/nav_5.gif" /></a><!--BEGIN subnav --><ul></ul><!-- END subnav --></li><li><a accesskey="o" id="nav_6" href="?s=offers" title="Offers: alt-o"><img name="6" onmouseout="out(this);" onmouseover="swapOut(this);" src="images/nav_6.gif" /></a><!--BEGIN subnav --><ul></ul><!-- END subnav --></li><li><a accesskey="n" id="nav_7" href="?s=news" title="News: alt-n"><img name="7" onmouseout="out(this);" onmouseover="swapOut(this);" src="images/nav_7.gif" /></a><!--BEGIN subnav --><ul></ul><!-- END subnav --></li><li><a accesskey="r" id="nav_8" href="?s=register" title="Registration: alt-r"><img name="8" onmouseout="out(this);" onmouseover="swapOut(this);" src="images/nav_8.gif" /></a><!--BEGIN subnav --><ul></ul><!-- END subnav --></li><li><a accesskey="c" id="nav_9" href="?s=contact" title="Contact: alt-c"><img name="9" onmouseout="out(this);" onmouseover="swapOut(this);" src="images/nav_9.gif" /></a><!--BEGIN subnav --><ul></ul><!-- END subnav --></li></ul>
     
    ul#navigation li.on a, #navbar a:hover {
        background-color:#3d0026;
        text-decoration:none;
    }


    any ideas? Unfortunatley i cannot provide a link as this is being developed on my local server

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

    I'd need to see the page to debug it but it's either a z-index issue or an issue with the IE filter which often triggers problems with links. Can you build a zip with images etc that we can download?

  3. #3
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    aha...thanks Paul...i had another go at fixing it for a few hours yesterday but icant put my finger onit it...ive attached a stripped down version of the page.....the only place its apprewnt here is on the islands tab....when you get down to grenada thats where the menu disappraers....im pretty sure its due to the text underneath....

    thanks for any suggestions
    Attached Files Attached Files

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

    You didn't send all the transparent images so I couldn't really check thoroughly but the menu was disappearing on all the nav links in IE.

    It looks as though you are applying transparent backgrounds to the ul so for IE you will need wrap each nested ul in a div and then give the div a fake background image. The image can be a 1px transparent image or even no image at all if you don't mind missing image messages in your server logs.

    This will enable the submenu to retain focus as it seems to be falling through the alpha images.


    e.g.

    Code:
    ul#navigation li ul, ul#navigation li.selected ul {
        width:140px;
        z-index:10;
    }
    ul#navigation li div, ul#navigation li.selected div {
        position: absolute;
        clear:both;
        background:url(fake.gif);/* image doesn't need to exist*/
        width:140px;
        z-index:10;
     left:-999em;
    }
    
    ul#navigation li:hover div, #navigation li.sfhover div  {     
        left: auto; 
    }
    
    Then change the html:

    Code:
        <li><a accesskey="a" id="nav_2" href="http://ign.co.uk/?s=about" title="About Us: alt-a"><img name="2" onmouseout="out(this);" onmouseover="swapOut(this);" src="images/nav_2.gif"></a>
                    <!--BEGIN subnav -->
            <div>
                     <ul>
                        <li><a href="http://co.uk/?s=&amp;b=20&amp;bc=18">Buyer Services</a></li>
                        <li><a href="http:///?s=&amp;b=20&amp;bc=19">Developer services</a></li>
                        <li><a href="http://&amp;b=20&amp;bc=20">Overseas offices</a></li>
                        <li><a href="http://&amp;b=20&amp;bc=21">Careers</a></li>
                        <li><a href="http:///?s=&amp;b=20&amp;bc=22">The Team</a></li>
                        <li><a href="http://uk/?s=&amp;b=20&amp;bc=17">About</a></li>
                    </ul>
                    </div>
                    <!-- END subnav -->
                </li>
    To see if this is really the issue just add this code for a test:

    ul ul {background:#fff!important}

    If the menu appears ok then you should know that is is the issue I mentioned and the changes will work (with any luck).

    Hope it helps

  5. #5
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thats great....it works a treat....thanks for taking the time paul


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
  •