Margin problems in CSS IE vs Firefox

I'm trying to make a banner in HTML/CSS. However, I'm having trouble with the margins in one of my div's. It works perfectly in Firefox, but not in IE.

#lowerText{
       float: left;
       margin-top: 50px; 
       margin-left: -185px;
       color: rgb(255, 199, 142); 
       font-family: 'Special Elite', cursive; 
       font-size: 15px; 
       text-transform: uppercase;
       display:inline;
}

#upperText{
      float: left;
      margin-left: 20px; 
      margin-top: -10px; 
      color: rgb(255, 199, 142); 
 开发者_如何学编程     font-family: 'Special Elite', cursive; 
      font-size: 30px; 
      text-transform: uppercase;
      display:inline;
}

It's an h3 tag in #lowerText which says "-Foo foo foo bar". In IE it only shows: "oo bar". The text in this div HAS to be right underneath #upperText at a specfic position. But the margin-left: 185px in #lowerText doesn't show in IE, but it shows in Firefox.

What do I need to do to fix this?

---

In your comment, you state your jsfiddle works in IE. jsfiddle auto inserts a doctype which I now assume you do not have in your original page. If so, IE is in quirks mode without the doctype and the cause of your problem (other than IE being the worst browser on the planet).

EDIT: Didn't look first. jsfiddle shows a doctype. Did you put that there?