Urgent help needed

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
 
SparkCreative said:
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
Click to expand...

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.
 
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?
 
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...
 
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.
 
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:
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!
 
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">
 
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.
 
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).
 
You must log in or register to reply here.
Back
Top