Page works fine in IE 6 but not IE 7. Here is an example.
Like the title says. Be caution about it. Check the picture below.
In what mother earth that this will happen? It worked fine in Internet Explorer 6 and not in Internet Explorer 7. It took me hours to look at the codes and searched online. As you know the problem domain was huge and I had no idea what caused the site to break.
So 5 minutes ago, something struck my mind.
Look at this piece of code:
<asp:Panel ID="pnlSearch" runat="server" Height="50px" Width="100%" CssClass="panelStyle">
<table id="Table2" border="0" cellpadding="0" cellspacing="0" width="100%" style="padding-left: 10px">
// your items here (5 rows):
// row1 - 1 radio button list
// row2 – 1 textbox and 1 search button
// row3 – 1 header
// row4 – datagrid
// row5 footer header
</table>
</asp:Panel>
Looks okay right.
IE 6 – show all
IE 7 - Apparently like the screenshot above, it partially hides row2 and fully on other rows.
So where is the problem here? If you look properly again, this is the cause of the problem:
<asp:Panel ID="pnlSearch" runat="server" Height="50px" Width="100%"
I am making an assumption here; if I am wrong do correct me. In IE 6, basically if there is a table which has a height more than 50px within this asp.net panel, it will make this panel to expand automatically. But in IE 7, it is stricter. When you set 50px and that is what you expect more. You can’t get it more than that even your table is expecting 200px or 100%.
So the solution is either you does this in the asp.net panel:
a) Do not specify the height
b) Or set the height to 100%
Hope others will find this tip useful. Cheers.