You are here:   Home
Register   |  Login

Programmer Newsletter

Minimize

Master Programmer

Minimize

Find articles on computer software, programming, ASP.net, Sql server, databases, C#, websites, Internet, Windows, Outlook macros.

Programming Articles

Minimize
04

Like Aweber email service a lot. They have a nice form generation feature, but the other day, their forms started showing up with scrollbars.

Have fixed this problem and provided the solution to Aweber. Below are details which may serve as an example to help you find problems.

The problem was caused because Aweber added an OVERFLOW:auto; attribute to one of the css styles. This turned on the scroll bars. Using Internet Explorer, I was able to find this by going into Tools, Developer Tools and saving the html. All the styles were displayed and I could see this particular one.

To fix this problem, I overrode the style after the form was put on the page. Like this.

<style type="text/css">
#af-form-xxxx {OVERFLOW: hidden;}
</style>

Aweber said the problem only happened on Internet Explorer. I told Aweber they could say the problem only happened in Opera, but IE is the major browser, so if the form does not work in IE, it does not work.

When Internet Explorer does not work like other browsers it is often because the DOCTYPE was not specified.

Maybe this problem was not caused by Aweber after all.

Asp.net effectively only allows one form per page. Since I use DotNetNuke, which uses Asp.net, I had to put the Aweber form in an IFRAME. The page I created to go in the IFRAME did not have a DOCTYPE. Oops, my bad.

Put this code to the top of my page that went in the IFRAME and the scrollbars went away.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xml:lang="en-US" lang="en-US" xmlns="http://www.w3.org/1999/xhtml">

The poor woman at the Aweber help desk that I had been bothering, called me to get more information about the problem. When she said that the problem only happened in Internet Explorer, I figured out what was wrong.

Interesting how the brain works. It takes a village to solve a problem. The solution is there, but you need a lot of input coming from different places to trigger the right associations.

Sent Aweber the following code to fix the problems with the scrollbars and breaking out of an IFRAME.

-----------------------------

This code is included in an iframe to work on asp.net.

Needs the doctype to make IE work like other browsers.

Form tag needs target="_blank" to open in a new window

-----------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"">

<html xml:lang="en-US" lang="en-US" xmlns="http://www.w3.org/1999/xhtml">

<head>

<script type="text/javascript" src="http://www.internethandholding.com/v/js/br_page.js"></script>

</head>

<body>

<script type="text/javascript" src="http://forms.aweber.com/form/12/123456789.js"></script>

<script type="text/javascript">br_page.Forms_Attribute_All("target", "_blank");

</script>

</body></html>

//---------------------------------------------------------

// Copyright (c) 2004 to present by Bronze Inc. All rights reserved.

// 352-327-3672, Box 14303, Gainesville, FL, 32604, US

//---------------------------------------------------------

function br_page_Class() {

this.Attribute_Set = br_page_Attribute_Set;

this.Attribute_Set_All = br_page_Attribute_Set_All;

}

//---------------------------------------------------------

function br_page_Attribute_Set(item, attribute, value) {

var newattribute = document.createAttribute(attribute);

newattribute.value = value;

item.attributes.setNamedItem(newattribute);

}

//---------------------------------------------------------

// Args:

// value - value to use

// Change same attribute on all

function br_page_Attribute_Set_All(collection, attribute, value) {

if (!collection) return;

if (!attribute) return;

value = value || "";

var n = collection.length;

for (var i = 0; i < n; i++)

this.Attribute_Set(collection[i], attribute, value);

}

//---------------------------------------------------------

// Args:

// value - value to use

// Change same attribute on all forms

function br_page_Forms_Attribute_All(attribute, value) {

this.Attribute_Set_All(document.forms, attribute, value);

}

//---------------------------------------------------------

br_page=new br_page_Class();

//---------------------------------------------------------

Post Rating

Comments

Erik
Tuesday, April 20, 2010 5:56 AM
I came by your story since I have exactly the same problem. I am using the javascript snippet from Aweber. And I also traced the problem down to the overflow: auto css.

The code delivered by Aweber does not contain the doctype as you mention. HOw did you add it, are you using the rax html version of the form?
bronze
# bronze
Tuesday, April 20, 2010 6:46 AM
Put the DOCTYPE and HTML tags, as specified above, at the top of your page that includes the Aweber javascript. Like this psuedo code.

DOCTYPE ...
HTML ...
...
aweber SCRIPT

Post Comment

Name (required)

Email (required)

Website

Programmer Newsletter

Minimize

Subscribe to the Internet Handholding newsletter

MAKE YOUR PC SUPER FAST Discover 5 Shockingly Simple Techniques That Will Make Any Old Computer Run At Top Speed.

Drive Traffic to Your Website with Article Underground. Increase Your Visitors and Your Profits.

HOW TO HYPNOTIZE ANYONE AT WILL! Amazing Secrets to Hypnotize Anyone, Anywhere, at Any Time for Whatever Reason.



Programming Bookmark

Minimize

Share/Bookmark Bookmark and Share