Website cannot show main menu on IE8 and safari. but FF and Chrom are fine

website cannot show main menu on IE8 and safari. but FF and Chrom are fine

The web link is:
http://www.beyondeu.com/

Anyone could offer any help?
Really appreciated.

Hi oasisinthesky . Welcome to the forums. :slight_smile:

It looks fine in Safari to me, but in IE8, it looks like many of the menu styles are served inside an @media rule, meaning that IE8 won’t get those styles. also, the #navigation div is set to display: none in IE8, though I’m not sure where that’s coming from. Anyhow, you need an alternative to @media rules for IE8. I’d say move the desktop styles out of the @media rules, or otherwise supply a conditional stylesheet for IE only.

Please Post the tags and code here,

Thanks ralph.m. I used my iphone and checked it. Its the same problem as the one in the IR8. Can you please be a bit more specific about the ways of solving it? The code is posted here.

<!DOCTYPE html>
<html dir=“ltr” lang=“en-US”>
<head>
<meta charset=“UTF-8” />
<title>Beyondeu</title>
<meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8” />
<meta name=“robots” content=“index, follow” />
<link rel=“stylesheet” type=“text/css” href=“css/canvasstyle.css” media=“all” />

<link rel=‘stylesheet’ id=‘admin-bar-css’ href=‘css/admin-bar.css’ type=‘text/css’ media=‘all’ />
<link rel=‘stylesheet’ id=‘layout-css’ href=‘css/layout.css’ type=‘text/css’ media=‘all’ />
<link rel=‘stylesheet’ id=‘responsive-layout-css’ href=‘css/responsive-layout.css’ type=‘text/css’ media=‘screen’ />
<link rel=‘stylesheet’ id=‘prettyPhoto-css’ href=‘css/prettyPhoto.css’ type=‘text/css’ media=‘all’ />
<script type=‘text/javascript’ src=‘js/comment-reply.js’></script>
<script type=‘text/javascript’ src=‘js/jquery/jquery.js’></script>
<script type=‘text/javascript’ src=‘js/third-party.js’></script>
<script type=‘text/javascript’ src=‘js/jquery.flexslider.min.js’></script>
<script type=‘text/javascript’ src=‘js/slides.min.jquery.js’></script>
<script type=‘text/javascript’ src=‘js/feedback.js’></script>
<script type=‘text/javascript’ src=‘js/jquery.prettyPhoto.js’></script>
<script type=‘text/javascript’>

/* <![CDATA[ /
var woo_localized_data = {“select_a_page”:“Select a page:”};
/
]]> */
</script>
<script type=‘text/javascript’ src=‘js/general.js’></script>

<style type=“text/css”>

#header {background-repeat:no-repeat;background-position:top center;margin-top:0px;margin-bottom:0px;padding-top:30px;padding-bottom:30px;border:0px solid ;}

#logo .site-title a {font:bold 40px/1em “Helvetica Neue”, Helvetica, sans-serif;color:#222222;}
#logo .site-description {font:normal 13px/1em “Helvetica Neue”, Helvetica, sans-serif;color:#999999;}

