Last post Nov 02, 2009 06:32 PM by rgalante
Oct 23, 2009 03:54 PM|rgalante|LINK
I am building an MVC application to replace my legacy classic ASP application. I am comparing ASP.Net WebForms with MVC. Initially, I was impressed with the MVC design. However, in practice, my application renders beautifully in IE, but doesn't render in
Firefox, Chrome or Safari the same way.
I have a legacy application that uses tables to layout the various page areas. The application uses transparent gifs to space content. All images have height, width and border definitions. All tables have cellpadding and cellspacing set to 0.
In IE everything renders correctly with the proper spacing. In Firefox, Chrome, and Safari, the tables render with the correct spacing, but as soon as I add an image to a column, padding around the image ruins the layout. Where did this padding come from?
I cannot remove the padding with css styles set to 0 pixels. I cannot remove the margin with css styles set to 0 pixels. But somehow, as soon as I insert an image into a table column, the images gets padding. And this happens in Firefox, Chrome and Safari,
By the way, I'm using the HTML <img> tag, not the Html.Image(...) helper.
Nov 02, 2009 06:32 PM|rgalante|LINK
I figured out this problem. The Site.Master page's DOCTYPE was set to STRICT. I changed it to Transitional, and now the pages render the same in all browsers. Apparently, Firefox, Chrome and Safari ignore height attributes when rendering in STRICT mode,
and IE doesn't. Technically, IE is not supposed to do so, but does.