How can I make my <legend> tag display the same in Internet Explorer as in other browsers?

Please help, after hours of tweaking to get all major browsers to display my form the same, I give up. Can anybody see what is the catch?

This is the link of my working site:

• http://staging.redcoats.co.uk/

The problem is in the upper-left corner with the form “Book a Room”. The <legend> tag works as I want in all major browsers except IE, of course :-(

In IE the legend tag is positioned inside the fieldset instead, one half in, one half out of fieldset.

How to achieve that in IE, but not to alter design in all o开发者_如何学JAVAther browsers?

Thanks.

Instead of using the <legend> tag, you could use an absolutely positioned <div>, and then style it to look like the <legend> you are using. That way you do not need to rely on a rarely used element, that is inconsistently rendered in many of the older browsers.

Effectively, legend is a known tag in IE, Chrome, Firefox, Safari, Opera. But it is represented differently depending on your navigator. I recommend also the use of div tag instead of LEGEND cause it will has the same render over any type of navigators