<h2> tag not rendering correctly in IE 5.5

The <h2> header tag is not rendering correctly in the IE 5.5 browser

[ronnie1985]

I was working on a website using the <h2> tag.

===
<h1>Longer text goes here in the first line</h1>
<h2>shorter text goes here.</h2>
===

CSS file
========
h1{
float:left;
color:#000;
font-family: "Times New Roman", Times, serif;
font-style: italic;
font-size:3.25em;
clear:both;
margin-bottom:5px;
}
h2{
float:left;
font-family: "Times New Roman", Times, serif;
font-style: italic;
color:#000;
font-size:2.25em;
clear:both;
margin-bottom:25px;
}
========

PROBLEM:

h1 renders the long text correctly but h2 breaks the sentence over 2-3 lines in IE 5.5 and IE 6.

OUTPUT:

Longer text goes here in the first line
shorter text
goes
here.

=====

Need help on how I can get the text in h2 tag in the same line.

Thanks.

[SuzyUK]

Hi ronnie1985, and Welcome to WebmasterWorld!

can't recreate this with the code you have above, what doctype are you using?

I'm wondering why you even have these two headings floated, if you didn't they would automatically sit one below the other and take up 100% of the width..

however if there's a reason for the floats - then older versions of IE did not work well if there wasn't a width assigned to a float, th it was beofre the new "shrink to fit behaviour of widthless floats became the accepted norm - so try adding width 100% (or one which suits your design) to them or remove the floats and clear directives

[ronnie1985]

Hi Suzy,

Thanks for the help. Will try the same and let you know.
Thanks again.