ASP.NET - Issues with position of controls in IE8

Question

Hello, recently I've moved on to testing my web aplication in IE8, however, I've noticed that the position of my controls now all over the place. This was not apparent when I was testing my app with IE7 and Firefox 3.5. I know that there is a suggested "fix" for this issue by including

meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"

into the HTML source, but I think it might be better if I changed my app to natively support IE8, instead of falling back to Compatibility Mode.

All my controls are positioned by offsetting from normal flow, but I've also noticed that even if they are positioned in normal flow or absolutely positioned, the problem still exists.

I'm developing my app entirely in C# as I have much to no knowledge of CSS, but I have no qualms about changing that if that's the path to solving this issue.

Thanks.

Edit: I'm using Visual Studio 2005 btw

Edit: After more forum diving, I found a link to a nice blog entry @ http://blogs.msdn.com/ie/archive/2009/03/12/site-compatibility-and-ie8.aspx which lists some quick differences between IE8 Standard View, IE8 Compatibility View and IE7 which might break a site. Hope it helps other people facing similar issues.

Answer 1

If you are building a website, you'll have to use CSS.

This is a good resource for starting with CSS - http://www.w3.org/Style/CSS/learning

Css will allow you to create a website that works for most modern browsers. Here's a good table for matching CSS version and browser version: http://www.quirksmode.org/css/contents.html

However, there are some browsers - notably IE6 - that haven't implemented the CSS guidlines properly. This results in the need for IE6 specific CSS hacks for anything remotely sophisticated.

This is a good strating point for browser hacks:

http://articles.sitepoint.com/article/browser-specific-css-hacks#

Answer 2

Honestly the issue really lies in your markup and CSS rules. IE8 is much more compliant to the W3c CSS standards. So you most likely have had issues with FireFox, Opera, Chrome and Safari you did not know about. The non-IE browsers will not honor your IE7 tag.

My advice is to make your page work in the new browsers, keep things relatively simple so you can make it work in IE 6 and 7. IE 6 really needs to just go away, but alas too many folks wont upgrade. IE 7 honestly needs to be phased out as well.

I have been writing a series I am calling Thin ASP.NET that sort of focuses on doing things in CSS layouts for ASP.NET sites, http://professionalaspnet.com/archive/tags/Thin+ASP/default.aspx

Answer 3

CSS can be rather daunting when you are first beginning using it, personally I like to use a CSS editor. I use Skybound Stylizer (www.skybound.ca). They offer a free basic version, which is really all that you need to begin and to even publish a website, but at only $79 I upgraded to their Ultimate edition to show my support and I am still loving it :)

I suggest checking it out. It will allow you to make changes and see instantly what happens, it also supports the ability to view the page as you would in IE or Firefox with additional support to make it easy to make conditional CSS comments for separate browsers.

Hope this helps, David.