Styles not showing up in IE 11 but show up perfect in Chrome and Firefox

Hello. I have a simple .net site with just a few pages and links.  The problem is that the page shows up fine in Chrome and Firefox but in IE 11 it isn't showing my CSS styles.  Seems like it isn't reading my CSS files.  

Here is my head where I link to bootstrap and my stylesheets.
<head runat="server">
    <title></title>
    <link href="/igc.ms.styles.css?ver=1" rel="stylesheet" type="text/css" />
    <link href="/core.css?ver=1" rel="stylesheet" type="text/css" media="all" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous" />
    <link rel="stylesheet" href="css/styles.css" media="screen" />
    <link href="https://fonts.googleapis.com/css?family=Shrikhand" rel="stylesheet" />
    <script type="text/javascript" src="/js.js?ver=1"></script>
</head>

This is my header and nav bar that are on every page.  None of these styles will display in IE 11
<div style="width: 100%; height: 169px; background-image: url('http://localhost:51150/images/headerBg.gif');">
   <table cellpadding="0" cellspacing="0" border="0" width="960" align="center" runat="server" id="Table2" style="">
      <tr>
         <td style="height: 131px;" valign="top">
            <a href="/" class="noBorder"><img src="/images/logo.gif" height="112" width="340" alt="The Carolina Institute for Developmental Disabilities at UNC" border="0" /></a>
         </td>
         <td style="height: 131px;" align="right" valign="middle" class="">
             &nbsp;</td>
      </tr>
      <tr>
         <td style="height: 38px;" colspan="2">
            <table border="0" cellpadding="0" cellspacing="0" width="960" style="height: 38px;">
               <tr>
                  <td width="2"><img src="/images/menuDivider.gif" alt="" border="0" width="2" height="38" /></td>
                  <td runat="server" id="tdHome" class="menu" valign="middle"><a href="/" class="noBorder" style="padding: 9px 8px 0px 8px;"><img src="/images/home.gif" width="23" height="16" alt="Home" border="0" /></a></td>
                  <td width="2"><img src="/images/menuDivider.gif" alt="" border="0" width="2" height="38" /></td>
                  <td runat="server" id="tdServices" class="menu">
                     <a href="/Services" class="noBorder">Services</a>
                  </td>
                  <td width="2"><img src="/images/menuDivider.gif" alt="" border="0" width="2" height="38" /></td>
                  <td runat="server" id="tdEducation" class="menu">
                     <a href="/Education" class="noBorder">Education</a>
                  </td>
                  <td width="2"><img src="/images/menuDivider.gif" alt="" border="0" width="2" height="38" /></td>
                  <td runat="server" id="tdResearch" class="menu">
                     <a href="/Research" class="noBorder">Research</a>
                  </td>
                  <td width="2"><img src="/images/menuDivider.gif" alt="" border="0" width="2" height="38" /></td>
                  <td runat="server" id="tdFamilies" class="menu">
                     <a href="/Families" class="noBorder">For Families</a>
                  </td>
                  <td width="2"><img src="/images/menuDivider.gif" alt="" border="0" width="2" height="38" /></td>
                  <td runat="server" id="tdAbout" class="menu">
                     <a href="/About" class="noBorder">About Us</a>
                  </td>
                  <td width="2"><img src="/images/menuDivider.gif" alt="" border="0" width="2" height="38" /></td>
                  <td runat="server" id="tdSupport" class="menu">
                     <a href="/Support" class="noBorder">Support the Institute</a>
                  </td>
                  <td width="2"><img src="/images/menuDivider.gif" alt="" border="0" width="2" height="38" /></td>
                  <td runat="server" id="tdDirectory" class="menu">
                     <a href="/Directory" class="noBorder">Directory</a>
                  </td>
                  <td width="2"><img src="/images/menuDivider.gif" alt="" border="0" width="2" height="38" /></td>
                  <td runat="server" id="tdContact" class="menu">
                     <a href="/Contact" class="noBorder">Contact Us</a>
                  </td>
                  <td width="2"><img src="/images/menuDivider.gif" alt="" border="0" width="2" height="38" /></td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
</div>

I don't know why all this shows up fine in Chrome and Firefox but not IE 11. Seems like IE 11 is stripping all the styles from the page.
cdlcidditAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Jan LouwerensSoftware EngineerCommented:
You showed your html, but not your css. Maybe you have something in your css file that isn't working in IE (such as a syntax error, or an invalid comment).

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
cdlcidditAuthor Commented:
Hello @Jan Louwerens.  Thanks for the response.  I'm sorry.  I didn't show it because my CSS styles are showing up in other browsers.  Just not IE 11.  Here is my CSS. There are a few files. Here is styles.css:
/*.page-header {
    background: #6995CB;
}*/

