Coast Line
asked on
issue with CSS Menu Navigation and IE Versions
Hi, My Navigation is working fine, but it has some issues when i try to open he same in Internet Explorer, Here is the screenshot the same
my HTML Code
my CSS
image on IE
bad.png
good.png
my HTML Code
<nav id="menu">
<ul>
<li class="home"><a title="Home" href="index.cfm"><span>Home</span></a></li>
<li class="categories_hor"><a>Categories</a>
<div>
<div class="column"> <a href="productlist.cfm?category=54">Clothing (5)</a>
<div>
<ul>
<li><a href="productlist.cfm?category=54">All (5)
</a></li>
<li><a href="productlist.cfm?category=54&secondary=72">Cameras
(1)
</a></li>
<li><a href="productlist.cfm?category=54&secondary=71">Pants & Shorts
(2)
</a></li>
<li><a href="productlist.cfm?category=54&secondary=70">Shirts
(2)
</a></li>
</ul>
</div>
</div>
<div class="column"> <a href="productlist.cfm?category=55">Electronics (6)</a>
<div>
<ul>
<li><a href="productlist.cfm?category=55">All (6)
</a></li>
<li><a href="productlist.cfm?category=55&secondary=72">Cameras
(3)
</a></li>
<li><a href="productlist.cfm?category=55&secondary=75">Laptop Computers
(2)
</a></li>
<li><a href="productlist.cfm?category=55&secondary=73">Televisions
(2)
</a></li>
<li><a href="productlist.cfm?category=55&secondary=76">Video Cameras
(1)
</a></li>
</ul>
</div>
</div>
<div class="column"> <a href="productlist.cfm?category=56">Housewares (4)</a>
<div>
<ul>
<li><a href="productlist.cfm?category=56">All (4)
</a></li>
<li><a href="productlist.cfm?category=56&secondary=77">Bed & Bath
(3)
</a></li>
<li><a href="productlist.cfm?category=56&secondary=78">Kitchen
(1)
</a></li>
</ul>
</div>
</div>
<div class="column"> <a href="productlist.cfm?category=57">Lawn & Garden (3)</a>
<div>
<ul>
<li><a href="productlist.cfm?category=57">All (3)
</a></li>
<li><a href="productlist.cfm?category=57&secondary=80">Weed Trimmers
(1)
</a></li>
<li><a href="productlist.cfm?category=57&secondary=79">Lawn Mowers
(2)
</a></li>
</ul>
</div>
</div>
</li>
<li><a href="productlist.cfm?category=54">Clothing</a>
<div>
<ul>
<li><a href="productlist.cfm?category=54&secondary=72">Cameras
(1)
</a></li>
<li><a href="productlist.cfm?category=54&secondary=71">Pants & Shorts
(2)
</a></li>
<li><a href="productlist.cfm?category=54&secondary=70">Shirts
(2)
</a></li>
</ul>
</div>
</li>
<li><a href="productlist.cfm?category=55">Electronics</a>
<div>
<ul>
<li><a href="productlist.cfm?category=55&secondary=72">Cameras
(3)
</a></li>
<li><a href="productlist.cfm?category=55&secondary=75">Laptop Computers
(2)
</a></li>
<li><a href="productlist.cfm?category=55&secondary=73">Televisions
(2)
</a></li>
<li><a href="productlist.cfm?category=55&secondary=76">Video Cameras
(1)
</a></li>
</ul>
</div>
</li>
<li><a href="productlist.cfm?category=56">Housewares</a>
<div>
<ul>
<li><a href="productlist.cfm?category=56&secondary=77">Bed & Bath
(3)
</a></li>
<li><a href="productlist.cfm?category=56&secondary=78">Kitchen
(1)
</a></li>
</ul>
</div>
</li>
<li><a href="productlist.cfm?category=57">Lawn & Garden</a>
<div>
<ul>
<li><a href="productlist.cfm?category=57&secondary=80">Weed Trimmers
(1)
</a></li>
<li><a href="productlist.cfm?category=57&secondary=79">Lawn Mowers
(2)
</a></li>
</ul>
</div>
</li>
<li><a href="brands.cfm">Brands</a>
<div>
<ul>
<li>
<section>
<table align="center" width="100%" border="0">
<td height="30" align="center" valign="middle"><strong> <a href="productlist.cfm?brand=1">Puma<br>
<img src="admin/brands/009_thumbnail.jpg" alt="Puma" title="Puma" /></a></strong></td>
<td height="30" align="center" valign="middle"><strong> <a href="productlist.cfm?brand=2">Nike<br>
<img src="admin/brands/010_thumbnail.jpg" alt="Nike" title="Nike" /></a></strong></td>
<td height="30" align="center" valign="middle"><strong> <a href="productlist.cfm?brand=3">Reebok<br>
<img src="admin/brands/012_thumbnail.jpg" alt="Reebok" title="Reebok" /></a></strong></td>
<td height="30" align="center" valign="middle"><strong> <a href="productlist.cfm?brand=5">Cuzzaro<br>
<img src="admin/brands/001_thumbnail.jpg" alt="Cuzzaro" title="Cuzzaro" /></a></strong></td>
<td height="30" align="center" valign="middle"><strong> <a href="productlist.cfm?brand=6">Selection<br>
<img src="admin/brands/007_thumbnail.jpg" alt="Selection" title="Selection" /></a></strong></td>
<td height="30" align="center" valign="middle"><strong> <a href="productlist.cfm?brand=10">X Factor<br>
<img src="admin/brands/002_thumbnail.jpg" alt="X Factor" title="X Factor" /></a></strong></td>
<td height="30" align="center" valign="middle"><strong> <a href="productlist.cfm?brand=13">Nuetral<br>
<img src="admin/brands/011_thumbnail.jpg" alt="Nuetral" title="Nuetral" /></a></strong></td>
<td height="30" align="center" valign="middle"><strong> <a href="productlist.cfm?brand=16">Flowe<br>
<img src="admin/brands/006_thumbnail.jpg" alt="Flowe" title="Flowe" /></a></strong></td>
<tr>
</table>
</section>
</li>
</ul>
</div>
</li>
<li><a target="_blank" href="#">Contact</a>
<div>
<ul>
<li><a href="index.html">FAQ's</a></li>
<li><a href="header-footer-2.html">Bookmark Us</a></li>
<li><a href="header-footer-3.html">Sitemap</a></li>
</ul>
</div>
</li>
</ul>
</nav>
my CSS
/********** Menu **********/
#menu > span, .m-menu{display:none;}
#menu {background:#222; margin:15px 0px; height:40px; padding:0px 0px 0px 3px;list-style-type:none;}
#menu > ul > li.home { margin:0 0 0 0px;}
#menu > ul > li.home a { display:block; height:35px!important; line-height:35px!important; padding:5px 5px 0 5px!important; }
#menu > ul > li.home a span { background:url(../image/home-icon.png) center center no-repeat; display:block; width:30px; height:30px; text-indent:-9999px;}
#menu ul { list-style: none; margin: 0; padding:0 0 0 2px;}
#menu > ul > li { position: relative; float: left; z-index:1010; padding:0px; }
#menu > ul > li > a { font-size:12px; color: #fff; line-height:40px; text-decoration: none; display: block; padding:0px 10px 0px 10px; z-index: 1009; position: relative; font-weight:bold; text-transform:uppercase;}
#menu > ul > li:hover > a {color:#fff; background:#d45c93; }
#menu > ul > li > div { display: none; background:#fff; position:absolute; z-index:1008; padding:10px; border-top:2px solid #d45c93; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);}
#menu > ul > li:hover > div.custom_block{display:table;}
#menu > ul > li:hover > div.custom_block ul{display:table-cell;}
#menu > ul > li:hover > div { display: table;}
#menu > ul > li > div > ul { display: table-cell; }
#menu > ul > li.categories_hor > div { display: none; background:#fff; min-width:895px; position:absolute; z-index:1008; padding:10px 10px 0px 10px; border-top:2px solid #d45c93; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);}
#menu > ul > li:hover > div {display: block;}
#menu > ul > li.categories_hor > div > .column {position:relative; display:inline-block; width:160px; margin:0 15px 15px 0px;}
#menu > ul > li > div > ul{position:relative; width:160px;}
#menu > ul > li.categories_hor > div > .column + .column, #menu > ul > li > div > ul li + li{}
#menu > ul > li.categories_hor > div > .column > a{font-weight:bold; font-size:13px; border-bottom:1px solid #ddd; margin-bottom:5px;}
#menu > ul > li.categories_hor > div > .column a, #menu > ul > li > div > ul li a{padding:4px 0; display:block; }
#menu > ul > li > div > ul li a{font-size:12px;}
#menu > ul > li.categories_hor > div > .column:hover > a{color:#d45c93;}
#menu > ul > li.categories_hor > div > .column > div{display:block;}
#menu > ul > li.categories_hor > div > .column:hover div{display:table; }
#menu > ul > li.categories_hor > div > .column > div ul{display:table; padding:0;}
#menu > ul > li.categories_hor > div > .column > div ul li + li{}
#menu > ul > li ul + ul { padding-left: 20px; }
#menu > ul > li ul > li > a {text-decoration:none; padding:4px; display:block; min-width: 150px;}
#menu > ul > li div > ul > li > a {color:#222; }
#menu > ul > li div > ul > li > a:hover {background:url(../image/bullet-1.png) right center no-repeat; color:#d45c93;}
#menu > ul > li.categories > div { display: none; background:#fff; min-width:160px; position:absolute; z-index:1008; padding:10px; border-top:2px solid #d45c93; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);}
#menu > ul > li:hover > div {display: block;}
#menu > ul > li.categories > div > .column, #menu > ul > li > div > ul{position:relative;}
#menu > ul > li.categories > div > .column + .column, #menu > ul > li > div > ul li + li{border-top:1px solid #eee;}
#menu > ul > li.categories > div > .column a, #menu > ul > li > div > ul li a{font-size:13px; padding:7px 0; display:block;}
#menu > ul > li.categories > div > .column:hover > a{color:#d45c93;}
#menu > ul > li.categories > div > .column > div{display:none; position:absolute; border-top:2px solid #d45c93; background:#fff; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); z-index:1010; left:150px; top:0; padding:5px 10px;}
#menu > ul > li.categories > div > .column:hover div{display:table; }
#menu > ul > li.categories > div > .column:hover > div ul{display:table-cell; }
#menu > ul > li.categories > div > .column:hover > div ul li + li{border-top:1px solid #eee;}
image on IE
bad.png
good.png
ASKER
The HTML validator throws 48 errors; some of which are serious and indicative of structural issues. The page is apparently supposed to be HTML5, but has obsolete attributes attached to some tags. The CSS and scripting are a jungle.
The most like causes are the page structure not being valid. The excessive sripting has aIE incompatibility or there is a conflict between js libraries. It appears that the menu generation is either be terminated, or overridden by some of the other junk stuffed into the page.
You should start by cleaning up the page so it validates, and then strip out every not need for the menu. If it does no work on its own in IE, then the problem is in the menu scripting. If it does work then bring back each of the other libraries until it breaks and you will know the culprit.
Cd&
The most like causes are the page structure not being valid. The excessive sripting has aIE incompatibility or there is a conflict between js libraries. It appears that the menu generation is either be terminated, or overridden by some of the other junk stuffed into the page.
You should start by cleaning up the page so it validates, and then strip out every not need for the menu. If it does no work on its own in IE, then the problem is in the menu scripting. If it does work then bring back each of the other libraries until it breaks and you will know the culprit.
Cd&
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Solved
Cd&