I have been stuck on this for the past week and can't find a solution. I have been developing my site with chrome, but have noticed that the borders and outlines don't work with IE. I have tried replacing the html doc type and the beginning of the pages as other people had this fix it for them, however it didn't work for me. Anyway, here is the code for one of my pages:
HTML:
<html>
<head>
<title>Project Star in a Jar</title>
<link rel="stylesheet" type="text/css" href="default.css"/>
</head>
<link rel="shortcut icon" href= "images/favicon.png"/>
<link rel="icon" href="images/favicon.png" type="image/x-icon">
<body>
<div class="wrapOverall">
<div class="header">
<div class="logo">
<img src="images/starJar.png" href="index.php" style="width:100px;height:100px">
<div class="moto">
<h1> Project Star in a Jar</h1>
</div>
</div>
<div class="nav_main">
<ul>
<!--These are all the tabs at the top of the page <li><a href="link">title displayed on page</a></li>-->
<li><a href="index.php">Home</a></li>
<li><a href="tutorial/intro.php">Tutorial</a></li>
<li><a href="videos.php">Videos</a></li>
<li><a href="resources.php">Other Resources</a></li>
</ul>
</div>
</div>
<div class="Content">
<div class="contentResource">
<div class="resourceTitle">
<h2>Resources</h2>
</div>
<div class="resourceLinks">
<div class="webTitle">
<h3>Website Links</h3>
</div>
<ul>
<li><a href="http://www.iter.org" target="_blank">ITER (International Fusion Project)</a></li>
<li><a href="http://www.fusor.net" target="_blank">Fusor.net (Open Source Fusor Research Consortium) </a></li>
<li><a href="http://www.farnovision.com/chronicles/fusion/vassilatos.html" target="_blank">FarnoVision.com (Information About Farnsworth)</a></li>
<li><a href="http://www.kronjaeger.com/hv-old/fusor/fusorIII/index.html#xray" target="_blank">Richard Hulls Fusor III Project (Homebuilt Fusion Project Log)</a></li>
<li><a href="http://www.rtftechnologies.org/physics.htm" target="_blank">RTF Technologies (Several Homebuilt Fusion Projects)</a></li>
<li><a href="http://www.plasma.inpe.br/LAP_Portal/LAP_Site/Text/Fusion_Plasma.htm" target="_blank">Associated Plasma Laboratory (Information About Plasma)</a></li>
</ul>
</div>
<div class="resourceDocs">
<div class="docTitle">
<h3>Documents</h3>
</div>
<ul>
<li><a href="#">PDF Tutorial: Star in a Jar </a></li>
<li><a href="https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=0CCIQFjAA&url=http%3A%2F%2Ffusor.net%2Fnewbie%2Ffiles%2FFUSORREF.DOC&ei=ArkkVJ-qN8zgsASw24DABg&usg=AFQjCNGbzj75ePypkL_TZ5u_hwdVceXmMQ&sig2=J4dBsxChmf4L7YWFHs7bSg&bvm=bv.76247554,d.cWc" target="_blank">DOC Fusor & Fusion References (Fusor.net)</a></li>
<li><a href="http://www.fusor.net/newbie/files/Ligon-QED-IE.pdf" target="_blank">PDF The World's Simplest Fusion Reactor, and How to Make it Work</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer">
<a>
Copyright @ 2014 Project Star In A Jar. All Rights Reserved.<br>
Website and Content Created by Joshua Hess <a target="blank" href="http://www.youtube.com/s28400"><u>(s28400)</u></a>
</a>
</div>
</body>
</html>
CSS:
/*########################*/
/* General HTML Tag Rules */
/*########################*/
body {
background-position:top;
background-attachment:fixed;
background-image: url('images/bg.jpg');
background-size: cover;
}
/*##############################*/
/* General Template Class Rules */
/*##############################*/
.wrapOverall {
width: 1100px;
margin-left: auto;
margin-right: auto;
border:2px solid#EE8E08;
background-image: url('images/bg5.jpg');
background-repeat: repeat-y;
}
.logo{
margin-top: -3px;
margin-left: -3px;
}
.logo img {
border:3px solid#EE8E08;
}
.moto{
margin-left: 110px;
margin-top: -120px;
color: #FFFFFF;
text-shadow: 0 0 15px #CC2EFA;
}
.footer {
text-align: center;
margin-top:20px;
font-size:14px;
color: #FFFFFF;
width: 1100px;
margin-left: auto;
margin-right: auto;
}
.footer a {
color: inherit;
text-decoration: none;
}
/*##########################*/
/* General Navigation Rules */
/*##########################*/
.header {
height: 100px;
position: relative;
}
.headerHome {
height: 100px;
padding-bottom: 90px;
position: relative;
}
.nav_main {
margin-top: 10px;
margin-left:96px;
background-color: #D8D8D8;
}
.nav_main ul {
margin:0px;
padding:0px;
padding:5px 18px;
}
.nav_main ul li {
margin:0px;
padding:px;
list-style:none;
display:inline;
}
.nav_main ul li a {
margin:0px;
padding:5px 18px;
color:#000000;
text-decoration:none;
font-weight:900;
font-size:17px;
text-transform:normal;
outline:2px solid#00000;
}
.nav_main ul li a:hover{
text-decoration:underline;
color:#00000;
background-color:#EE8E08;
}
/*############################*/
/* General Resource Formatting*/
/*############################*/
.contentResource {
width:714px;
margin-left: 200px;
text-indent: 50px;
border: 1px solid#FFFFFF;
margin-top:30px;
margin-bottom:30px;
}
.resourceTitle {
text-align: center;
margin-left:-45px;
color: #FFFFFF;
}
.webTitle {
color: #FFFFFF;
}
.docTitle {
color: #FFFFFF;
}
.resourceLinks ul {
list-style: none;
margin-left:-30px;
}
.resourceDocs ul {
list-style: none;
margin-left:-30px;
}
.resourceLinks ul li a {
color:#EE8E08;
}
.resourceDocs ul li a{
color:#EE8E08;
}
After fiddling with the code for a bit, I figured it out. I didn't have a space between the border solid and the color code.
This:
border: 1px solid#FFFFFF;
Needed to look like this:
border: 1px solid #FFFFFF;
Hope this helps someone else who is having the same problem!