.header {
    padding: 20px;
    margin-bottom: 20px;
    color: #333;
    background: #6995CB;
}

li {
    float: none;
    display: inline-block;
}

.heading {
    font-family: 'Shrikhand', cursive;
}

Open in new window


This is core.css.  This is where majority of my styles for the entire site live.
/* TAG REDEFS */
* 
{
   font-family: "Trebuchet MS", Verdana, Arial;
   line-height: 160%;
}

BODY  
{
   background-color: #e5e5e5; 
   font-size: 81.25%;   
   margin:0; padding:0; 
   border:none; 
   
}

input, select, th, td, textarea 
{
   font-size: 1em;
}


a { text-decoration: none; color: #0000ff; border-bottom:1px dotted #c9c9c9;}
a:hover { text-decoration: none; color: #666666; border-bottom:1px solid #006699; }
a:link { text-decoration: none; color: #0000ff; }
a:link:hover { text-decoration: none; color: #666666; }
a:visited { text-decoration: none; color: #006600; }
a:visited:hover { text-decoration: none; color: #666666; }
a:active { text-decoration: none; color: #660000; }
a:active:hover { text-decoration: none; color: #666666; }

a.flchart:hover {color: #FF0000;}
a.flchart:visited {color: #FF0000; }
a.flchart:active:hover {color: #FF0000; }


.headerBtn { background-image: url(/images/headerBtnBg.gif); height: 16px; padding: 5px; width: 54px; text-align: center; float: left; margin-right: 6px; }
.headerBtn a { color: #0081CF; font-size: 11px; font-weight: bold; text-decoration: none; border: none; }

/* MAIN INTERFACE */
.modalBackground {	background-color: #000; filter:alpha(opacity=72);opacity:0.72; }

.fxbox { border: solid 1px #99ccff; padding: 10px; margin-top: 25px; }
.w340 { width: 340px; }

.menu 
   { 
      font-size: 14px; font-weight: bold; text-decoration:none; border: none; vertical-align: top; text-align: center; background-image: url(/images/menuBack.gif); padding-top: 0px;
   }
.menu:hover 
   { 
      background-position: 0px 36px; 
   }
.menu a, .menu a:visited 
   { 
      display: block; padding: 8px; border: none; text-decoration: none; color: #fff 
   }
.menu a:hover, .menu a:visited:hover 
   { 
      display: block; padding: 8px; border: none; text-decoration: none; color: #ffff99 
   }

.menu_selected 
   { 
      font-size: 13px; font-weight: bold; text-decoration:none; border: none; vertical-align: top; text-align: center; 	background-image: url(/images/menuBg_selected.gif); background-repeat: no-repeat; background-position: center;  padding-top: 0px;
   }
.menu_selected a, .menu_selected a:visited 
   { 
      display: block; padding: 8px; border: none; text-decoration: none; color: #fff; 
   }
.menu_selected a:hover, .menu a:visited:hover 
   { 
      display: block; padding: 8px; border: none; text-decoration: none; color: #fff; 
   }


.tabs ul {
   list-style: none;
	padding:0;
	margin:0;
}
.tabs li {
   float: left;
	display: inline;
	border: none; 
	margin-right: 4px;	
}
.tabs li a {
	text-decoration: none;
	display: block;	
	color: #fff;
	text-align: center; 
	font-size: 15px; 
	font-weight: bold;	
	background: #999;
	padding: 4px 12px 4px 12px;
	border-bottom: solid 2px #fff;
}
.tabs a:hover {
	background: #0066cc;
	color: #fff;
	}
.tabs .selected {
   background-color: #e5e5e5;
	border: solid 1px #ccc;
	border-bottom-color: #e5e5e5;
}
.tabs .selected a {   
	background-color: #e5e5e5;
	color: #666;
	border-bottom: none;
	}

/* CONTENT */

.noBorder {border: none; text-decoration: none; }
.noBorder:hover {border: none; text-decoration: none; }
.noBorder a{border: none; text-decoration: none; }
.noBorder a:hover {border: none; text-decoration: none; }


h1 {  color: #006699; text-decoration: none; font-size: 2em; font-weight: bold; padding: 0px; margin: 0px;}

h2 {  color: #006699; text-decoration: none; font-size: 1.5em; line-height: 2.5em; padding: 0px; margin: 0px; }

h3 {  color: #333; text-decoration: none; font-size: 1.2em; line-height: 1.5em; font-weight: bold;  padding: 0px; margin: 0px; }


.box_hlgt {}
.box_hlgt:hover { background-color: #ffffcc; }

.box_list { padding: 4px 6px 4px 6px; border-bottom: dashed 1px #aaa;  }

.box_lb
{
   background-color: #6699cc;
   padding: 6px;
}

.box_about
{
   background-color: #f0f0f0;
   padding: 12px;
   height: 86px;
}

.box_about2
{
   background-color: #f0f0f0;
   padding: 12px;
   height: 150px;
}

.box_wht
{
   background-color: #fff;
   padding: 3px;
}

.box_comment
{
   background-color: #D9F2FF;
   padding: 3px;
}

.box_gry 
{
   background-color: #f0f0f0;
   border: solid 1px #ccc;
   padding: 3px;
}

.box_ylw 
{
   background-color: #ffffcc;
   border: solid 1px #ffcc99;
   padding: 3px;
}

.box_red 
{
   background-color: #F0B2B3;
   border: solid 1px #cc0000;
   padding: 3px;
}

.row { background-color: #fff; }
.row_over { background-color: #f0f0f0; }
.row_selected { background-color: #ccc; }


hr
{
   margin-top: 20px;
   margin-bottom: 20px;
   border: solid 1px #333;
}

.commentP 
{
   margin: 4px 0px 0px 4px;
}

.commentDiv
{
   padding: 3px;
}

.commentDiv.scroll
{
   height: 100px;
   overflow: auto;
}

.popupCalendar .ajax__calendar_container {
    border:1px solid #999;
    background-color: #fff;
    color: black;
}

@media print {    
   .commentDivDisplay
      {
         padding: 3px;
      }
   .tableDisplay
      {
         border: solid 1px #999;
      }
   .tableDisplay tr td 
      {
         border: solid 1px #999;
       }
}

@media screen {
    .commentDivDisplay
      {
         padding: 3px;
         height: 64px;
         overflow: auto;
      }

}

.headerSubscribe { background-color: #54789a; padding: 5px; float: right; width: 415px; }

.rightBar { float: right; padding: 12px; padding-top: 36px; width: 250px; text-align: center; }
.leftBar { width: 650px; float: left; }


.pic { padding: 4px; border: solid 1px #ccc; border-right-color: #999; border-bottom-color: #999; margin: 0px 0px 20px 20px; }
.piccont {position:relative; width:100%; height:50px;}

.footerBtn { background-position: 0 0; background-repeat: no-repeat; height: 18px; width: 17px; }
.footerBtn a { text-decoration: none; border: none; }
.footerBtn:hover { background-position: 0px -18px }
.twitter { background-image: url(/images/footer_twitter.gif); }
.fb { background-image: url(/images/footer_fb.gif); }

.hmLnks a { color: #fff; border: none; }
.hmLnks a:hover, .hmLnks a:visited:hover { color: #ffffcc; }

.featurePic { padding: 4px; border: solid 1px #ccc; border-right-color: #999; border-bottom-color: #999; width: 80px; height: 80px; background-color: #fff; margin: 0px 10px 10px 0px; }
.featureDesc { width: 170px; }
.featureWrapper { border-bottom: dashed 1px #aaa; margin-bottom: 12px; padding-bottom: 12px; }




/*Styles for Community Talk Series Pages*/



/*Table Styles*/
    .Table
    {
        display: table;
        width: 100%;
    }
    .Title
    {
        display: table-caption;
        text-align: center;
        font-weight: bold;
        font-size: larger;
    }
    .Heading
    {
        display: table-row;
        font-weight: bold;
        text-align: center;
    }
    .Row
    {
        display: table-row;
        vertical-align: bottom;
    }
    .Cell
    {
        display: table-cell;
        border: 0px;
        border-width: thin;
        padding-left: 5px;
        padding-right: 5px;
        vertical-align: top;
    }
    .CellB
    {
        display: table-cell;
        border: solid;
        border-width: thin;
        padding-left: 5px;
        padding-right: 5px;
    }

Open in new window

cdlcidditAuthor Commented:
Hello @Jan Louwerens.  From reading your response and responding to you I figured out the problem.  For some reason I had
<div style="width: 100%; height: 169px; background-image: url('http://localhost:51150/images/headerBg.gif');">

Open in new window

for the header colors.  It wasn't showing up because I had to remove the localhost. I don't know why I had that in there but it was the problem.  IE can't read it from localhost.  So I changed it to
<div style="width: 100%; height: 169px; background-image: url('/images/headerBg.gif');">

Open in new window

And now it shows up in IE.
cdlcidditAuthor Commented:
It ended up being a syntax error just like Jan suggested.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
.NET Programming

From novice to tech pro — start learning today.