navigation in IE stops working when I add first-letter CSS - css

Question

I'm working my websites navigation and wanted to style the first letter of my slide nav bar.
It works fine in Chrome and Safari, but I have run into two errors in IE and Firefox.
In Firefox, the first-letter styling does not work, however this problem is not that critical, as the nav still functions.
The main question I have is for IE. In Explorer, the navigation functions smoothly when there is no CSS for first-letter styling. However, as soon as I add in this code, the navigation no longer works.
If anyone has any tips, I would greatly appreciate the feedback.
(please open in chrome or safari first to see how it is suppose to look/function)
click here to view code
HTML:
<div id="slide"> +PROJECTS
<li>community</li>
<li>high rise</li>
<li><a href="#" >mid rise</a></li>
<li>low rise</li>
<li>commercial</li>
<li>institutional</li>
<div id="slide2"> +COMPANY
<li>company</li>
<li>awards</li>
<li>people</li>
<li>contact</li></div>
CSS
#slide {
height: 15px;
width: 90px;
transition: width 500ms ease;
-moz-transition: width 500ms ease;
-ms-transition: width 500ms ease;
-o-transition: width 500ms ease;
-webkit-transition: width 500ms ease;
overflow: hidden;
float:right;
color:#808285;
font-size:14px;}
#slide:hover {
color:#000; }
#slide li {
display: inline;
padding-left: 10px;
font-size:12px; }
#slide2 {
height: 15px;
width: 90px;
transition: width 500ms ease;
-moz-transition: width 500ms ease;
-ms-transition: width 500ms ease;
-o-transition: width 500ms ease;
-webkit-transition: width 500ms ease;
overflow: hidden;
float:right;
color:#808285;
font-size:14px; }
#slide2:hover {
color:#000; }
#slide2 li {
display: inline;
padding-left: 10px;
font-size:12px; }
#slide:first-letter {
color:#000; }
#slide:hover:first-letter {
color:#f00; }
#slide2:first-letter {
color:#000; }
#slide2:hover:first-letter {
color:#f00; }
JQUERY
document.getElementById('slide').addEventListener('click', function () {
(this.style.width == '90px' || this.style.width == '') ? this.style.width = '563px' : this.style.width = '90px'; }, false);
document.getElementById('slide2').addEventListener('click', function () {
(this.style.width == '90px' || this.style.width == '') ? this.style.width = '291px' : this.style.width = '90px'; }, false);

Answer 1

While I generally don't subscribe to the 2-column colon methodology, I'm reading this in MSDN's docs: Beginning with Internet Explorer 9, the ::first-letter pseudo-element requires two colons, though the one-colon form is still recognized and behaves identically to the two-colon form. Microsoft and the World Wide Web Consortium (W3C) encourage web authors to use the two-colon form of the ::first-letter pseudo-element. For more information, see the Pseudo-elements section of the W3C's CSS3 Selectors specification.