Nav bar not working in explorer 11

I'm a beginner with responsive sites and having a problem with this one. Everything shows up fine for me on my Mac, iPad and iPhone, but apparently the nav bar is going blank on a Windows machine in Explorer 11 (11.0.25 to be exact). What am I missing? I've tried researching but haven't been able to figure out the problem and can't replicate it since it all looks fine on my end. The site is at

( My contact says the only reason the Home button is showing up in this screenshot is she is hovering over it, otherwise everything is blank.


<!doctype html>
<html><!-- InstanceBegin template="/Templates/index.dwt" 
codeOutsideHTMLIsLocked="false" -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="|Lato|Oxygen">
<link rel="stylesheet" type="text/css" href="boats2.css" />
* {
box-sizing: border-box;}
.row:after {
content: "";
clear: both;
display: block;}
<!-- InstanceBeginEditable name="Based on a True Story" -->
<title>Based on a True Story</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->


<!-- begin header -->
<div class="header">
<a href="index.html"><img src="images/header_2016.jpg" width="3300" height="446" alt=""/></a>
<!-- end header -->
<!-- begin nav menu -->
<nav class="clearfix" id="nav">
<ul class="clearfix">
<li><a href="index.html">Home</a></li>
<li><a href="schedule.html">Schedule</a></li>
<li><a href="register.html">Register</a></li>
<li><a href="presenters.html">Presenters</a></li>
<li><a href="travel.html">Location/Travel</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="previous.html">Previous Years</a></li>
<!-- end nav menu -->

/*** showing the menu ***/

<script src=""></script>
<script type="text/javascript">
$("#nav").addClass("js").before('<div id="menu">&#9776;</div>');
	if(window.innerWidth > 768) {

<!-- begin content area -->
<div class="TextOnlyContainer" style="margin: 0 auto"><!-- InstanceBeginEditable name="EditRegion3" -->
<!-- start left column -->

<div style="float:left; width:75%"><h2>Reporting Real Life, Telling True Stories</h2>
<p align="left" class="text">Join us once again in Columbia, Missouri, from March 2-4, 2016, as a dynamic group of filmmakers, journalists, and film critics engage in a series of thoughtful and energetic discussions about telling true stories in film and journalism. The fifth year of <em>Based on a True Story: The Intersection of Documentary Film and Journalism</em> will again set about analyzing the intersection of nonfiction storytelling forms, advocacy in that storytelling, and the cultural and ethical implications of the convergence between journalism and documentary film.</p>
<p class="text">An interdisciplinary group of scholars at the University of Missouri — sponsored by the Mizzou Advantage Program — will be partnering again with the True/False Film Fest to continue our tradition of light-hearted yet serious-minded discussions about documentary film. Conference attendees will spend time engaging with some of the top thinkers, purveyors, and practitioners of documentary film. It will be the perfect run-up to the 12th annual True/False Film Festival, March 3–6, 2016!</p></div>
<!-- end left column -->
<!-- start right column -->
<div style="float:right; background-color:#ccc; padding:1em;">
<a href=""><h5 style="text-align:center">True/False Film Fest</h5>
  <img src="images/tf2016.jpg" alt="True/False Film Fest" width="175" height="212" border="0" /></a><a href="ValentineRoad.html"></a>
<!-- end right column -->
<div style="clear:both"></div>
<!-- Begin DWUser_EasyRotator -->
<script type="text/javascript" src=""></script>
<div class="dwuserEasyRotator" style="width: 100%; height: 400px; position:relative; text-align: center; margin:0 auto" data-erconfig="{autoplayEnabled:true, lpp:'102-105-108-101-58-47-47-47-85-115-101-114-115-47-87-111-111-100-121-47-68-111-99-117-109-101-110-116-115-47-69-97-115-121-82-111-116-97-116-111-114-80-114-101-118-105-101-119-47-112-114-101-118-105-101-119-95-115-119-102-115-47', wv:1}" data-ername="slideshow" data-erResponsiveRatio="{600:400}" data-erTID="{jz42jpztf5098200863541}">
<div data-ertype="content" style="display: none;"><ul data-erlabel="Main Category">
	<span class="text"><img class="main" src="images/slideshow/slide05.jpg" /> 
<img class="thumb" src="images/slideshow/slide05.jpg" /></span>
	<span class="text"><img class="main" src="images/slideshow/slide04.jpg" />
 <img class="thumb" src="images/slideshow/slide04.jpg" /></span>
	<span class="text"><img class="main" src="images/slideshow/slide03.jpg" /> <img class="thumb" src="images/slideshow/slide03.jpg" /></span>
	<span class="text"><img class="main" src="images/slideshow/slide02.jpg" /> <img class="thumb" src="images/slideshow/slide02.jpg" /></span>
	<span class="text"><img class="main" src="images/slideshow/slide01.jpg" /> <img class="thumb" src="images/slideshow/slide01.jpg" /></span>
<div data-ertype="layout" data-ertemplatename="NONE" style="">		<div class="erimgMain" style="position: absolute; left:0;right:0;top:0;bottom:0;" data-erConfig="{__numTiles:3, scaleMode:'scaleDown', imgType:'main', __loopNextButton:false, __arrowButtonMode:'rollover'}">
		<div class="erimgMain_slides" style="position: absolute; left:0; top:0; bottom:0; right:0;">
			<div class="erimgMain_slide">
				<div class="erimgMain_img" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0;"></div>
<div class="erimgMain_arrowLeft" style="position:absolute; left: 10px; top: 50%; margin-top: -15px;" data-erConfig="{image:'circleSmall', image2:'circleSmall'}"></div>
<div class="erimgMain_arrowRight" style="position:absolute; right: 10px; top: 50%; margin-top: -15px;" data-erConfig="{image:'circleSmall', image2:'circleSmall'}"></div>
</div><div class="erabout erFixCSS3" style="color: #FFF; text-align: left; background: #000; background:rgba(0,0,0,0.93); border: 2px solid #FFF; padding: 20px; font: normal 11px/14px Verdana,_sans; width: 300px; border-radius: 10px; display:none;"> This <a style="color:#FFF;" href="" target="_blank">jQuery slider</a> was created with the free <a style="color:#FFF;" href="" target="_blank">EasyRotator</a> software from <br />
<br />
Use WordPress? The free <a style="color:#FFF;" href="" target="_blank">EasyRotator for WordPress</a> plugin lets you create beautiful <a style="color:#FFF;" href="" target="_blank">WordPress sliders</a> in seconds. <br />
<br />
<a style="color:#FFF;" href="#" class="erabout_ok">OK</a></div>
Rotator powered by <a href="">EasyRotator</a>, a free and easy jQuery slider builder from  Please enable JavaScript to view.
<script type="text/javascript">/*Avoid IE gzip bug*/(function(b,c,d){try{if(!b[d]){b[d]="temp";var a=c.createElement("script");a.type="text/javascript";a.src="";c.getElementsByTagName("head")[0].appendChild(a)}}catch(e){alert("EasyRotator fail; contact support.")}})(window,document,"er_$144");</script>
<!-- End DWUser_EasyRotator -->
<!-- InstanceEndEditable -->
<!-- footer -->
<div class="Footer" style="padding:0">
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<td width="273" align="center" valign="middle"><p><img src="images/MU_Advantage_sm.jpg" width="130" height="75" alt="Mizzou Advantage" /></p>
<p><a href="">Mizzou Advantage</a></p></td>
<td colspan="2" align="center" valign="middle" ><p><img src="images/Murraylogo3.jpg" alt="T/F logo" width="86" height="86" border="0" />&nbsp;</p>
<p>Jonathan B. Murray <br /> 
Center for Documentary Journalism</p></td>
<td width="273" align="center" valign="middle"><p><a href=""><img src="images/tf_logo_sm.jpg" alt="T/F logo" width="75" height="75" border="0" /></a>&nbsp;</p>
<p><a href="">True/False Film Fest</a></p></td>
<td height="40" colspan="2" align="center"><a href="">Missouri Humanities Council</a></td>
<td height="40" colspan="2" align="center"><a href="">Univ. of Missouri <br />
Department of German &amp; Russian Studies</a></td>
<td height="40" colspan="2" align="center"><a href="">Missouri School of Journalism</a></td>
<td height="40" colspan="2" align="center"><a href="">Chancellor's Distinguished Visitors Program</a></td>
<td height="40" colspan="2" align="center"><a href="">Donald W. Reynolds Journalism Institute</a></td>
<td height="40" colspan="2" align="center"><p><a href="">Department of Women's and Gender Studies</a></p></td>
<td height="40" colspan="4" align="center"><a href="">Univ. of Missouri Film Studies Program</a></td>
<table width="100%" border="0" cellspacing="0" cellpadding="10">
<td style="text-align:center">MU Conference Office © 2016, University of Missouri</td>
<!-- end Footer -->

</div>  <!-- end TextOnlyContainer -->

<!-- InstanceEnd --></html>


Seems to be a problem with the background going white when the link is visited

Try to get rid of the a:visited selector altogether, it is not needed

#nav a:link, a:visited {


#nav a {
Posted on by Aziz