Print Reseller Scheme
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Urgent help needed

Discussion in 'Website Coding & Programming Forum:' started by SparkCreative, Sep 25, 2012.

  1. SparkCreative

    SparkCreative Member

    So I've created a wordpress site and it's all been running fine, but I've added a banner to it and it turns out the banner is causing the navigation to disappear, but this only happens in IE9. Brilliant.

    I need to get this sorted urgently, anyone got any ideas? The site is:

    Faces Nightclub Essex
     
  2. gemznunn

    gemznunn New Member

    Are you coding in HTML5? If so, have you got all IE Shivs in place? Had a similar problem myself and the solution was that I forgot to add a Shiv for IE9.
     
  3. SparkCreative

    SparkCreative Member

    Ummm... you've lost me. We started with a wordpress template, heavily modified it. (I didn't do that part). I've been updating and adding to it. Them I put this banner i the header, tested it on all sorts of browsers (apart, apparently from IE9) and it seemed fine. What are these shivs you speak of?
     
  4. SparkCreative

    SparkCreative Member

    Ok, I googled it. It's not, so far as I'm aware, in html5. But I've put the shiv code in anyway just in case. Now I need a copy of IE9 to run on my mac...
     
  5. gemznunn

    gemznunn New Member

    Okie dokie. I'll do my best to explain. :)

    HTML5 is being gradually phased in as the coding language amongst us web monkeys, but not all browsers are ready for it, especially IE. A HTML5 Shiv is a workaround to enable the styling and positioning of HTML5 elements (such as containers for banners). It's a tiny piece of code that should be pasted within the <head> tag on your main template. Ask the person would modified the WordPress template. They will be able to tell you if they included a shiv. If they did, then that's not the problem. If they didn't, copy the piece of code for this link and paste it into the <head> tag to see if that will fix the problem.

    IE, in general, is a bit slow on the uptake of new additions to the markup languages and is a nightmare to design for.
     
  6. gemznunn

    gemznunn New Member

  7. SparkCreative

    SparkCreative Member

    Already done. Not fixed. Would it help to see the code for the header? I've highlighted the banner bit.

    Here it is:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <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('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>
    <META NAME="Description" CONTENT="<?php bloginfo('description'); ?>">
    <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'); ?>" />
    <?php wp_get_archives('type=monthly&format=link'); ?>
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/css/slideshow.css"/>
    <!-- styles needed by jScrollPane -->
    <link type="text/css" href="<?php bloginfo('template_url'); ?>/css/jquery.jscrollpane.css" rel="stylesheet" media="all" />
    <?php wp_head();?>
    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/cufon.js"></script> 
    <script src="<?php bloginfo('template_url'); ?>/js/texgyreadventor.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
    Cufon.replace('h1', { fontFamily: 'TeXGyreAdventor' });
    Cufon.replace('h2', { fontFamily: 'TeXGyreAdventor' });
    Cufon.replace('h2', { hover: true });
    Cufon.replace('.menu a', { fontFamily: 'TeXGyreAdventor' });
    Cufon.replace('.date_title .day', { fontFamily: 'TeXGyreAdventor' });
    Cufon.replace('.date_title .month ', { fontFamily: 'TeXGyreAdventor' });
    Cufon.replace('.taghead', { fontFamily: 'TeXGyreAdventor' }); 
    </script>
    
    
    <!-- the mousewheel plugin - optional to provide mousewheel support -->
    <?php include(TEMPLATEPATH."/js/options.php");?>
    <!--[if IE]>
    	<style type="text/css">
    		.mejs-controls div.mejs-horizontal-volume-slider, .mejs-button mejs-volume-button mejs-mute {
    			position: absolute;
    			top: -9999999px;
    			display: none;
    		}
    		.mejs-controls .mejs-mute button {
    			display:none;
    			background: none;
    		}
    	</style>
    <![endif]-->
    
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    </head>
    <body>
    
    <?php
    // $x = rawurlencode(get_permalink());
    $permalink = the_permalink();
    $title = the_title();
    ?>
    
    <script>
    var test_php_variable = "<?php echo $x; ?>";
    var permalink = "<?php echo $permalink; ?>";
    var title = "<?php echo $title; ?>";
    </script>
    
    <div id="fb-root"></div>
    <script>
    //    (function(d, s, id) {
    //  var js, fjs = d.getElementsByTagName(s)[0];
    //  if (d.getElementById(id)) return;
    //  js = d.createElement(s); js.id = id;
    //  js.src ="//connect.facebook.net/en_GB/all.js#xfbml=1";
    //  fjs.parentNode.insertBefore(js, fjs);
    //}(document, 'script', 'facebook-jssdk'));</script>
    
    <div id="topnav" style="width:1800px;">
    	
    		
    		<?php echo do_shortcode( '[audio folder="wp-content/music"]' ); ?> 
    
    </div>
    
    <div class="main"> 
    	<div id="header">
    		<div id="logo">
    			<a href="<?php bloginfo('url');?>">
    				<img src="<?php bloginfo('template_url'); ?>/images/logo.png">
    			</a>
    		</div>
    
    [B]<div id="headbanner" style="height:85px; width:520px; position:absolute; top:50px; left:458px;">
    <a href="http://facesnightclub.co.uk/Christmas/";?><img src="http://facesnightclub.co.uk/Christmas/xmas-booking-banner.jpg"></a></div>[/B]
    
    <div id="header_ad">
    		</div>
    	    
    	</div>	 
    	<div class="out">
    		<div id="menu_navigation">
    			<div id="menu-nav">
    				<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'menu-header' ) ); ?>
    			</div>  
    		</div>
    		<div style="clear:both"></div>
     
    Last edited by a moderator: Sep 25, 2012
  8. SparkCreative

    SparkCreative Member

    That's very cool. I'll be using that a lot...
     
  9. SparkCreative

    SparkCreative Member

    In fact, it's telling me the same problem exists in IE8. But not 10.
     
  10. SparkCreative

    SparkCreative Member

    Ok, it's not the banner I added, it's something else. The nav isn't showing at all in IE 8 or 9.
     
  11. SparkCreative

    SparkCreative Member

    It's facebook walleria. I'll contact the developer.
     
  12. chris_17

    chris_17 Member

    It could be canvas as the nav links are using cufon and they look to be generated inside of a canvas tag, if you take a look through the chrome web inspector for example. You could try changing the doctype simply to just
    HTML:
    <!DOCTYPE html>
    also try adding
    HTML:
    <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1"> 
    then IE uses the it's highest rendering version or uses a chrome frame I believe, more info here https://developers.google.com/chrome/chrome-frame/

    It's a complete stab in the dark though and haven't tested, as you say Facebook could be doing some weird stuff which often happens!
     
  13. SparkCreative

    SparkCreative Member

    Cheers. Where should I add that code? In the header?
     
  14. chris_17

    chris_17 Member

    If you replace everything before the title tag with below and see how that works.

    HTML:
    <!DOCTYPE html>
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     
  15. SparkCreative

    SparkCreative Member

    I'll do that, but I'm pretty sure it's a javascript error - if I turn Walleria off the error goes away.
     
  16. SparkCreative

    SparkCreative Member

    did that, no joy :(
     
  17. gemznunn

    gemznunn New Member

    OK, I've had a look. I think there could be conflict between the HTML page and the CSS document. You've declared an id called headbanner and attached some inline styling. If headbanner exists within the WordPress template's main CSS document, it could be causing IE to have a "Aaaah! Which one do I use?! I don't know which rules have priority. I know! I'll just ignore all of it!" reaction to it.

    Check the template's CSS document and see if headbanner exists in there. If it does, you may need to remove the inline styling from the HTML document and place it in the CSS document to remove the conflict.
     
  18. SparkCreative

    SparkCreative Member

    It's fixed I think. It seems it was indeed to do with cufon (I wouldn't have used cufon but it was already built into the template).
     

Share This Page