Wordpress Navigation Problems on IE

jbwebdesign · September 29, 2011

hello everyone, I am working on my first wordpress website and i am having some trouble with the navigation on IE 9, not really sure about other versions of IE.

the site looks fine on Chrome and Firefox but not sure how to fix this.

Can anyone help me please?

Here is the Site

newseed · September 29, 2011

The nav unordered list is a mess.

<div class="menu"><ul><li class="page_item page-item-6"><a href="http://petgroomingsystem.com/?page_id=6" title="Demo"><li>Demo</li></a></li><li class="page_item page-item-8"><a href="http://petgroomingsystem.com/?page_id=8" title="Purchase"><li>Purchase</li></a></li><li class="page_item page-item-10"><a href="http://petgroomingsystem.com/?page_id=10" title="Features"><li>Features</li></a></li><li class="page_item page-item-12"><a href="http://petgroomingsystem.com/?page_id=12" title="F.A.Q."><li>F.A.Q.</li></a></li><li class="page_item page-item-14"><a href="http://petgroomingsystem.com/?page_id=14" title="Contact Us"><li>Contact Us</li></a></li></ul></div>

[/code]

You will see that there is a list within a list but only one open/close <ul> </ul> tags. This particular template is coded for HTML5 and IE just does not support it very well but I am unsure why the unusual unordered list format. Maybe there is some script that is not enabled to make IE behave correctly?

newseed · September 29, 2011

I would also suggest uploading the original template (before changes) and see if you have the same problem.

jbwebdesign · September 29, 2011

i don't have problems with the original HTML

but for some reason, wordpress only adds the <LI> tags inside of the <li> <a> </a> </li> on IE.

on firefox and chrome it works fine.

i also noticed that the CUFON Javascript file isn't working on IE. Maybe this has something to do with it?

newseed · September 30, 2011

If that template, in it's original form, works then you need to figure out why it doesn't work after your edits.

Many questions that you need to consider:

1. Did you edit any of the template's files? If so, double check those edits.

2. Did you add any plugins? Not all plugins are 100% compatible to all templates.

3. Determine if the cufon script has everything it needs for IE. The template creator may have coded it without IE in mind for various reasons. Just google Cufon Script and look for IE support.

Do you have a demo link of where you got the template?

jbwebdesign · September 30, 2011

I'm the one Who Designed the website and converted it into HTML/CSS and I am also the one integrating it with wordpress.

so i created the template lol.

I just can't seem to figure out where the code has an error.

I am not using any plugins

I am not sure what is going on with cufon.

hmmmmm...........

maybe there is a javascript error somewhere

newseed · September 30, 2011

Ah...ok...I would focus on the area where the menu code is generated and start there. You may have some logic that is invertantly adding a second <li>. It's possible that you have an unordered list tag in both the menu php code function and in the template which would explain the extra <li> tags.

jbwebdesign · September 30, 2011

I looked over the code and noticed the tags are displaying incorrectly the way that i had it.

how ever, now that the markup is looking fine, the menu doesn't display at all for some reason.

here is the php code.....

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>">
<title><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?></title>
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" media="screen">
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<!--FOR CUFON-->
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery-1.2.1.min.js"></script>
<script src="<?php bloginfo('stylesheet_directory'); ?>/js/cufon-yui.js" type="text/javascript"></script>
<script src="<?php bloginfo('stylesheet_directory'); ?>/js/Myriad_Pro.font.js" type="text/javascript"></script>
<script src="<?php bloginfo('stylesheet_directory'); ?>/js/myriad-pro.cufonfonts.js" type="text/javascript"></script>
<script src="<?php bloginfo('stylesheet_directory'); ?>/js/html5.js"></script>
<script src="<?php bloginfo('stylesheet_directory'); ?>/js/cufon_edited.js" type="text/javascript"></script>


<!--[if gte IE 9]>
<script type="text/javascript">
Cufon.set('engine', 'canvas');
</script>
<![endif]-->

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js"></script>
<![endif]-->
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/pngfix.js"></script>
<![endif]-->

