Intersoft Community - WebGrid Enterprise - Heading Alignment issue in IE8

Heading Alignment issue in IE8

jamesmh2000 — Tue, 09 Aug 2011 09:36:17 GMT

Thanks, Karl - that's a neat idea. In my own code I have stuck with the XHTML doctype but have removed the <meta http-equiv="X-UA-Compatible" content="IE=8"/> tag from my master page. I had to change a few of my styles to get my layout to appear properly in IE8 when running in IE7 compatibility mode, but now it's working okay.

Martin, I wouldn't say the issue is fixed exactly, but there are acceptable workarounds. Feel free to mark the issue as closed.

Thanks,

James

Heading Alignment issue in IE8

MarTin — Thu, 28 Jul 2011 03:04:19 GMT

Hello,

Does it mean your issue is solved when you are using XHTML DocType?

Thank you.

Regards,
-Martin-

Heading Alignment issue in IE8

karlp@agrecon.com — Wed, 27 Jul 2011 06:19:26 GMT

I've also had similar problems and have given up on XHTML doctype for IE versions prior to 8. I think mainly when I have colum autosizing on or if using the grid refresh funciton things don;t line-up or fit properly.

If I detect browser is IE and version 7 or less I change doctype to

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

then it renders ok in IE 5.5, 6 or 7.

It's not ideal as this will cause rendering differences if you use float and css auto margins in places.

my pages all inherit this class:

Public Class TemplatePage

Inherits System.Web.UI.Page

Sub Page_PreInit(ByVal sender As Object, ByVal e As EventArgs) _

Handles Me.PreInit

If Request.Browser.Browser = "IE" Then

If Convert.ToDecimal(Request.Browser.Version) < 8.0 Then

Me.MasterPageFile = "~/Site_html4.0.master"

End If

End Sub

End Class

Heading Alignment issue in IE8

jamesmh2000 — Mon, 18 Jul 2011 09:12:07 GMT

Hi Martin,

Thanks for your reply. I will work around the problem.

James

Heading Alignment issue in IE8

MarTin — Mon, 11 Jul 2011 18:46:23 GMT

Hello James,

I just got the update from the developer team.

Currently our products including WebGrid is not designed for compatibility view because it’s IE specific stuff. Our tools basically render the pages based on the specified document type. However, the compatibility mode causes the rendering to use old browser mode while our library still consider it as XHTML.

Therefore, they highly suggest the users to use pure standards mode and leave the compatibility view for best results.

Hope this helps. Thank you.

Regards,
-Martin-

Heading Alignment issue in IE8

MarTin — Tue, 05 Jul 2011 03:35:50 GMT

Hello James,

Your issue has been submitted to the developert team.

Hopefully, they can come up with a solution as soon as possible.

Thank you for your patient.

Regards,
-Martin-

Heading Alignment issue in IE8

jamesmh2000 — Mon, 04 Jul 2011 07:26:13 GMT

Martin wrote:

"So the point is, WebGrid needs to be able to run under IE8 Compatibility view per your requirement. Is this correct?"

Yes, that's correct. Thanks for your help.

James

Heading Alignment issue in IE8

MarTin — Fri, 01 Jul 2011 04:41:14 GMT

Hello James,

I have tested your project here. The grid's heading was misaligned too on my end.

So the point is, WebGrid needs to be able to run under IE8 Compatibility view per your requirement. Is this correct?

Therefore, I will need to discuss further about this issue with the developer team.

I will let you know the progress as soon as possible.

Thank you.

Regards,
-Martin-

Heading Alignment issue in IE8

jamesmh2000 — Thu, 30 Jun 2011 09:55:42 GMT

Hi Martin,

Thanks for your reply. I have run your sample file and am still getting the same issue. I’ve zipped up and attached the sample project I was testing with along with some screen shots.

I don’t have any special CSS debugging tools for IE, only straight VS 2008, although I have some JavaScript that gives me browser info (click “Browser Info” button in sample app or see screen shots).

I will try to explain more clearly what the problem is:

My app is designed for our intranet, where IE8 is running in compatibility view on all users’ PCs (browser setting is determined by group policy). See screen shot IE8_compatibility_view_settings.png. Please assume that this setting cannot be changed, as we have many older web apps that require this setting.
Until recently I was coding to IE8 CSS standards as I was developing on my own PC, and “localhost” never uses compatibility view unless you explicitly set it. When I discovered this I explicitly included localhost in my IE8 compatibility settings (see screen shot IE8_compatibility_view_settings.png).
In order to continue to code to IE8 standards, I added the meta tag <meta http-equiv="X-UA-Compatible" content="IE=8" /> to my web page. This works great, except for the heading alignment issue in the WebGrid.
To try to get around the grid issue I took out the meta tag and tried coding to IE7 standards. This fixes the grid, but introduces new problems. These are mostly minor except for the WebCombo, which stays put within a scrolling DIV (see sample app, WebComboInScrollingDiv.aspx example page.
I have WebGrids and WebCombos on the same web page in my "real" app, so cannot have the meta tag for one and not the other.

To summarize, if I have the meta tag in place, the WebGrid does not work but the WebCombo does work; if I take out the meta tag the WebGrid works but the WebCombo does not work.

I would prefer a solution that fixes the WebGrid in Compatibility Mode/DocMode 8 (see browser info screen shots), but if you can tell me a way to fix the WebCombo in Compatibility Mode/DocMode 7 that would be fine (please see the sample app’s JavaScript code for how “Compatibility Mode” is determined in these pop-ups).

Hope this helps!

James

Heading Alignment issue in IE8

MarTin — Wed, 29 Jun 2011 22:53:24 GMT

Hello James,

I'm attaching my sample including the meta setting and DocType. Please try to run the sample on your end and see how the result is.

However, could you explain your issue in more details? So, when you run the project using IE8 browser, do you change the Document Mode to IE7 compatibility / change the Browser Mode to IE7 Compatibility? Can you provide a screenshot of your developer tools along with your project?

I'm running the project and by default, it will open the project using Browser Mode as IE8 and Document Mode to IE8 standards (as you can see in Grid1.png attached).

Then, I change the Browser Mode to IE7 and Document Mode to IE 7 standards (as you can see in Grid2.png).

I don't have IE7 compatibility option in my developer tools.

Thank you.

Regards,
-Martin-

Heading Alignment issue in IE8

jamesmh2000 — Mon, 27 Jun 2011 08:19:35 GMT

Hi,

I'm having an issue using WebGrid version 7.0.7200.430 with IE8 when running in IE7 compatibility mode in my company's intranet environment. The headings don't align with the data.

My company's standard for the intranet is IE8 running in IE7 compatibility mode so, even though I use the meta tag <meta http-equiv="X-UA-Compatible" content="IE=8"/> in my Site.Master, IE8 continues to run in IE7 compatibility mode.

Everything works great except the column alignment in the WebGrid. Is there a work-around for this issue?

Thanks,

James Hartley