Jump to content

Overflow issues in IE8 ONLY!


Coleen

Recommended Posts

Hi Everyone. This is my first post here, but I'm a member of the ASP.Net Forums and no one seems to be able to help me there. I hope someone here can.

 

I'm having issues with column overflows in IE8 (ONLY!), but I found the problem - or at least what I think is the problem - I just don't know how to fix it.

 

I have a 3-column layout using Matthew James Taylor's http://matthewjamestaylor.com/blog/perfect-3-column.htm and it works perfectly in all my test browsers EXCEPT IE8 non-compatibility mode! In two of my three columns, I use a script for things like a Paypal button or a Yahoo "Groups" page link - or in the case of my third column, a search box. All of these things are wrapped in a <Form> tag. The moment I include any of the code for those apps, my columns "break." But ONLY in IE8 non-compatibility mode! The structure works absolutely fine even with the nestled <Form> tags in EVERY browser I've checked (including IE8 in compatibility mode) but without compatibility - it breaks!

 

Here is a sample of my HTML snippet that is "breaking" it:

 

</form>

<form method="get" action="

http://health.groups.yahoo.com/subscribe/AHeartbreakingChoice"

target="_blank"><center>

<table cellspacing="0" cellpadding="2" bgcolor="#ffffcc" border="0"

class="center">

<tbody>

<tr><td align="center" colspan="2"><em><a href="

http://health.groups.yahoo.com/group/AHeartbreakingChoice/"

target="_blank">Subscribe

to AHeartbreakingChoice</a></em></td></tr>

<tr><td><input value="enter email address" name="user" /></td>

<td><input type="image" alt="Click here to join

AHeartbreakingChoice" name="Click ;here to join AHeartbreakingChoice"

src="http://us.i1.yimg.com/us.yimg.com/i/yg/img/i/us/ui/join.gif"

/></td></tr><tr align="center">

<td colspan="2">Powered by <a href="http://health.groups.yahoo.com/"

target="_blank">health.groups.yahoo.com</a>

</td></tr></tbody></table></center></form>

 

My CSS is strictly the columns and wrappers as in Taylor's example - I have only changed the colors, so I'm not going to post the CSS - if you want to see it you can download it from the link above. Like I said - it works in EVERYTHING except IE8 non-compatibility.

 

Does anyone have any suggestion on how to nestle the <form> for things like the above Yahoo link or PayPayl buttons or search boxes - without breaking IE8? Any help would be much appreciated.

 

Thanks,

 

Coleen

Link to comment
Share on other sites

Thanks so much Ben. Okay - the original (Live) site which is showing an error in several browsers (but not mine, I use Firefox 3.6.23) is http://www.aheartbreakingchoice.com. I completely re-vamped this site back in March and have been trying (off & on) to fix this overflow problem ever since. To see what I'm currently working on my test site is set up at: http://www.aheartbreakingchoice.belizeconsulting.com/ and you can see that in Firefox, it works fine with the Yahoo Group link, but in IE8...errrr, not so much! If I change IE8 to compatibility mode - works fine! Honestly - I have NO idea how to fix this in IE8. I could see if it was compatibility mode where it was breaking, but it's not! Any help that you or others can give me on this would be very greatly appreciated. Thanks!

Link to comment
Share on other sites

One thing I noticed -- you have an extra, unnecessary </form> tag in your center column (the first line in your code sample above). I'm not necessarily sure that's what's causing it, but I'd remove that and post back here.

 

</form> <----------------

<form method="get" action="

http://health.groups.yahoo.com/subscribe/AHeartbreakingChoice"

target="_blank"><center>

<table cellspacing="0" cellpadding="2" bgcolor="#ffffcc" border="0"

class="center">

<tbody>

<tr><td align="center" colspan="2"><em><a href="

http://health.groups.yahoo.com/group/AHeartbreakingChoice/"

target="_blank">Subscribe

to AHeartbreakingChoice</a></em></td></tr>

<tr><td><input value="enter email address" name="user" /></td>

<td><input type="image" alt="Click here to join

AHeartbreakingChoice" name="Click ;here to join AHeartbreakingChoice"

src="http://us.i1.yimg.com/us.yimg.com/i/yg/img/i/us/ui/join.gif"

/></td></tr><tr align="center">

<td colspan="2">Powered by <a href="http://health.groups.yahoo.com/"

target="_blank">health.groups.yahoo.com</a>

</td></tr></tbody></table></center></form>

 

One other thing... I may be wrong here, but I was under the impression that when dealing with ASP.NET, you can't nest form tags within each other? Your website is currently enclosed in a form tag, so I don't think you can have your newsletter signup form within that form and expect things to work properly. I don't think that should cause display errors though.

Link to comment
Share on other sites

