Estoy trabajando en adaptar un diseño HTML/CSS a una aplicación existente de ASP.NET, en Webforms.
Ya estando casi todo lo visual adaptado, y viendose bien, me faltaba transformar una forma de log-in a mark-up de XML, para poder hacer el código de Login.
Como el usuario debía poder loggearse desde cualquier ASPX de la parte pública, decidi transformar los controles de log-in originales en un ASP.NET User Control (ASCX), para poder tener la logica de todo el log-in en un solo lugar, y poder reutilizar el User Control en todas las paginas publicas.
Cree el puro ASCX con el Markup, y abri la pagina en IE. Todo bien.
Convertí el <input type=”button”> a un <asp:ImageButton>. Error, tengo que agregar la etiqueta de <form runat=server>.
Agregué la etiqueta, View in Browser, no mas error, pero todo el contenido del panel derecho se desplazó hacia abajo.
Despues de batallar como 1 hora con el problema, e intentar googlear, me topé con un artículo que tenía como título “Multiple forms causing strange CSS problem“. Pero yo no tengo multiples formas (eso creí), así que lo ignoré.
Despues de media hora de moverle…recordé que todo el problema empezó cuando agregué la etiqueta de <form runat=server> al ASPX. Regreso al mark-up del User Control (ASCX) y ahi estaba…no había borrado la etiqueta de <form> original al momento de pasar el HTML de la forma de log-in.
Borre la etiqueta de <form> del User Control, y listo…el diseño se ve bien otra vez.
Así que como moraleja….Tener mas de una etiqueta <form> en una ASP.NET Webform te genera problemas raros de CSS.