#wrapper {padding-left:30px; padding-right:30px;margin-top:20px;margin-bottom:20px;border-top:3px solid #dbdbdb;border-bottom:3px solid #dbdbdb;border-left:1px solid #dbdbdb;border-right:1px solid #dbdbdb;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;box-shadow: 0px 1px 5px rgba(0,0,0,.3);-moz-box-shadow: 0px 1px 5px rgba(0,0,0,.3);-webkit-box-shadow: 0px 1px 5px rgba(0,0,0,.3);}
body, p { font:normal 13px/1.5em “Gill Sans”, “Gill Sans MT”, Calibri, sans-serif;color:#555555; }

h1 { font:bold 28px/1.5em “Gill Sans”, “Gill Sans MT”, Calibri, sans-serif;color:#222222; }h2 { font:bold 24px/1.5em “Gill Sans”, “Gill Sans MT”, Gill Sans MT, Gill Sans MT;color:#222222; }h3 { font:bold 20px/1.5em “Gill Sans”, “Gill Sans MT”, Calibri, sans-serif;color:#222222; }h4 { font:bold 16px/1.5em “Gill Sans”, “Gill Sans MT”, Calibri, sans-serif;color:#222222; }h5 { font:bold 14px/1.5em “Gill Sans”, “Gill Sans MT”, Calibri, sans-serif;color:#222222; }h6 { font:bold 12px/1.5em “Gill Sans”, “Gill Sans MT”, Calibri, sans-serif;color:#222222; }
.post .title, .page .title, .post .title a:link, .post .title a:visited, .page .title a:link, .page .title a:visited {font:bold 26px/1.2em “Helvetica Neue”, Helvetica, sans-serif;color:#222222;}
.post-meta { font:normal 11px/1.5em “Helvetica Neue”, Helvetica, sans-serif;color:#999999; }
.entry, .entry p{ font:normal 13px/1.5em “Helvetica Neue”, Helvetica, sans-serif;color:#555555; }
.post-more {font:normal 12px/1.5em “Helvetica Neue”, Helvetica, sans-serif;color:;border-top:0px solid #e6e6e6;border-bottom:0px solid #e6e6e6;}

#comments .comment.thread-even {background-color:#030303;}
#post-author, #connect {border-top:1px solid #e6e6e6;border-bottom:1px solid #e6e6e6;border-left:1px solid #e6e6e6;border-right:1px solid #e6e6e6;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fafafa}
#comments .comment.thread-even {background-color:#030303;}
.nav-entries a, .woo-pagination { font:normal 12px/1em “Helvetica Neue”, Helvetica, sans-serif;color:#888; }
.woo-pagination a, .woo-pagination a:hover {color:#888!important}
.widget h3 {font:bold 14px/1.5em “Helvetica Neue”, Helvetica, sans-serif;color:#555555;border-bottom:1px solid #e6e6e6;}
.widget_recent_comments li, #twitter li { border-color: #e6e6e6;}
.widget p, .widget .textwidget { font:normal 12px/1.5em Arial, sans-serif;color:#555555; }
.widget {font:normal 12px/1.5em Arial, sans-serif;color:#555555;background-color:#91918c;border:2px solid #dbdbdb;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;}
#tabs {border:2px solid #dbdbdb;}
#tabs .inside li a { font:bold 12px/1.5em “Helvetica Neue”, Helvetica, sans-serif;color:#555555; }
#tabs .inside li span.meta { font:normal 11px/1.5em “Helvetica Neue”, Helvetica, sans-serif;color:#555555; }
#tabs ul.wooTabs li a { font:normal 11px/2em “Helvetica Neue”, Helvetica, sans-serif;color:#555555; }
ul.nav li a, #navigation ul.rss a { font:normal 18px/1em “Gill Sans”, “Gill Sans MT”, Calibri, sans-serif;color:#fffcfc; }
#navigation ul.nav > li a:hover, #navigation ul.nav > li:hover a, #navigation ul.nav li ul li a { color:#faf6f5!important; }
#navigation ul.nav > li a:hover, #navigation ul.nav > li:hover, #navigation ul.nav li ul {background-color:#f73c08!important}
#navigation ul.nav li ul { border: 0px solid #dbdbdb; }
#navigation ul.nav > li > ul { left: 0; }
#navigation ul.nav > li { border-right: 3px solid #dbdbdb; }#navigation ul.nav li.current_page_item a, #navigation ul.nav li.current_page_parent a, #navigation ul.nav li.current-menu-ancestor a, #navigation ul.nav li.current-cat a, #navigation ul.nav li.current-menu-item a { background-color:#fa3205; }
#navigation ul.nav li.current_page_item a, #navigation ul.nav li.current_page_parent a, #navigation ul.nav li.current-menu-ancestor a, #navigation ul.nav li.current-cat a, #navigation ul.nav li.current-menu-item a { color:#fcf9f9; }
#navigation { box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; }#navigation ul li:first-child, #navigation ul li:first-child a { border-radius:6px 0 0 6px; -moz-border-radius:6px 0 0 6px; -webkit-border-radius:6px 0 0 6px; }
#navigation {background:#345903;border-top:2px solid #dbdbdb;border-bottom:0px solid #dbdbdb;border-left:0px solid #dbdbdb;border-right:0px solid #dbdbdb;border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px;}
#top, #top ul.nav li ul li a:hover { background:#136e12;}
#top ul.nav li a:hover, #top ul.nav li.current_page_item a, #top ul.nav li.current_page_parent a,#top ul.nav li.current-menu-ancestor a,#top ul.nav li.current-cat a,#top ul.nav li.current-menu-item a,#top ul.nav li.sfHover, #top ul.nav li ul, #top ul.nav > li:hover a, #top ul.nav li ul li a { color:#00010a!important;}
#top ul.nav li a:hover, #top ul.nav li.current_page_item a, #top ul.nav li.current_page_parent a,#top ul.nav li.current-menu-ancestor a,#top ul.nav li.current-cat a,#top ul.nav li.current-menu-item a,#top ul.nav li.sfHover, #top ul.nav li ul, #top ul.nav > li:hover { background:#f04208;}
#top ul.nav li a { font:normal 12px/1.6em “Gill Sans”, “Gill Sans MT”, Calibri, sans-serif;color:#ddd; }
#footer, #footer p { font:normal 13px/1em “Gill Sans”, “Gill Sans MT”, Calibri, sans-serif;color:#030000; }
#footer {background-color:#91918c;border-top:1px solid #dbdbdb;border-bottom:0px solid ;border-left:0px solid ;border-right:0px solid ;border-radius:0px; -moz-border-radius:0px; -webkit-border-radius:0px;}
.magazine #loopedSlider .content h2.title a { font:bold 24px/1em Gill Sans MT, Gill Sans MT;color:#ffffff; }
.magazine #loopedSlider .content .excerpt p { font:normal 12px/1.5em Gill Sans MT, Gill Sans MT;color:#cccccc; }
.business #loopedSlider .content h2 { font:bold 24px/1em “Gill Sans”, “Gill Sans MT”, Gill Sans MT, Gill Sans MT;color:#ffffff; }
.business #loopedSlider .content h2.title a { font:bold 24px/1em “Gill Sans”, “Gill Sans MT”, Gill Sans MT, Gill Sans MT;color:#ffffff; }
#wrapper .business #loopedSlider .content p { font:normal 18px/1.5em “Gill Sans”, “Gill Sans MT”, Gill Sans MT, Gill Sans MT;color:#080008; }
.archive_header h1 { font:bold 18px/1em Gill Sans MT, Gill Sans MT;color:#222222; }
.archive_header {border-bottom:1px solid #e6e6e6;}
</style>

<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame –>
<meta http-equiv=“X-UA-Compatible” content=“IE=edge,chrome=1” />

<!-- Mobile viewport scale –>
<meta content=“initial-scale=1.0; maximum-scale=1.0; user-scalable=yes” name=“viewport”/>
<style type=“text/css” media=“print”>#wpadminbar { display:none; }</style>
<style type=“text/css” media=“screen”>
html { margin-top: 28px !important; }
* html body { margin-top: 28px !important; }
</style>

&lt;script type="text/javascript"&gt;
jQuery(window).load(function() {
	var args = {};
	args.animation = 'slide';
	args.slideshow = true;

	args.slideshowSpeed = 8000;
	args.animationSpeed = 600;
	args.controlNav = true;

	args.pauseOnHover = false;
	args.smoothHeight = true;
	jQuery( '#loopedSlider' ).flexslider( args );
	jQuery( '#loopedSlider a.flex-prev, #loopedSlider a.flex-next' ).addClass( 'icon' );

    jQuery( '#loopedSlider .flex-control-nav' ).wrap( '&lt;div class="pagination-wrap" /&gt;' );
});
&lt;/script&gt;

<!-- Woo Shortcodes CSS –>
<link href=“functions/shortcodes.css” rel=“stylesheet” type=“text/css” />

<!-- Custom Stylesheet –>
<link href=“css/canvascustom.css” rel=“stylesheet” type=“text/css” />
</head>
<body class=“home page page-id-4 page-template page-template-template-biz-php logged-in admin-bar gecko has-lightbox boxed-layout one-col width-1120 one-col-1120”>
<div id=“wrapper”>

&lt;div id="header" class="col-full"&gt;


	&lt;div id="logo"&gt;
	&lt;a href="index.html" title="beyondeu"&gt;&lt;img src="images/beulogo42.png"/&gt;&lt;/a&gt;

<h1 class=“site-title”><a href=“index.html”></a></h1>

	&lt;/div&gt;&lt;!-- /#logo --&gt;

    &lt;h3 class="nav-toggle icon"&gt;&lt;a href="#navigation"&gt;Navigation&lt;/a&gt;&lt;/h3&gt;


&lt;/div&gt;&lt;!-- /#header --&gt;



	&lt;div id="navigation" class="col-full"&gt;
			&lt;ul id="main-nav" class="nav fl"&gt;&lt;li id=""&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;

<li id=“menu-item-40” class=“”><a href=“about-us.html”>About Us</a></li>
<li id=“menu-item-58” class=“”><a href=“vision.html”>Vision</a></li>
<li id=“menu-item-62” class=“”><a href=“contact-us.html”>Contact Us</a></li>
</ul>
</div><!-- /#navigation –>

&lt;!-- #content Starts --&gt;
      &lt;div id="content" class="col-full business"&gt;

	    	&lt;div id="main-sidebar-container"&gt;

				&lt;div id="loopedSlider" class="has-pagination" style="height:auto;"&gt;
	&lt;ul class="slides"&gt;
	&lt;li id="slide-1" class="slide" style=""&gt;
	&lt;img src="images/Fotolia_41415849_M_mod.jpg" alt="doc" class="image"    /&gt;&lt;div class="content"&gt;
	&lt;div class="excerpt"&gt;&lt;h2 style="text-align: left;"&gt;Connecting Patients to their Health Ecosystem&lt;/h2&gt;
	&lt;/div&gt;
	&lt;/div&gt;
	&lt;/li&gt;
	&lt;li id="slide-2" class="slide" style=""&gt;
	&lt;img src="images/Fotolia_40160881_M_mod.jpg" alt="wheel" class="image"/&gt;&lt;div class="content"&gt;
	&lt;div class="excerpt"&gt;&lt;h2&gt;&lt;span style="color: #ffffff;"&gt;Connecting Patients to their Health Ecosystem&lt;/span&gt;&lt;/h2&gt;
	&lt;/div&gt;
	&lt;/div&gt;
	&lt;/li&gt;
	&lt;/ul&gt;&lt;!-- /.slides --&gt;

</div><!-- /#loopedSlider –>
<!-- #main Starts –>
<div id=“main”>
<div class=“post-4 page type-page status-publish hentry”>
<div class=“entry”>
</div><!-- /.entry –>
<div class=“fix”></div>
</div><!-- /.post –>

        &lt;/div&gt;&lt;!-- /#main --&gt;


	&lt;/div&gt;&lt;!-- /#main-sidebar-container --&gt;


&lt;/div&gt;&lt;!-- /#content --&gt;

&lt;div id="footer" class="col-full"&gt;



	&lt;div id="copyright" class="col-left"&gt;
		&lt;p&gt;&lt;p&gt;Copyright &copy 2012 Beyond eU. All rights reserved.&lt;/p&gt;&lt;/p&gt;		&lt;/div&gt;

	&lt;div id="credit" class="col-right"&gt;
		&lt;p&gt;&lt;p&gt; &lt;/p&gt;&lt;/p&gt;		&lt;/div&gt;

&lt;/div&gt;&lt;!-- /#footer  --&gt;



&lt;/div&gt;&lt;!-- /#wrapper --&gt;

&lt;div class="fix"&gt;&lt;/div&gt;&lt;!--/.fix--&gt;

&lt;!--[if lt IE 9]&gt;

<script src=“js/respond-ie.js”></script>
<![endif]–>
<script type=‘text/javascript’ src=‘js/admin-bar.js’></script>
<script type=“text/javascript”>
(function() {
var request, b = document.body, c = ‘className’, cs = ‘customize-support’, rcs = new RegExp(‘(^|\\s+)(no-)?’+cs+‘(\\s+|$)’);

		request = true;

		b[c] = b[c].replace( rcs, '' );
		b[c] += ( window.postMessage && request ? ' ' : ' no-' ) + cs;
	}());
&lt;/script&gt;

			&lt;/body&gt;

</html>

seoexpertrizwan. plz see the code above. thanks.