Hello all,

I have a header with an image text image and the text is only three words, one under the other. The problem is that although everything lines up nicely using firefox, in IE 8 (haven't checked the other IE's) the text is not completely centered.

The css is as follows:
Code:
#content_user1 {
    height: 225px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 2px;
    float: left;
    width: 225px;
    text-align: left;
}

#content_slogan {
    margin: 35px 0px 0px 50px;
    padding: 0px 0px 0px 0px;
    float: left;
    width: 200px;  /*  350 */
}

#content_slogan h1 {
    margin:0 auto; /*center hack*/
    padding: 20px 0px 0px 0px;
    color: #DEBD08;
    font-family: "Times New Roman", Arial, Georgia;
    font-size: 3em; /* 2.5  */
    line-height: .9em;
    font-weight: bold;
    text-align: center;
}

#content_user2 {
    margin: 0px;
    padding: 0px;
    float: right;
    width: 225px;
    text-align: left;
}
Here is the html code in the page:
Code:
<div id="content_user1">
<img src="http://www.makedonikiestia.gr/images/makest/alexander_the_great_marble_bust_222px.jpg" alt="alexander_the_great_marble_bust" width="222" height="222" />
</div>
<div id="content_slogan">
<h1>ΜΑΚΕΔΟΝΙΚΗ</h1><h1>ΕΣΤΙΑ</h1><h1>ΑΘΗΝΩΝ</h1>
</div>
<div id="content_user2">
<img src="http://www.makedonikiestia.gr/images/makest/philipos_2_of_vergina_macedonia-222px.jpg" alt="philipos_2_of_vergina_macedonia" width="222" height="222" />
</div>
<div class="clear"></div>
I tried using the text embedded in one set of h1 but that didn't work.
I also tried the same using (br) in between each word but that didn't work.