Solved

issue with CSS Menu Navigation and IE Versions

Posted on 2013-05-13
5
317 Views
Last Modified: 2013-06-17
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

<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>

Open in new window


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;}

Open in new window


image on IE
bad.png
good.png
0
Comment
  • 3
  • 2
5 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39165497
We need a link to the page, and what version(s) of IE is it not working in.

Cd&
0
 
LVL 15

Author Comment

by:Gurpreet Singh Randhawa
ID: 39194154
check the url in IE

http://alturl.com/wzfi6
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39194917
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&
0
 
LVL 15

Accepted Solution

by:
Gurpreet Singh Randhawa earned 0 total points
ID: 39243665
I am closing this question a i have resolved it myself
0
 
LVL 15

Author Closing Comment

by:Gurpreet Singh Randhawa
ID: 39252626
Solved
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Hyper V cluster 2 31
CSS z-index issue 3 20
Target h5 of a div 3 8
two div layout one vertical other horizontal. 5 6
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

26 Experts available now in Live!

Get 1:1 Help Now