WebGrid height not static in IE8

5 replies. Last post: April 20, 2014 10:44 PM by Hans Kristian
Tags :
  • (None)
  • New Discussion
  • New Question
  • New Product Feedback
Tim ByngMember

I need to support IE8. When I view a WebGrid in IE8, the height is initially correct. However, if I filter the grid and change the number of records contained in the grid, the height of the grid will change and will show all rows returned. For example, if there are 0 rows, the bottom of the grid moves right under the header / filter row. If there are many rows, the bottom of the grid extends past the height defined in the markup of the grid (which can lead to it covering other content on the page).

I have read in another post that the doctype must be set to HTML4 and the WebGrid RenderingMode to Quirks to support IE8. This has been done already. 

I have tested in IE7 with the same doctype and rendering mode and the issue is not present. I have also tested with IE9+ with the HTML5 doctype and rendering mode and the issue is not present. Only IE8 appears to be affected.

Please let me know how I can resolve this issue.

Hello,

As your suggestion, I tried to run the WebGrid in Internet Explorer 8 browser.
But unfortunately, I didn’t get any rendering issue as well.

I use HTML 4.0 doctype. Here the doctype snippet code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

If you don’t mind, could you please resend the screenshot and sample? However, this time please try to upload those files in another server, then provide me the download link.

I attached the screenshot regarding the result on my end and my WebGrid sample.
If you can’t the file properly, please follow this link: http://1drv.ms/1hPGyuQ

Regards,
Hans K.

Tim ByngMember

Hi Hans,

The important part about the doctype you supplied in your last post is that it does not include the system identifier. That will put the browser in quirks mode. To reproduce the issue, please use a valid 4.0 or 4.01 doctype with the system identifier such as the following:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">

In any case, for the grid to render correctly in IE8, the browser must be in Quirks mode. There are a number of different ways to get IE into Quirks mode, the easiest being to supply an invalid doctype. Please see here for a list of doctypes and which ones cause the browser to render in Quirks mode.

Quirks mode fixes the rendering issues in IE8, but breaks the rest of my app. Therefore, this isn't an option for me. I have come up with a workaround where the grid looks acceptable. For the height issue, I ended up setting the grid body to a static height using css and conditional comments to target IE8 only. If you can think of a better workaround, please let me know.

Hello,

Thank you for the reply.

By default, if we want to use Intersoft control in HTML 4 doctype. We should declare the HTML 4 doctype, like this line of code below:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html>

We don’t need any system identifier in doctype declaration while using HTML 4 doctype.

However, if you want to use system identifier in your doctype declaration, please try to use XHTML doctype instaed HTML 4 doctype.

I have tried modifying my WebGrid using XHTML doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Then set the “RenderingMode” property to “XHTML” and the result is no rendering issue.

I apologize for the inconvenience.

Regards,
Hans K.

All times are GMT -5. The time now is 4:15 PM.
Previous Next