...

View Full Version : menu system - IE8 help?!



jarv
07-02-2010, 05:23 PM
hi, on my website: http://zend.warrencreative.com/menu/index.html in IE8,

I cannot click on the sub links?!

Please can someone help?

thanks

HTML

<html>
<head>
<link href="menu-style.css" type="text/css" rel="stylesheet" />
<!--[if lte IE 8]>
<link rel="stylesheet" media="all" type="text/css" href="menu-style1.css" />
<![endif]-->

</head>
<body>

<div class="menu">
<ul>
<li>
<a class="hide" href="../menu/index.html">DEMOS</a>

<!--[if lte IE 8]>
<a href="../menu/index.html">DEMOS IE
<table cellspacing="0" cellpadding="0"><tr><td style="background-color:#ff0000;">
<![endif]-->
<ul>
<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
<li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text wrapping text wrapping text wrapping text wrapping text wrapping text wrapping text</a></li>
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
</ul>
<!--[if lte IE 8]>
</td></tr></table>
</a>
<![endif]-->
</li>
</ul>

</div>
</body>
</html>


Firefox CSS


/* common styling */
.menu {font-family: arial, sans-serif; width:200px; position:relative; font-size:11px; z-index:100;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000; text-align:left; color:#fff; border:1px solid #fff; background:#710069; line-height:20px; font-size:11px; }
.menu ul {padding:0; margin:0; list-style: none; overflow:visible;}
.menu ul li { }
.menu ul li ul {display: none; width:400px; }

/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#36f;}
.menu ul li:hover ul {display:block; clear:both; }
.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-105px;}


IE 8 CSS



.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}

.menu ul li a:hover {color:#fff; background:#36f;}
.menu ul li a:hover ul { display:block; clear:both;}
.menu ul li a:hover ul li { }
.menu ul li a:hover ul li a.sub {background:#6a3; color:#fff; }
.menu ul li a:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li a:hover ul li a ul {overflow:hidden;}
.menu ul li a:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li a:hover ul li a:hover ul {overflow:visible; color:#000;}
.menu ul li a:hover ul li a:hover ul.left {left:-105px;}

SB65
07-02-2010, 05:41 PM
You've no doctype, for a start. That may well be causing the issue in IE.

And there's surely no need for tables here...

jarv
07-02-2010, 06:15 PM
Thank you so much for your help!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum