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.
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
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:
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
CorbyNichols
Member
20 Points
47 Posts
Has anyone else had trouble with IE9?
Mar 02, 2012 03:24 AM|LINK
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; }<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>rightcolumncontentpanel2 { position: relative; top: 0em; }