Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6

Thread: CSS Menu help

  1. #1
    New to the CF scene
    Join Date
    Jul 2010
    Location
    San Antonio
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Menu help

    hello all..
    i am seeking help with a CSS Menu that is working when viewed in Firefox but not in IE (6-8). If you would like a link to the actual site, please let me kno, and many thanks in advance ^_^

    This is the CSS Menu code
    Code:
    ul#cssMenu ul{display:none;}
    ul#cssMenu li:hover>*{display:block}
    ul#cssMenu li:hover{position:relative;}
    ul#cssMenu ul{
    	position: absolute;left:-1px;top:98%;opacity:0.8;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";}
    ul#cssMenu ul ul{
    	position: absolute;left:98%;top:-2px;opacity:1;}
    ul#cssMenu,ul#cssMenu ul{
        margin:0px;list-style:none;padding:3px 0 3px 3px;background-color:transparent;background-image:url(http://darktf.b1.jcink.com/uploads/darktf//post-11-1267822128.jpg);background-repeat:repeat;border-width:1px;border-style:solid;border-color:#1d1d1d;}
    ul#cssMenu table {border-collapse:collapse}
    ul#cssMenu {
    	display:block;font-size:0;zoom:1;float: left;}
    ul#cssMenu ul{
    	//width:143px;padding:3px 3px 0;}
    ul#cssMenu li{
    	display:block;zoom:1;margin:0;font-size:0;float:left;}
    ul#cssMenu a:active, ul#cssMenu a:focus {outline-style:none}
    
    ul#cssMenu a{
    	display:block;vertical-align:middle;_display:inline-block;_vertical-align:top;background-color:#1d1d1d;background-image:url(http://darktf.b1.jcink.com/uploads/darktf//post-11-1267822128.jpg);border-width:0px;border-style:solid;border-color:#1d1d1d;text-align:left;text-decoration:none;padding:4px;_padding-left:0;font:normal 10px Verdana;color: #666666;text-decoration:none;cursor:pointer;}
    ul#cssMenu ul li {float:none;}
    ul#cssMenu ul a{
    	display:block;text-align:left;white-space:nowrap;}
    ul#cssMenu li:hover>a{
    	background-image:url(http://darktf.b1.jcink.com/uploads/darktf//post-11-1267822128.jpg);border-color:#1d1d1d;border-style:solid;font:normal 10px Verdana;color: #996666;text-decoration:none;}
    ul#cssMenu li a:hover{
    	_position:relative;background-image:url(http://darktf.b1.jcink.com/uploads/darktf//post-11-1267822128.jpg);border-color:#1d1d1d;border-style:solid;font:normal 10px Verdana;color: #996666;text-decoration:none;}
    ul#cssMenu img{
    	border: none;vertical-align: middle;margin-right:8px;}
    ul#cssMenu img.over{display:none}
    ul#cssMenu li:hover > a img.def  {display:none}
    ul#cssMenu li:hover > a img.over {display:inline}
    ul#cssMenu a:hover img.over,ul#cssMenu a:hover ul img.def,ul#cssMenu a:hover a:hover img.over{display:inline}
    ul#cssMenu a:hover img.def,ul#cssMenu a:hover ul img.over,ul#cssMenu a:hover a:hover img.def{display:none}
    ul#cssMenu a:hover ul{display:block}
    ul#cssMenu a:hover ul{display:block}
    ul#cssMenu span{
    	display:block;overflow:visible;background-image:url(http://darktf.b1.jcink.com/uploads/darktf//post-11-1267824055.gif);background-position:right center;background-repeat: no-repeat;padding-right:14px;}
    the navigation portion is as follows:
    Code:
    <ul id="cssMenu">
    	<li><a href="http://darktf.b1.jcink.com/"><img class="def" src="http://darktf.b1.jcink.com/uploads/darktf//post-11-1267822766.gif"/><img class="over" src="http://darktf.b1.jcink.com/uploads/darktf//post-11-1267823893.gif">Home</a></li>
    	<li><a href="http://#">
    	<span><img class="def" src="http://darktf.b1.jcink.com/uploads/darktf//post-11-1267822766.gif"/><img class="over" src="http://darktf.b1.jcink.com/uploads/darktf//post-11-1267823893.gif">DTF ID</span>
    	<![if gt IE 6]></a><![endif]>
    	<!--[if lte IE 6]><table><tr><td><![endif]-->
    	<ul style="width:116px;">
    		<li><a href="http://darktf.b1.jcink.com/index.php?act=Login&CODE=00"><img class="def" src="http://darktf.b1.jcink.com/uploads/darktf//post-11-1267822766.gif"/><img class="over" src="http://darktf.b1.jcink.com/uploads/darktf//post-11-1267823893.gif">Log in</a></li>
    		<li><a href="http://darktf.b1.jcink.com/index.php?act=Login&CODE=03"><img class="def" src="http://darktf.b1.jcink.com/uploads/darktf//post-11-1267822766.gif"/><img class="over" src="http://darktf.b1.jcink.com/uploads/darktf//post-11-1267823893.gif">Log out</a></li>
    		<li><a href="http://darktf.b1.jcink.com/index.php?act=Reg&CODE=00"><img class="def" src="http://darktf.b1.jcink.com/uploads/darktf//post-11-1267822766.gif"/><img class="over" src="http://darktf.b1.jcink.com/uploads/darktf//post-11-1267823893.gif">Register</a></li>
    	</ul>
    	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
    	</li>
    	<!--[if lte IE 6]><table><tr><td><![endif]-->
    	<li><a href="http://pax.darkfx.com/"><span><img class="def" src="http://darktf.b1.jcink.com/uploads/darktf//post-11-1267822766.gif"/><img class="over" src="http://darktf.b1.jcink.com/uploads/darktf//post-11-1267823893.gif">i|Pax</span>
    	<![if gt IE 6]></a><![endif]>
    	<ul style="width:135px;">
    		<li><a href="http://pax.darkfx.com/"><img class="def" src="http://darktf.b1.jcink.com/uploads/darktf//post-11-1267822766.gif"/><img class="over" src="http://darktf.b1.jcink.com/uploads/darktf//post-11-1267823893.gif">World Index</a></li>
    		<li><a href="http://darktf.b1.jcink.com/index.php?act=store"><img class="def" src="http://darktf.b1.jcink.com/uploads/darktf//post-11-1267822766.gif"/><img class="over" src="http://darktf.b1.jcink.com/uploads/darktf//post-11-1267823893.gif">Pax Bazar</a></li>
    		<li><a href="http://darktf.b1.jcink.com/index.php?act=Arcade"><img class="def" src="http://darktf.b1.jcink.com/uploads/darktf//post-11-1267822766.gif"/><img class="over" src="http://darktf.b1.jcink.com/uploads/darktf//post-11-1267823893.gif">[iA]rcade</a></li>
    		<li><a href="http://darktf.b1.jcink.com/index.php?act=army"><img class="def" src="http://darktf.b1.jcink.com/uploads/darktf//post-11-1267822766.gif"/><img class="over" src="http://darktf.b1.jcink.com/uploads/darktf//post-11-1267823893.gif">Army HQ</a></li>
    	</ul>
    	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
    	</li>
    	<li><a href="http://darktf.b1.jcink.com/index.php?act=UserCP&CODE=00" target="_blank"><img class="def" src="http://darktf.b1.jcink.com/uploads/darktf//post-11-1267822766.gif"/><img class="over" src="http://darktf.b1.jcink.com/uploads/darktf//post-11-1267823893.gif">Controls</a></li>
    	<li><a href="http://darktf.b1.jcink.com/index.php?act=Msg&CODE=01"><img class="def" src="http://darktf.b1.jcink.com/uploads/darktf//post-11-1267822766.gif"/><img class="over" src="http://darktf.b1.jcink.com/uploads/darktf//post-11-1267823893.gif">Messages</a></li>
    	<li><a href="http://darktf.b1.jcink.com/index.php?act=Search&f="><img class="def" src="http://darktf.b1.jcink.com/uploads/darktf//post-11-1267822766.gif"/><img class="over" src="http://darktf.b1.jcink.com/uploads/darktf//post-11-1267823893.gif">Search</a></li>
    	<li><a href="http://darktf.b1.jcink.com/index.php?act=calendar="><img class="def" src="http://darktf.b1.jcink.com/uploads/darktf//post-11-1267822766.gif"/><img class="over" src="http://darktf.b1.jcink.com/uploads/darktf//post-11-1267823893.gif">Calendar</a></li>
    	<li><a href="http://pax.darkfx.com/links.html"><img class="def" src="http://darktf.b1.jcink.com/uploads/darktf//post-11-1267822766.gif"/><img class="over" src="http://darktf.b1.jcink.com/uploads/darktf//post-11-1267823893.gif">Conextions</a></li>
    </ul>
    Last edited by Bad Wolf; 07-31-2010 at 03:17 AM.

  • #2
    New Coder
    Join Date
    Feb 2010
    Posts
    74
    Thanks
    9
    Thanked 0 Times in 0 Posts
    from first glance it seems you repeat yourself alot in your css, or else the organization just seems repetitive. I would atleast suggest cleaning it up so you can follow whats doing what for what to narrow down your possibilities for where the bug may be. If the menu is somewhat consistent you shouldnt need so many different classes of ul and li

    i would set up the css in a basic format as below:

    Code:
    #div {  };
       #div ul {  };
       #div ul li {  };
       #div ul li a{  };
       #div ul li a:hover{  };
    might not solve your problem, but may lead you to find something obvious.


    other than that, if you give me a link, maybe ill be able to wrap my head around it some more

  • #3
    New to the CF scene
    Join Date
    Jul 2010
    Location
    San Antonio
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i edited the code, it looks to have cleaned it up.
    everything tested fine in the HTML editor (i am using CoffeeCup)
    but when adding to the site.. still not working in IE
    Last edited by Bad Wolf; 07-31-2010 at 03:29 AM. Reason: updated 1st post

  • #4
    New Coder
    Join Date
    Feb 2010
    Posts
    74
    Thanks
    9
    Thanked 0 Times in 0 Posts
    it may be the tables your inserting in there if its ie. i dont know of a circumstance where that would be necessary. ie should display lists correctly.

    id just try boiling it down and then work your way back up to see where you start to get errors.

    it may be somewhere in there where you have lists inside of lists

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    The code you posted works fine for me in IE7. If it doesn't work for you I wonder if you have a valid correct doctype on your page. Without one IE is unlikely to behave itself.

    Not quite right in IE6 still. Some of your conditional comments are not correctly formatted:

    Code:
    <![if gt IE 6]></a><![endif]>
    should be:

    Code:
    <!--[if gt IE 6]></a><![endif]-->
    And this segment of your markup:

    Code:
    	<!--[if lte IE 6]><table><tr><td><![endif]-->
    	<li><a href="http://pax.darkfx.com/"><span><img class="def" src="http://darktf.b1.jcink.com/uploads/darktf//post-11-1267822766.gif"/><img class="over" src="http://darktf.b1.jcink.com/uploads/darktf//post-11-1267823893.gif">i|Pax</span>
    	<!--[if gt IE 6]></a><![endif]-->
    should be:

    Code:
    	<li><a href="http://pax.darkfx.com/"><span><img class="def" src="http://darktf.b1.jcink.com/uploads/darktf//post-11-1267822766.gif"/><img class="over" src="http://darktf.b1.jcink.com/uploads/darktf//post-11-1267823893.gif">i|Pax</span>
    	<!--[if gt IE 6]></a><![endif]-->
    	<!--[if lte IE 6]><table><tr><td><![endif]-->

  • #6
    New to the CF scene
    Join Date
    Jul 2010
    Location
    San Antonio
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    o wow.. the doc type.. go figure.
    that seemed to do the trick. Thank you.


  •  

    Posting Permissions

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