auto width overlay div not working in IE - css

Question

I have a gallery page that starts off as a page of thumbnails. When you click a thumbnail, it populates a hidden div and then shows the div. The display div has an auto width based on the image and a max-height of 700px with overflow: auto;.
This works fine everywhere except IE. In IE, the div shows up as a thin line, and the image, I finally found, was showing up mostly off of the left side of the screen.
I've included the HTML and CSS below. You'll see some Angular variables in there. That's stuff that's automatically populated by the JS.
HTML:
<div id="siteCover" ng-show="picID > 0">
</div>
<div id="outerPictureDisplay" ng-show="picID > 0">
<div id="innerPictureDisplay">
<div id="divClose" class="floatRight" ng-click="picID = 0;">Close</div>
<div id="picNavPrev" ng-click="picturePop({{prevID}});"><img src="images/arrowLeft.png" /></div>
<div id="picNavNext" ng-click="picturePop({{nextID}});"><img src="images/arrowRight.png" /></div>
<img src="images/photos/{{thisPic.image}}" id="displayedImage" />
<p ng-show="thisPic.title != ''"><b>{{thisPic.title}}</b></p>
<p ng-show="thisPic.desc != ''">{{thisPic.desc}}</p>
</div>
</div>
CSS:
#outerPictureDisplay{
z-index: 500;
top: 50px;
left: 50%;
padding: 0px;
position: fixed;
}
#innerPictureDisplay{
left: -50%;
min-height: 200px;
height: auto;
max-height: 700px;
width: auto;
padding: 0px;
position: relative;
overflow: auto;
background-color: #lightcolor;
.bordered-dark;
.rounded;
& img{
margin: 0px;
padding: 0px;
}
}
#divClose{
font-size: 1em;
background-color: #darkcolor;
color: #lighttextcolor;
display: inline-block;
padding: 5px;
right: 0;
position: absolute;
}
#picNavPrev{
display: inline-block;
padding:0;
top:40%;
float: left;
height: auto;
position: absolute;
}
#picNavNext{
display: inline-block;
padding:0;
top:40%;
float: right;
right: 0;
height: auto;
position: absolute;
}
#siteCover{
width: 100%;
height: 100%;
background:rgba(0, 0, 0, 0.7);
z-index: 450;
position: fixed;
top: 0;
left: 0;
}
How do I make this work as intended in IE as well?

Answer 1

You can create a stylesheet for IE only:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie-stylesheet.css" />
<![endif]-->
Or you can make a stylesheet for a specific version of IE,for example i want to make a specific stylesheet for version 7 :
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->
Just replace the number between the brackets with the version number that you have.