position:fixed in IE

Question

I use position:fixed for creating a chat window like gmail it works correclty in firefox but does not in IE and the page is locked (not scrolling)

the html code is below:

<div align="center" style="font:14px BNazanin,Arial" >
    <form wicket:id="chatForm" style="position:fixed; bottom:0; right:5">
        <table width="175" border="3">
            <tr align="right" >
                <td colspan="2">
                    <!--Window tools-->
                    <table>
                        <tr>
                            <td>
                                <a wicket:id="minimizeLink" style="text-decoration:none">
                                    <img wicket:id="minimizeImage" src="minimize.jpg" width="15" height="15">
                                </a>
                            </td>
                            <td>
                                <a wicket:id="closeLink" style="text-decoration:none">
                                    <img wicket:id="closeImage" src="close.jpg" width="15" height="15">
                                </a>
                            </td>
                        </tr>
                    </table>

                </td>
            </tr>
            <tr>
                <td align="left">
                    <a wicket:id="friendLink" style="text-decoration:none">
                        <img wicket:id="friendImage" src="friend.gif" width="40" height="40">
                    </a>
                </td>
                <td align="center">
                    <!--User Data-->
                    <span wicket:id="friendName"></span>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="right">
                    <!--Incoming and outgoing messages-->
                    <form wicket:id="messageReapeatorForm">
                        <div wicket:id="messageRepeator">
                            <span wicket:id="message"></span>
                        </div>
                    </form>
                </td>
            </tr>
            <tr style="width:200px">
                <td colspan="2">
                    <!--Message Field-->
                    <!--<textarea wicket:id="textArea" id="textArea" style="width:100%" rows="1" cols="10" onKeyUp="DetectKey(this)"></textarea>-->
                    <!--<input wicket:id="textValue" name="textValue" type="hidden">-->
                    <input type="text" wicket:id="textArea" />
                </td>
            </tr>
        </table>
    </form>
</div>

picture below belong to firefox:

picture below belong to IE:

does anyone know what should I do to make IE work like firefox?

Answer 1

position: fixed is not supported by IE before version 7. There are workarounds, easily googlable:

Answer 2

In addition to the answer Roy Tang gave:

I think the best step you could take, is review some books/websites on how to markup correctly and semantically, after that how to do some proper styling. I personally wouldn't style a Form directly, because that's not the purpose of the element.