Has anyone else had trouble with IE9?

I am from a Windows background and this is the reason I prefer Windows development versus web development is the making it look good in every browser.

Other than a few minor issue, my web site looks good in Firefox (6.0, 9.0, 10.0) and I just checked Google Chrome and it looks fine, and I use IE8 as my default browser and when I go to work where I have IE9 my site behaves badly whether compatibility mode is on or off.

The site is live, www.daily-click.com, although still under development.

On the home page, in IE9 with Compatibility on, the right column shifts down by the entire length of the left column, instead of side by side as expected.

If I turn compatibility view off (I could be wrong on the on or off value, it isn't very clear) the right column goes back up to where it should be, but the text of the left column which is in a div (panel) shifts down as if it is below the box it is contained in.

I have tried to use pure Css but if resorting to a table is the only way I will, but perhaps someone else has had a similiar issue and knows a hack, fix or trick?

The Css that is relevant is:

This is the bottom box in the Left column with the lady smiling below the lady with two dogs

.happywomanpanel
{
	background-color: White;
	width: 500px;
	height: 240px;
	border: solid 1px black;
	position: relative;
	left: 0px;
	top: 84px;
	border: solid 1px black;
}

This is the text panel

.happywomantextpanel
{
	float: right;
	position: relative;
	top: 4px;
	left: -20px;
}

// this is the actual text

.happywomantext
{	
	font-family: Georgia;
	font-size: 1em;
	font-weight: normal;
	width: 300px;
	color: Black;
}

Here is the HTML for the left column:

     <asp:Panel ID="HappyWoman" runat="server" CssClass="happywomanpanel">
            <asp:Image runat="server" ID="HappyWomanImage" ImageUrl="~/Images/HappyWomanSmall.png" CssClass="happywomanimage" >
            </asp:Image>
            <div class="happywomantextpanel">
                <p class="happywomantext">
                    I talk to my kids and friends all the time. The only problem is when they can't find me they will just assume I am busy, because I am.
                </p>
                <p class="happywomantext">
                    The Daily-Click Email Service is so simple. I click one email per day or the cavalry is sent for me!
                </p>
                <p class="happywomantext">
                    I travel often and while I do not want my loved ones to worry about me, I am also not a child. 
                </p>
                <p class="happywomantext">
                    I keep my independance and my family can rest assured knowing that as long as I have clicked,
                    I am ok!
                </p>
            </div>
        </asp:Panel>

And the right column is in the right place without any placement, but the Css is:

rightcolumncontentpanel2
{
	position: relative;
	top: 0em;
}

It looks the same in IE 8, and Firefox, Chrome without any adjustment, but with IE9, and compatibility view, the right column goes all the way down

as if it were below the left column.

I found a post with this, that was supposed to turn off compatibility view, but it didn't seem to have any affect;

<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />

I have no idea what this does, but it didn't solve the problem and the problem is there with or without this meta tag.

Does anyone have ideas as to why the site behaves so badly in IE9? I had to uninstall IE9 here because it crashed every 5 minutes, so I think it is a not ready for

primetime browser, but it works fine at my work on a newer computer.

Thanks,

 Update: I do not have IE9, here and I found a site that takes a screen shot of other browsers, http://browsershots.org/ browser shots,

but MSIE 5,6,7,and 8 are listed, not IE9 so I cannot test until tomorrow.

I have been programming for 13 years, not counting a Vic-20 & Commodore 64 as a kid (I am dating myself) but I was not aware of pressing F-12

brings up IE developer tools, and the outline div, helped me get rid of my scroll bar issue, I had divs way too big, but I do not thing this will solve

my original problem.

Re: Has anyone else had trouble with IE9?

Hi Corby,

First up web programming is a whole new beast... quite different to what you have been used to....

I would suggest that you do some reading about the history of html and how it has evolved. http://en.wikipedia.org/wiki/HTML

Basically, it is not a programming language (but hypertext MARKUP language), but it has syntax rules which are governed by the W3c which is a consortium of web browser vendors and web editor vendors, MS amoung them...

Now the internet works by web browsers sending requests to a web server (for your web site homepage for example) and then the web server (in your case using asp.net which is a programming language) sends back your web page as html, css and script files. The web browser then has to parse and assemble that information as a rendered screen image... quite a feat...

However, web browsers differ in how they correct errors in your html and in the way they assemble the markup into what is called the DOM (Document Object Model). This is why your page looks different in differnet browsers.... it contains errors that different browsers interpret differently...

Now back in your Visual Studio development environment you may have seen some errors and warnings (View>Errors console)... these are the markup errors that VS is warning you about....you should try to correct those errors (using the VS help) before you publish your web site.... otherwise those errors end up at the web browser and as you've seen end up being displayed differently by different browsers...

You can view your markup errors by validating your markup at validator.w3.org

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.daily-click.com%2F

This is not a trivial task..... I do not think that you will be able to launch your web site in a few weeks time without a professional programmers help. A 6 month lead time is more realistic...

The most critical markup error is this one...

Line 37, Column 11: document type does not allow element "title" here

 <title>Daily Click Home Page.</title>

The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

It appears to me that you have not quite grasped the core concepts of asp.net programming with master pages and content pages... and that you have added a <title> tag to your content page...mistakenly...

The Visual Studio intellisence and Errors console should have alerted you to correct this mistake, but you probably thought...'what is this... it does not seem to make any difference if I ignore it'....

asp.net programming and html syntax validation of your page is too complicated for me to fully cover here. I can only suggest that you go back to Visual Studio and correct the errors and warnings that it detects... this is not a trivial task and it will take some time for you to get the hang of it.

Regards.

</div>

Re: Has anyone else had trouble with IE9?

Hi,

I compared you site in IE9 and Chrome!

I didn't find any differences! Try updating the IE9 and check! - Current IE version- 9.0.8112

You can also consider the suggestion made by above user!

Hope it helps u...

Re: Has anyone else had trouble with IE9?

I have been programming in Asp.net for 5 years so I think your comments were rude, I get the warning for the title, but that is because on my maser page I had to move the Head Content to under the Body content or my site would not function properly.

I fixed the title error, on each page load I make a call back to the master page when I setup the menu (located on the master page also) so that was an easy fix.

If the site looks the same in Chrome than I guess I fixed the issue when I adjusted the size of a few divs.

I just reread yoiur post, as for the not being a professional programmer, I do not see how one forum question makes me suddenly unemployed as I have been working as a Microsoft.net developer since day 1 of the .Net framework and even before that with Classic Asp and the "great" product of the day Visual Interdev, but I will forgive your need to insult somepone and I removed my comment of calling you a jerk because it takes making me angry to educate me so thank you, but please work on your people skills and I will work on my Asp.Net css compliance skills.

You should really not insult someone because they ask one question in a forum: here are my code plex projects, where are yours?

http://radstudio.codeplex.com

http://dbcompare.codeplex.com

http://regionizer.dbcompare.com

http://smoothpopup.codeplex.com

Re: Has anyone else had trouble with IE9?

I fixed the title error, I will give you credit for that, but your people skills have a lot to learn.

The title I fixed by calling back to the Master Page on each page to set the title, and I moved the title out fixed the bug where the title was not setting on each page, so thank you.

In case anyone needs this code, this is the easiest way to make a call to the master page from a page.

The master page is actually a child control of the page, even though you would think it would be its parent with the name Master page.

// if there is at least one control
                if ((this.Controls != null) && (this.Controls.Count > 0))
                {
                    // if the siteMaster exists
                    SiteMaster siteMaster = this.Controls[0] as SiteMaster;

                    // if the siteMaster exists
                    if (siteMaster != null)
                    {
                        // Set the title
                        siteMaster.SetTitle("Daily-Click Home Page.");