Thanks Ben. The close Form tag at the beginning of the Yahoo link is in response to some information I was given by the good folks at PayPal, previously. When I was originally adding the PayPal link to the website, it would not work at all and kept giving me errors. I was able to get in touch with the PayPal technical help, and was informed that the errors were because I was "nestling" the form tags. So in effect, what I am doing with that close tag is closing the main form, opening a new form, and closing that form - maybe I need to re-open the form when I am done?. The errors in IE8 probably are because of the nestled form tag (I wouldn't doubt it a bit!) but what I don't understand is why this works absolutely fine in every other browser (Chrome, Firefox, Opera and even IE6 & 7) I have tested this in. It ONLY seems to be "breaking" in IE8! Talk about a step back for Microsoft! They are driving me nuts! Honestly - I should NOT have to change this all back over to .html pages instead of .aspx pages just because of IE8! Should I? ARGH!!

Link to comment
Share on other sites

It sounds like the issue does have to do with your nested forms. The reason PayPal was telling you to place the ending form tag there was because you can't have nested forms -- forms inside the main ASP.NET form. The closing form tag closes the ASP.NET form, fixing (sorta) the nesting issue. However, it will lead to display problems, because you are then closing elements incorrectly. Elements need to be closed in the order they were opened, like this:

 

<form>
<div>
</div>
</form>

not

 

<form>
<div>
</form>
</div>

Different browsers deal with incorrect nesting in different ways. It seems like other browsers ignore the incorrect nesting, whereas IE shows display errors (correctly, in my opinion).

 

In short, you can't use forms within your ASP.NET form, and yes, that means you will have to approach this in a different way if you want to continue to work with ASP.NET. ASP.NET uses one big form to enclose all of the content (which is one of the limitations and a reason I personally stick with PHP over .NET). So, yes, if you want to get this to work, either you have to drop ASP.NET and go with PHP or something else, or you will have to approach it in a different way that doesn't use multiple form tags. In addition, I'm pretty sure that if you use ASP.NET code below that newsletter form, it won't work, since the </form> tag closes the ASP.NET form.

 

I'll see if there are any options for you... One might be to have the second form within an iframe, or have a popup or modal window that appears rather than placing the code within the ASP.NET form.

 

Here are a couple posts talking about this issue:

http://discuss.joelonsoftware.com/default.asp?dotnet.12.421651.10

http://www.freewebdevelopersite.com/2011/03/19/how-to-use-paypal-buttons-within-asp-net-web-forms/

http://stackoverflow.com/questions/638114/how-can-i-integrate-paypal-with-asp-net

http://www.west-wind.com/presentations/PayPalIntegration/PayPalIntegration.asp

 

(The above links talk about PayPal, but I'm pretty sure you'd need to use the same approach for other forms.)

Link to comment
Share on other sites

Thanks for the info Ben. To be honest - this really ticks me off that ASP.Net does this. Why oh why can't Microsoft just play nice? The whole idea of using .Net for me is the MasterPage. I literally have hundreds of pages in that site and they all need the same basic structure - same header, top navigation and left-navigation, as well as having the snippets of stories on the right with a search box. Even if I were to change the structure of the site to use tables instead of columns (which I am loathe to do - that is NOT proper CSS structure!) the problem obviously isn't in the column lay-outs, it's in the nestled form tags.

 

I did check the links you posted. Unfortunately they don't offer me a solution because I am not a C# programmer. I really do not understand all the code that is posted in this link for the work around http://www.freewebdevelopersite.com/2011/03/19/how-to-use-paypal-buttons-within-asp-net-web-forms/ and to be honest, this is something that Microsoft SHOULD have taken into consideration! There are LOTS of times when a developer is going to want to use a nestled form tag, it just irritates the @#$%! out of me that IE8 is the ONLY browser that doesn't "Play nice!" @#%$! Microsoft! I'm too old to go learn a completely new platform for programming and I certainly don't want to have to use the same HTML code over & over, and over again because I can't use a masterpage for this! ARGH! Any suggestions?

Link to comment
Share on other sites

You have a couple options:

 

-- write the ASP.NET code like some of the links above explained. There's nothing wrong with learning something new, right?

 

-- Drop using ASP.NET entirely, stick with HTML.

 

-- Switch to PHP. If the only reason you are using ASP.NET is for master pages, PHP's include() function will do about the same thing and doesn't require a form surrounding all of the page's content.

Link to comment
Share on other sites

No nothing wrong with learning something new - I just truly don't want to get bogged down n C# code - I know VB, and could probably decipher the C# into VB, but I don't really want to waste my time if it's going to continue to be an issue.

 

No wonder so many web designers use PHP. Any suggestions for a good web site with PHP tutorials? I use VS 2010 for my .ASP web design - what do people use for PHP?

 

Thanks for your help.

Link to comment
Share on other sites

http://killerphp.com/ can be a useful reference. See http://killerphp.com/tutorials/beginners-php/ for two screencasts explaining PHP includes (or I'm sure there are lots of other resources online for this sort of thing.)

 

There are a lot of tools out there that work with PHP. Look at JetBrains PHPStorm, Eclipse, Netbeans, Aptana, PHPDesigner, etc. I personally use Espresso2 for Mac, but I believe you are using Windows.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...