WebGrid height not static in IE8

5 replies. Last post: April 20, 2014 10:44 PM by Hans Kristian
Tags :
  • (None)
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.

All Replies

Hello,

Thank you for the question.

I try to run a WebGrid sample in Internet Explorer 9 and I set the Browser Mode to IE8.
Then I try to filter the WebGrid, however I didn’t get any rendering issue.

Could you inform me more information regarding your WebGrid?
Could you provide me you WebGrid configuration and the screenshot regarding your issue?
So that I can investigate the issue furthers more.

For your information, currently Intersoft control doesn’t support compatibility view mode.
I apologize for any inconvenience this problem may have caused you.

Thank you for your help.

Regards,
Hans K.
Tim ByngMember

Thank you for your reply, Hans.

I have attached a small sample project that demonstrates the issue. Please note that I reproduced the issue using IE8. To ensure that you are able to reproduce the issue, please use IE8 and not IE9 with the Browser Mode set to IE8.

As per your recommendations in the Compatibility issues with IE 8 and Intersoft WebUI Studio 2013 post, the HTML4 doctype has been used and the Rendering Mode of the grid has been set to Quirks.

I have also attached the following screenshots:

  • bs_win7_IE_8.0 - Initial Load.jpg: This is how the grid looks after the initial page load. Please notice how the column headers don't align properly with the columns.
  • bs_win7_IE_8.0 - After Apply Filter.jpg: This is how the grid looks after applying a filter. In addition to the problem above, please notice how the bottom of the grid has moved down.
  • bs_win7_IE_8.0 - After Refresh Grid Data.jpg: This is how the grid looks after refreshing the grid data. In addition to the problems above, please also notice that the scrollbar is missing even though more data can be loaded.
As you can see, there are many issues when rendering the grid in IE8. This is not just related to the grid not having a static height, as I initially reported.
I look forward to your reply.
Regards,
Tim
UPDATE: I have been able to resolve the issue. You previously said "... you should use HTML4 Doctype..". However, more accurately what's required is for the browser to render the document in quirks mode. For this, we can use an HTML 4.01 doctype without the system identifier, such as this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

However, and this is a big one for me, forcing the browser to use quirks mode breaks the rest of my page. Therefore, this is not an acceptable solution for me. I would really appreciate it if you could help me come up with a workaround to make the browser height static when using standards mode instead of strict mode in IE8.

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 7:53 PM.
Previous Next