|
November 15, 2007
 A few days ago, I responded to a plea from Robert Phillips to help him fix a formatting error he was getting from his AWeber split test opt in form on his blog. It looked fine in Firefox but was running off the right side of the page and getting clipped in Internet Explorer.
If he was just using the regular HTML opt in box, he could have edited the HTML code and fixed the problem, however, he wanted to perform a split test on his mailing list opt in form and when doing this, AWeber uses a JavaScript inclusion to alter the HTML code that is output to your web page. There are very few options for formatting when using the split test option. However, performing a split test is important enough to warrant some additional work to get it formatted correctly.
AWeber is a great service and I recommend them 100%, that's another reason I'm posting the fix that I sent to Robert.
There are always multiple ways to skin a cat and I'm sure that there are 100 ways to fix this problem. I wanted my fix to be simple to understand and easy for anyone wanting to implement it to modify it for their use.
Robert was already wrapping his opt in form with a div and/or table so that he could give it a yellow background and a border. I kept this and use it in the code I'm posting here, however I moved the parameters for formatting the background color and outline from the HTML code to the CSS file that his blog uses.
Because the two text fields and submit button are all three INPUT type elements, they all respond to the same CSS Class Style. I use this ability to set their widths, and then use a little JavaScript snippet to pick out the Submit button and set it's width to the correct size.
The CSS Classes that I added have specific widths set for Roberts's blog, both for the wrapper and the text input fields. You will need to set them according to your requirements. Try to use a specific pixel amount (ie 200px) because using a percent setting (ie 93%) will cause some additional issues with sizing. Now if you're paying attention, you'll see that some of the classes, and the JavaScript code I created that sets the sizing for the SUBMIT button, uses a % for width: it's OK there because its parent element uses a specific measurement (210px). The problem with sizing seems to pop up in Internet Explorer when you have several nested elements that all use a percentage for width or height: you need a specific size somewhere so that when it renders the page it does it correctly.
To resize the SUBMIT button, I get all the elements on the page with the name of "submit" and then loop through them looking for the correct one by the value of the text that he entered in AWeber for his button. Again, you'll have to edit this to make it work for your situation.
Here's the Code for the CSS file. Put this at the end of your CSS file.
Below is the code for the web page itself. I've x'd out the specific AWeber info from Robert... again, Replace with your AWeber code.
Here's the HTML Code for the web page itself.
What the code does:
- We get the elements on the page that are named "submit" into a collection or array...
- we loop through them to find the correct submit button by value (ie, the text being displayed on the submit button, in this case "Send Me the FREE Report!")...
- YOU need to set the text string in the "if" statement to match the text on YOUR button. Note that this is Case-Sensitive - get the capitalization correct or it will not work...
- if you alternate the text on the button as part of the split test, then you'll need to add the alternate text with an or ("||") statement...
- We could short circuit the loop and stop when I find the button with the correct text, but if there is more than one button, I set them all - may not be the right thing to do but at least it gets the one I'm after...
Why it works:
CSS = Cascading Styles Sheets... and cascading means that the styles we set at the wrapper div that wraps the AWeber form will affect the elements in that form because the styles flow or cascade down into child elements unless overwritten by local style definitions. See my previous blog post on CSS for more information.
You may be wondering how I know what the AWeber code that's written out by their JavaScript looks like. I use a little tool called Instance Source to see it.
Until Next Time,
Fred
P.S. If all this looks like Greek to you, you can learn more about HTML and CSS with my Introduction to Web Site Creation Course, and more about JavaScript with my Interactive Web Site Course.
About the Author
Fred Black is an experienced programmer, web site developer, online business operator, systems integrator, father, husband, musician, and songwriter. Visit his Internet Business Blog at: http://www.pqInternet.com.
|
Posted by Fred on November 15, 2007 | Printer-Friendly
TrackBack: http://www.pqInternet.com/Blog/mt-tb.cgi/95
Assigned Categories:
Web Site Design, HTML, CSS
Related Entries:
|
You may reprint or distribute this article as long as you leave the content and the About the Author resource box at the end intact. |
|
Comments:
-
Hi Fred,
Thanks for putting this up.
I had hacked a solution by changing 2 bits in the original code ie in the Stylesheet.css in theme
--> to 95 - body div#container{width:95%;}
--> to 210 - body div.sidebar{margin:3em 0 2em;overflow:hidden;width:210px;}
Can you explain whether I would be better off using your version and if so why?
Also, on Robert's thread a few people complained about IE not loading their page properly. I have the same problem. I assume it's due to a combination of wordpress, aweber, and perhaps veryplaintext template. Robert's page still has this problem when I checked just now.
Do you have any suggested solutions for this problem that seems to be common too?
Heelppp!
-
|
|
Post A Comment
|
|
Insert your name and e-mail to receive a short notice each time I make a new post.
NOTE: You will receive a confirmation email. You must click the link in the email to subscribe. Please check your spam folder(s) if you don't receive the email.
| |
|
|
|
|
|
|
|
|
|
|
|
|
| |
From Fred...
