We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 17339
    • 2 Posts
    Hello,

    I’ve already read the other thread on list images. This problem is a little different, but I suppose it’s probably also related.

    I’m using styled bullets for the navigation at http://lovenotes.dk/

    FF shows everything as it should be, but in IE the bullet images disappear on a random basis - sometimes they are there, only to disappear when I roll over the list item. Sometimes you might even see some list items with a styled bullet and the rest without.

    Using background-images instead doesn’t seem to do the trick.

    I don’t get it...please spot the error for me :-/

    The HTML:
    <div id="mainmenu"><ul class="topnav"><li class="current"><a href="/index.php?id=1" title="Forside" >Forside</a></li>
    <li><a href="/index.php?id=56" title="Fordi" >Fordi</a></li>
    
    <li><a href="/index.php?id=48" title="Lovenotes Galleri" >Designgalleri</a></li>
    <li><a href="/index.php?id=57" title="Konkurrence" >Konkurrence</a>
    
    </li>
    <li><a href="/index.php?id=47" title="Forhandlere" >Forhandlere</a>
    <ul><li><a href="/index.php?id=51" title="Bliv forhandler" >Bliv forhandler</a></li>
    </ul>
    </li>
    <li><a href="/index.php?id=52" title="Lovenotes historie" >Baggrund</a></li>
    <li><a href="/index.php?id=6" title="Kontakt" >Kontakt</a></li>
    
    <li class="last"><a href="/index.php?id=49" title="Presse" >Presse</a>
    <ul><li><a href="/index.php?id=50" title="Pressebilleder" >Hent Billeder</a></li>
    </ul>
    </li>
    </ul></div>
    
    



    The CSS
    #mainmenu{
    	position:relative;
    	float:left;
    	width:150px;
    	top:50px;
    	left:20px;
    	}
    
    
    #mainmenu ul{
    	/*background-image:url(images/navmenu_streg_grey.gif);
    	background-repeat:no-repeat;*/
    	list-style-image:url("images/navmenu_streg_grey.gif");
    	padding:20px;
    	margin:20px;
    	}
    
    /*ikke-valgte punkter er hvide*/
    #mainmenu a,
    #mainmenu li.current ul li a{
    	color:#fff;
    	}
    
    /* valgte punkter er røde */
    #mainmenu li.current,
    #mainmenu li.current a,
    #mainmenu li.current ul li.current a{
    	color:#9F0040;
    	padding:0px;
    	margin:0px;
    	}
    
    /* INDRYKNING */
    #mainmenu ul.topnav,
    #mainmenu ul.topnav ul{
    	padding:0px;
    	margin:0px;
    	}
    
    
    #mainmenu ul.topnav a,
    #mainmenu ul.topnav a:hover,
    #mainmenu ul.topnav a:active,
    #mainmenu ul.topnav a:visited{
    	text-decoration:none;
    	font-weight:bold;
    	}
    
    
    /* FØRSTE NIVEAU */
    #mainmenu ul.topnav li{
    	position:relative;
    	padding-bottom:3px;
    	}
    
    
    /* ANDET NIVEAU */
    /*  Skjul niveauet, hvis det ikke er valgt */
    #mainmenu ul ul {
        display: none;
    	}
    
    /* Vis niveau 2, når det er valgt */
    #mainmenu ul.topnav li.current ul {
    	/*list-style-image:url("images/navmenu_streg_grey.gif");*/
    	display: block;
    	position:relative;
    	padding-bottom:10px;
    	margin-left:10px;
    	}
    
      • 8619
      • 229 Posts
      I can see what you mean. FF shows the list lines fine, but in IE7, they disappear.

      You might try adjusting the margins and padding and see if that helps, and I’ll try playing with it some on my end when I get a chance.
        • 8619
        • 229 Posts
        Try this revised code for your CSS:

        #mainmenu{ position: relative; float: left; width: 150px; top: 50px; left: 20px; }
        #mainmenu ul{ padding: 20px; margin: 20px; list-style: none; }
        #mainmenu ul li{ position: relative; padding-bottom: 10px; }
        #mainmenu ul ul { display: none; }
        #mainmenu ul, #mainmenu ul ul{ padding: 0; margin: 0; }

        #mainmenu ul a,
        #mainmenu ul a:hover,
        #mainmenu ul a:active,
        #mainmenu ul a:visited{ text-decoration: none; font-weight: bold; padding-left: 15px; border-left: 2px solid #eee; }

        #mainmenu ul li.current ul { display: block; position: relative; padding: 0 0 10px 10px; margin-left: 10px; }
        #mainmenu li.current { color: #9F0040; margin: 0; }
        #mainmenu a, #mainmenu li.current ul li a{ color: #fff; }
        #mainmenu li.current a, #mainmenu li.current ul li.current a { color: #9f0040; padding-left: 15px; margin: 0; border-left: 2px solid #eee; }

        I didn’t have a way to test it locally with the php setup like yours, but it is using borders on each <a> tag instead of the images, and works in FF and IE. You might need to tweek it a little bit for your liking.

        Hope it helps and works for you!