The !important; tag

I am working on an html file/CSS external style sheet Everything looks wonderful in chrome, firefox, and opera, however when viewing anything in internet explorer certain slices of the website are flush left when they should be centered, and i have my fonts missing on iphone and ipad devices.

does anyone have a solution for this? I tried using the !important; tag, and to my understanding you write it as such:

HTML:

<img class="timelineArrow" src="http://assets.daddario.com/html_fragments/images/timelineArrow.png" alt="timelineArrow">
                    <img class="barneyNotCows" src="http://assets.daddario.com/html_fragments/images/notcows_barney.png" alt="barney">

                    <!--Timeline-->
                    <div class="bulletPlayer" id="bullet1" style="display:">
                            <a href="javascript:void(0)" onMouseUp="chooseFact('bullet1');" class="bulletOne selected"></a><br />
                            <a href="javascript:void(0)" onMouseUp="chooseFact('bullet2');" class="bulletTwo"></a><br />
                            <a href="javascript:void(0)" onMouseUp="chooseFact('bullet3');" class="bulletThree"></a><br />
                            <a href="javascript:void(0)" onMouseUp="chooseFact('bullet4');" class="bulletFour"></a><br />
                    </div>
                    <div class="bulletPlayer" id="bullet2" style="display: none;">
                            <a href="javascript:void(0)" onMouseUp="chooseFact('bullet1');" class="bulletOne"></a><br />
                            <a href="javascript:void(0)" onMouseUp="chooseFact('bullet2');" class="bulletTwo selected"></a><br />
                            <a href="javascript:void(0)" onMouseUp="chooseFact('bullet3');" class="bulletThree"></a><br />
                            <a href="javascript:void(0)" onMouseUp="chooseFact('bullet4');" class="bulletFour"></a><br />
                    </div>
                    <div class="bulletPlayer" id="bullet3" style="display: none;">
                            <a href="javascript:void(0)" onMouseUp="chooseFact('bullet1');" class="bulletOne"></a><br />
                            <a href="javascript:void(0)" onMouseUp="chooseFact('bullet2');" class="bulletTwo"></a><br />
                            <a href="javascript:void(0)" onMouseUp="chooseFact('bullet3');" class="bulletThree selected"></a><br />
                            <a href="javascript:void(0)" onMouseUp="chooseFact('bullet4');" class="bulletFour"></a><br />
                    </div>
                    <div class="bulletPlayer" id="bullet4" style="display: none;">
                            <a href="javascript:void(0)" onMouseUp="chooseFact('bullet1');" class="bulletOne"></a><br />
                            <a href="javascript:void(0)" onMouseUp="chooseFact('bullet2');" class="bulletTwo"></a><br />
                            <a href="javascript:void(0)" onMouseUp="chooseFact('bullet3');" class="bulletThree"></a><br />
                            <a href="javascript:void(0)" onMouseUp="chooseFact('bullet4');" class="bulletFour selected"></a><br />
                    </div>

CSS:

/*** TIMELINE ASSETS */
.timelineArrow
{
    position: absolute;
    margin-left: -18px;
    margin-top: 98px;
}

.barneyNotCows
{
    position: absolute;
    margin-top: 530px;
    margin-left: -243px;
}

.bulletPlayer
{
    position: relative;
    text-align: center;
    z-index: 9999;
}
.bulletOne {
    position: absolute;
    top: 200px;
    margin-left: -18px;
    width: 500px;
    height: 246px;
    background: url(images/dotOneUpState.png) no-repeat left top;
}
.bulletOne:hover, 
.bulletOne.selected {
    background: url(images/dotOneDownState.png) no-repeat left top;
    top: 200px;
    margin-left: -22px;
}
.bulletTwo {
    position: absolute;
    top: 330px;
    margin-left:-17px;
    width: 500px;
    height: 246px;
    background: url(images/dotTwoUpState.png) no-repeat left top;
}
.bulletTwo:hover, 
.bulletTwo.selected {
    background: url(images/dotTwoDownState.png) no-repeat left top;
    top: 330px;
    margin-left: -20px;
}
.bulletThree {
    position: absolute;
    top: 471px;
    margin-left:-16px;
    width: 500px;
    height: 246px;
    background: url(images/dotThreeUpState.png) no-repeat left top;
}
.bulletThree:hover, 
.bulletThree.selected {
    background: url(images/dotThreeDownState.png) no-repeat left top;
    top: 471px;
    margin-left: -21px;
}
.bulletFour {
    position: absolute;
    top: 591px;
    margin-left:-17px;
    width: 500px;
    height: 203px;
    background: url(images/dotFourUpState.png) no-repeat left top;
}
.bulletFour:hover, 
.bulletFour.selected {
    background: url(images/dotFourDownState.png) no-repeat left top;
    top: 591px;
    margin-left: -21px;
}

JavaScript

// HIDE AND REVEAL TABS
function chooseFact(tab) {

// SET THE CHOSEN SECTION AS VISIBLE AND HIDE THE OTHERS
document.getElementById('bullet1').style.display = "none";
document.getElementById('bullet2').style.display = "none";
document.getElementById('bullet3').style.display = "none";
document.getElementById('bullet4').style.display = "none";
document.getElementById(tab).style.display = "block";

} The HTML, CSS, and JavaScript Above work in CHROME, FIREFOX and SAFARAI but NOT Internet Explorer. not sure how to fix this issue.

to my understanding, the important tag will negate the first position i put and use the section position in IE and that Chrome ignores important tags. this is something someone told me however i have seen otherwise and would just like to have a better solution for solving positioning problems when viewing in IE.

i unfortunately have to code with html4 and regular CSS verses html 5 and CSS3 due to our CMS :/

Any help would be much appreciated.

Thanks!

I have also provided pictures of how it looks in Chrome VS IE

This is Chrome:

This is IE