.NET Logo

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.

Normalmente me gusta crear el layout completamente desde cero, usando solamente codigo mío, pero como no tengo tanto tiempo disponible, tuve que recurrir a utilizar un layout ya hecho. Probablemente tengo más de 300 páginas agregadas como bookmark referentes a CSS, así que fue difícil encontrar el layout que necesitaba.

Al layout que necesito se le conoce como el Holy Grail de CSS….es uno de los layouts más usados, pero que tienen alto nivel de complejidad para lograr diseñarlo sin errores y que sea vea bien en todos los navegadores.

Agradezco a Matthew James Taylor por haberse tomado tiempo de no solamente crear el layout perfecto de 3 columnas en CSS, sino por detallar muy bien el codigo fuente y compartirlo con el mundo.

Bueno, con solo agregar este estilo a la hoja de estilos, las imagenes redimensionadas se veran mucho mejores en Internet Explorer de lo que se veian antes.

img { -ms-interpolation-mode:bicubic; }

Referencia: msInterpolationMode property