CSS Formatting Issue in Internet Explorer

Hello everyone!

I designed a fluid, Div layer-based layout, but I ran into problems with the header title.

magitek.nu/pange/testing.html

If you view the test page in Firefox, the header title is doing exactly what I have intended it to do. The relative positioning puts both my main title "personally pange" and my subtitle "about pange of magitek.nu, magitek-designs.net and frozen-flower.net" where I want, and all text that is too tall is cut off by the overflow:hidden attribute. I'm a fan of this. =D

However, if you view the test page in Internet Explorer, the text is not only spilling over the edges of the container, but the text is also not positioned as expected!

Does any one have any advise on how to solve this issue? This is the section of my code that I'm refering to:

<div style="background-color:#F5CF1E; border-bottom:1px solid #000000; line-height:30px; font-size:50px; text-align:right; overflow:hidden; height:30px;">

<span style="position:relative; top:-8px; left:0px; color:#F4A11D;">personally pange</span>

<br/>

<span style="position:relative; top:-37px; font-size:11px; padding-right:1px;">about pange of magitek.nu, magitek-designs.net and frozen-flower.net</span>

</div>

Code (markup):

Thanks very much in advance!

 

I wish i knew the answer but i asked to some friends for you just waiting answer. I visited your amasing website and i am using one of your templates (or i just followed the links as) you can check http://www.acne.center-on.net