<?php wp_head(); ?>
</head>
<body>
<!--BEGIN WRAPER PART-->
<div id="wraper">
 <!--BEGIN HEADER PART-->
 <header>
   <div id="logo">
     <h1><a href="<?php echo get_option('home'); ?>"><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?></a></h1>
   </div>
   <div id="headerRight">
     <div class="right"> <a href="#" class="newslink"><b>Join the Newsletter</b></a><a href="#" class="clientlink"><b>Client Area</b></a>
       <div class="clear"></div>
     </div>
     <div class="clear"></div>
     <nav>

	  <?php wp_page_menu('show_home=0&sort_column=menu_order, post_title');?>

         <!--<li class="lastchild"><a href="#">Contact Us </a></li>-->

       <div class="clear"></div>
     </nav>
   </div>
   <div class="clear"></div>
 </header>
 <!--END HEADER PART-->
 <?php if(is_home()) : ?>
  <!--BEGIN BANNER PART-->
 <div id="banner">
   <div id="bannerText">
     <h2>Pet Grooming System</h2>
     <p> is a unique system that allows you to control your whole entire Pet Grooming Company directly from your computer or any computer in the world with internet access! </p>
     <a href="demo.php">TRY DEMO NOW</a> </div>
   <div id="bannerVideoPart"> <!--<span></span>-->
     <div id="videoBox"> 
     	<iframe width="395" height="242" src="http://www.youtube.com/embed/80D0ylOqPJ8" frameborder="0" allowfullscreen></iframe>
     </div>
   </div>
   <div class="clear"></div>
 </div>
 <!--END BANNER PART-->
 <!--BEGIN MIDDLE CONTENT-->
 <section style="margin:0;">
   <ul class="midPart">
             <?php
			$page_num = $paged;
			if ($pagenum='') $pagenum =1;
			query_posts('showposts=3&paged='.$page_num.'&orderby=date&order=ASC'); ?>

			<?php if (have_posts()) : ?>
			<?php $postnum = 1; ?>
			<?php while (have_posts()) : the_post(); ?>
     <li <?php if ($postnum ==3) { echo 'class="nobdr"'; }?>>
       <div <?php post_class() ?> id="post-<?php the_ID(); ?>">

       <div class="left">
       <?php //if post 1 show this, if post 2 show that, if post 3 show that 
		switch($postnum){
			case 1:
	?>
       	<img src="<?php bloginfo('stylesheet_directory'); ?>/images/icon1.gif" width="58" height="57" alt="icon">	
   <?php break; 

		case 2:
	?>
       	<img src="<?php bloginfo('stylesheet_directory'); ?>/images/icon2.gif" width="58" height="57" alt="icon">
       <?php	
		break;

		case 3:
	?>
       	<img src="<?php bloginfo('stylesheet_directory'); ?>/images/icon3.gif" width="58" height="57" alt="icon">
       <?php
		break;
   ?>

   <?php }//end switch ?>
       </div>

       <div class="sectionRight">

         <h3 class="blue"><?php the_title(); ?></h3>
         	<p><?php the_content(''); ?></p>
         <a href="<?php the_permalink() ?>">+Read more</a> </div>
       <div class="clear"></div>

     </div>

     </li>
     <?php $postnum++; ?>
     <?php endwhile;endif; ?>

   </ul>
   <div class="clear"></div>
 </section>
 <!--END MIDDLE CONTENT-->
 <!--BEGIN BOTTOM CONTENT-->
 <section>
   <ul class="botPart">
     <li>
       <h6 class="white">Quick Links</h6>
       <ul>
         <li><a href="#">Demo</a></li>
         <li><a href="#">Purchase</a></li>
         <li><a href="#">Features</a></li>
         <li><a href="#">F.A.Q</a></li>
       </ul>
     </li>
     <li>
       <h6 class="white">About Us</h6>
       <p> Pet Grooming System is a unique system that allows you to control your whole entire Pet Grooming Company directly from your computer or any computer in the world with internet access! </p>
     </li>
     <li>
       <h6 class="white">How it works</h6>
       <p> Pet grooming System works by being installed on your own virtual server. This means that you will need to purchase a domain name (www.mywebsite.com) in order for the software to be installed on the domain. </p>
     </li>
     <li class="nobdr">
       <h6 class="white">GET IN TOUCH</h6>
       <ul>
         <li><span class="white">Tel: +222 222 12 12 12</span></li>
         <li> <span class="white">Email:</span><br />
           <a href="#" class="splink">info@petgroomingsystem.com</a> </li>
         <li><a class="facebook" href="#">FACEBOOK</a><a class="twiter" href="#">TWITER</a>
           <div class="clear"></div>
         </li>
       </ul>
     </li>
   </ul>
   <div class="clear"></div>
 </section>
 <!--END BOTTOM CONTENT-->
 <?php endif; ?>
</div>
<!--END WRAPER PART-->

newseed · September 30, 2011

I do not think <nav> is supported by IE. Use <div> instead.

jbwebdesign · September 30, 2011

that can't be the issue because it doesn't work on chrome or firefox now......this is a tricky problem hmmmm

jbwebdesign · September 30, 2011

i found the fix

it was a css issue

Sign In

Wordpress Navigation Problems on IE

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation