PDA

View Full Version : Paypal Form Messes Up My Table in IE



njr
Apr 24th, 2009, 12:54 AM
To start off, I know very little about HTML coding, and in fact, used Photoshop and Imageready to create my code and use Dreamweaver to edit. I have my own "view cart" image that I want to use in conjunction with Paypal's "view cart" form. Using Dreamweaver, I inserted the code for the form and edited it to be able to use my own image. My page looks great and works well in Firefox, but Internet Explorer messes up the spacing on my entire page. SOOO frustrated! Please help!

Here's the code. The form is about halfway down in red:


<HTML><style type="text/css">
<!--
body {
background-image: url(background.jpg);
}
-->
</style>
<HEAD>
<center>
<TITLE>bracelets</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<!-- ImageReady Preload Script (bracelets.psd) -->
<SCRIPT TYPE="text/javascript">
<!--

function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}

var preloadFlag = false;
function preloadImages() {
if (document.images) {
Beautifully_Jeweled_over = newImage("images/Beautifully-Jeweled-over.gif");
bracelets_05_Beautifully_Jeweled_over = newImage("images/bracelets_05-Beautifully-Je.gif");
Ordering_over = newImage("images/Ordering-over.gif");
Shipping_over = newImage("images/Shipping-over.gif");
Contact_over = newImage("images/Contact-over.gif");
view_cart_over = newImage("images/view-cart-over.gif");
bracelets_15_Ordering_over = newImage("images/bracelets_15-Ordering_over.gif");
bracelets_16_Shipping_over = newImage("images/bracelets_16-Shipping_over.gif");
rachelbracelet_over = newImage("images/rachelbracelet-over.gif");
isabellabracelet_over = newImage("images/isabellabracelet-over.gif");
jessica_over = newImage("images/jessica-over.gif");
Braceletslink_over = newImage("images/Braceletslink-over.gif");
Earringslink_over = newImage("images/Earringslink-over.gif");
Necklaceslink_over = newImage("images/Necklaceslink-over.gif");
bracelets_32_rachelbracelet_over = newImage("images/bracelets_32-rachelbracelet.gif");
bracelets_33_isabellabracelet_over = newImage("images/bracelets_33-isabellabracel.gif");
bracelets_34_jessica_over = newImage("images/bracelets_34-jessica_over.gif");
SupportYourTroopJewelrylink_over = newImage("images/SupportYourTroopJewelryl-54.gif");
juliannabracelet_over = newImage("images/juliannabracelet-over.gif");
elizabeth_over = newImage("images/elizabeth-over.gif");
PersonalizedMamaBraceletslink_over = newImage("images/PersonalizedMamaBracelet-64.gif");
bracelets_43_PersonalizedMamaBraceletslink_over = newImage("images/bracelets_43-PersonalizedMa.gif");
bracelets_45_juliannabracelet_over = newImage("images/bracelets_45-juliannabracel.gif");
bracelets_46_elizabeth_over = newImage("images/bracelets_46-elizabeth_over.gif");
preloadFlag = true;
}
}

// -->
</SCRIPT>
<!-- End Preload Script -->
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=10 MARGINWIDTH=0 MARGINHEIGHT=0 ONLOAD="preloadImages();">
<!-- ImageReady Slices (bracelets.psd) -->
<TABLE WIDTH=799 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD COLSPAN=19>
<IMG SRC="images/bracelets_01.gif" WIDTH=799 HEIGHT=30 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=30 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=3 ROWSPAN=5>
<IMG SRC="images/bracelets_02.gif" WIDTH=186 HEIGHT=162 ALT=""></TD>
<TD COLSPAN=6>
<A HREF="home.html"
ONMOUSEOVER="changeImages('Beautifully_Jeweled', 'images/Beautifully-Jeweled-over.gif', 'bracelets_05', 'images/bracelets_05-Beautifully-Je.gif'); return true;"
ONMOUSEOUT="changeImages('Beautifully_Jeweled', 'images/Beautifully-Jeweled.gif', 'bracelets_05', 'images/bracelets_05.gif'); return true;">
<IMG NAME="Beautifully_Jeweled" SRC="images/Beautifully-Jeweled.gif" WIDTH=216 HEIGHT=105 BORDER=0 ALT=""></A></TD>
<TD COLSPAN=10 ROWSPAN=2>
<IMG SRC="images/bracelets_04.gif" WIDTH=397 HEIGHT=117 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=105 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=6>
<IMG NAME="bracelets_05" SRC="images/bracelets_05.gif" WIDTH=216 HEIGHT=12 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=12 ALT=""></TD>
</TR>
<TR>
<TD ROWSPAN=14>
<IMG SRC="images/bracelets_06.gif" WIDTH=8 HEIGHT=453 ALT=""></TD>
<TD COLSPAN=2>
<A HREF="ordering.htm"
ONMOUSEOVER="changeImages('Ordering', 'images/Ordering-over.gif', 'bracelets_15', 'images/bracelets_15-Ordering_over.gif'); return true;"
ONMOUSEOUT="changeImages('Ordering', 'images/Ordering.gif', 'bracelets_15', 'images/bracelets_15.gif'); return true;">
<IMG NAME="Ordering" SRC="images/Ordering.gif" WIDTH=109 HEIGHT=30 BORDER=0 ALT=""></A></TD>
<TD ROWSPAN=2>
<IMG SRC="images/bracelets_08.gif" WIDTH=38 HEIGHT=42 ALT=""></TD>
<TD COLSPAN=3>
<A HREF="shipping.htm"
ONMOUSEOVER="changeImages('Shipping', 'images/Shipping-over.gif', 'bracelets_16', 'images/bracelets_16-Shipping_over.gif'); return true;"
ONMOUSEOUT="changeImages('Shipping', 'images/Shipping.gif', 'bracelets_16', 'images/bracelets_16.gif'); return true;">
<IMG NAME="Shipping" SRC="images/Shipping.gif" WIDTH=104 HEIGHT=30 BORDER=0 ALT=""></A></TD>
<TD ROWSPAN=2>
<IMG SRC="images/bracelets_10.gif" WIDTH=49 HEIGHT=42 ALT=""></TD>
<TD COLSPAN=3>
<A HREF="contact.html"
ONMOUSEOVER="changeImages('Contact', 'images/Contact-over.gif'); return true;"
ONMOUSEOUT="changeImages('Contact', 'images/Contact.gif'); return true;">
<IMG NAME="Contact" SRC="images/Contact.gif" WIDTH=108 HEIGHT=30 BORDER=0 ALT=""></A></TD>
<TD ROWSPAN=2>
<IMG SRC="images/bracelets_12.gif" WIDTH=32 HEIGHT=42 ALT="">
</TD>
<TD colspan=2 style="margin: 0; padding: 0;">
<form name="_xclick" target="paypal"
action="https://www.paypal.com/cgi-bin/webscr" method="post"
style="margin: 0; padding: 0;">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="[email protected]">
<A HREF="#"
ONMOUSEOVER="changeImages('view_cart',
'images/view-cart-over.gif'); return true;"
ONMOUSEOUT="changeImages('view_cart', 'images/view-cart.gif');
return true;">
<input type="image" NAME="view_cart" SRC="images/view-cart.gif"
WIDTH=93 HEIGHT=30 style="margin: 0; padding: 0;" ALT=""></A>
<input type="hidden" name="display" value="1">
</form>
</TD>
<TD COLSPAN=2 ROWSPAN=2>
<IMG SRC="images/bracelets_14.gif" WIDTH=72 HEIGHT=42 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=30 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=2>
<IMG NAME="bracelets_15" SRC="images/bracelets_15.gif" WIDTH=109 HEIGHT=12 ALT=""></TD>
<TD COLSPAN=3>
<IMG NAME="bracelets_16" SRC="images/bracelets_16.gif" WIDTH=104 HEIGHT=12 ALT=""></TD>
<TD COLSPAN=3>
<IMG SRC="images/bracelets_17.gif" WIDTH=108 HEIGHT=12 ALT=""></TD>
<TD COLSPAN=2>
<IMG SRC="images/bracelets_18.gif" WIDTH=93 HEIGHT=12 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=12 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=3 ROWSPAN=6>
<A HREF="rachelbracelet.html"
ONMOUSEOVER="changeImages('rachelbracelet', 'images/rachelbracelet-over.gif', 'bracelets_32', 'images/bracelets_32-rachelbracelet.gif'); return true;"
ONMOUSEOUT="changeImages('rachelbracelet', 'images/rachelbracelet.gif', 'bracelets_32', 'images/bracelets_32.gif'); return true;">
<IMG NAME="rachelbracelet" SRC="images/rachelbracelet.gif" WIDTH=147 HEIGHT=174 BORDER=0 ALT=""></A></TD>
<TD ROWSPAN=7>
<IMG SRC="images/bracelets_20.gif" WIDTH=55 HEIGHT=197 ALT=""></TD>
<TD COLSPAN=4 ROWSPAN=6>
<A HREF="isabellabracelet.html"
ONMOUSEOVER="changeImages('isabellabracelet', 'images/isabellabracelet-over.gif', 'bracelets_33', 'images/bracelets_33-isabellabracel.gif'); return true;"
ONMOUSEOUT="changeImages('isabellabracelet', 'images/isabellabracelet.gif', 'bracelets_33', 'images/bracelets_33.gif'); return true;">
<IMG NAME="isabellabracelet" SRC="images/isabellabracelet.gif" WIDTH=146 HEIGHT=174 BORDER=0 ALT=""></A></TD>
<TD ROWSPAN=7>
<IMG SRC="images/bracelets_22.gif" WIDTH=47 HEIGHT=197 ALT=""></TD>
<TD COLSPAN=5 ROWSPAN=6>
<A HREF="jessicabracelet.html"
ONMOUSEOVER="changeImages('jessica', 'images/jessica-over.gif', 'bracelets_34', 'images/bracelets_34-jessica_over.gif'); return true;"
ONMOUSEOUT="changeImages('jessica', 'images/jessica.gif', 'bracelets_34', 'images/bracelets_34.gif'); return true;">
<IMG NAME="jessica" SRC="images/jessica.gif" WIDTH=160 HEIGHT=174 BORDER=0 ALT=""></A></TD>
<TD ROWSPAN=12>
<IMG SRC="images/bracelets_24.gif" WIDTH=50 HEIGHT=411 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=3 ALT=""></TD>
</TR>
<TR>
<TD>
<A HREF="bracelets.html"
ONMOUSEOVER="changeImages('Braceletslink', 'images/Braceletslink-over.gif'); return true;"
ONMOUSEOUT="changeImages('Braceletslink', 'images/Braceletslink.gif'); return true;">
<IMG NAME="Braceletslink" SRC="images/Braceletslink.gif" WIDTH=152 HEIGHT=42 BORDER=0 ALT=""></A></TD>
<TD COLSPAN=2 ROWSPAN=8>
<IMG SRC="images/bracelets_26.gif" WIDTH=34 HEIGHT=272 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=42 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="images/bracelets_27.gif" WIDTH=152 HEIGHT=22 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=22 ALT=""></TD>
</TR>
<TR>
<TD>
<A HREF="earrings.html"
ONMOUSEOVER="changeImages('Earringslink', 'images/Earringslink-over.gif'); return true;"
ONMOUSEOUT="changeImages('Earringslink', 'images/Earringslink.gif'); return true;">
<IMG NAME="Earringslink" SRC="images/Earringslink.gif" WIDTH=152 HEIGHT=49 BORDER=0 ALT=""></A></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=49 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="images/bracelets_29.gif" WIDTH=152 HEIGHT=18 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=18 ALT=""></TD>
</TR>
<TR>
<TD>
<A HREF="necklaces.html"
ONMOUSEOVER="changeImages('Necklaceslink', 'images/Necklaceslink-over.gif'); return true;"
ONMOUSEOUT="changeImages('Necklaceslink', 'images/Necklaceslink.gif'); return true;">
<IMG NAME="Necklaceslink" SRC="images/Necklaceslink.gif" WIDTH=152 HEIGHT=40 BORDER=0 ALT=""></A></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=40 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="images/bracelets_31.gif" WIDTH=152 HEIGHT=23 ALT=""></TD>
<TD COLSPAN=3>
<IMG NAME="bracelets_32" SRC="images/bracelets_32.gif" WIDTH=147 HEIGHT=23 ALT=""></TD>
<TD COLSPAN=4>
<IMG NAME="bracelets_33" SRC="images/bracelets_33.gif" WIDTH=146 HEIGHT=23 ALT=""></TD>
<TD COLSPAN=5>
<IMG NAME="bracelets_34" SRC="images/bracelets_34.gif" WIDTH=160 HEIGHT=23 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=23 ALT=""></TD>
</TR>
<TR>
<TD>
<A HREF="supportyourtroopjewelry.html"
ONMOUSEOVER="changeImages('SupportYourTroopJewelrylink', 'images/SupportYourTroopJewelryl-54.gif'); return true;"
ONMOUSEOUT="changeImages('SupportYourTroopJewelrylink', 'images/SupportYourTroopJewelrylink.gif'); return true;">
<IMG NAME="SupportYourTroopJewelrylink" SRC="images/SupportYourTroopJewelrylink.gif" WIDTH=152 HEIGHT=70 BORDER=0 ALT=""></A></TD>
<TD ROWSPAN=5>
<IMG SRC="images/bracelets_36.gif" WIDTH=100 HEIGHT=214 ALT=""></TD>
<TD COLSPAN=5 ROWSPAN=4>
<A HREF="juliannabracelet.html"
ONMOUSEOVER="changeImages('juliannabracelet', 'images/juliannabracelet-over.gif', 'bracelets_45', 'images/bracelets_45-juliannabracel.gif'); return true;"
ONMOUSEOUT="changeImages('juliannabracelet', 'images/juliannabracelet.gif', 'bracelets_45', 'images/bracelets_45.gif'); return true;">
<IMG NAME="juliannabracelet" SRC="images/juliannabracelet.gif" WIDTH=151 HEIGHT=178 BORDER=0 ALT=""></A></TD>
<TD ROWSPAN=5>
<IMG SRC="images/bracelets_38.gif" WIDTH=49 HEIGHT=214 ALT=""></TD>
<TD COLSPAN=5 ROWSPAN=4>
<A HREF="elizabethbracelet.html"
ONMOUSEOVER="changeImages('elizabeth', 'images/elizabeth-over.gif', 'bracelets_46', 'images/bracelets_46-elizabeth_over.gif'); return true;"
ONMOUSEOUT="changeImages('elizabeth', 'images/elizabeth.gif', 'bracelets_46', 'images/bracelets_46.gif'); return true;">
<IMG NAME="elizabeth" SRC="images/elizabeth.gif" WIDTH=153 HEIGHT=178 BORDER=0 ALT=""></A></TD>
<TD COLSPAN=2 ROWSPAN=5>
<IMG SRC="images/bracelets_40.gif" WIDTH=102 HEIGHT=214 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=70 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="images/bracelets_41.gif" WIDTH=152 HEIGHT=8 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=8 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=2>
<A HREF="personalizedmamabracelets.html"
ONMOUSEOVER="changeImages('PersonalizedMamaBraceletslink', 'images/PersonalizedMamaBracelet-64.gif', 'bracelets_43', 'images/bracelets_43-PersonalizedMa.gif'); return true;"
ONMOUSEOUT="changeImages('PersonalizedMamaBraceletslink', 'images/PersonalizedMamaBraceletsli.gif', 'bracelets_43', 'images/bracelets_43.gif'); return true;">
<IMG NAME="PersonalizedMamaBraceletslink" SRC="images/PersonalizedMamaBraceletsli.gif" WIDTH=165 HEIGHT=66 BORDER=0 ALT=""></A></TD>
<TD ROWSPAN=3>
<IMG NAME="bracelets_43" SRC="images/bracelets_43.gif" WIDTH=21 HEIGHT=136 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=66 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=2 ROWSPAN=2>
<IMG SRC="images/bracelets_44.gif" WIDTH=165 HEIGHT=70 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=34 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=5>
<IMG NAME="bracelets_45" SRC="images/bracelets_45.gif" WIDTH=151 HEIGHT=36 ALT=""></TD>
<TD COLSPAN=5>
<IMG NAME="bracelets_46" SRC="images/bracelets_46.gif" WIDTH=153 HEIGHT=36 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=36 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=152 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=13 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=21 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=8 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=100 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=9 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=38 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=55 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=6 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=43 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=49 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=48 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=47 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=13 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=32 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=13 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=80 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=22 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=50 HEIGHT=1 ALT=""></TD>
<TD></TD>
</TR>
</TABLE>
<!-- End ImageReady Slices -->
</BODY>
</center>
</HTML>

abduraooft
Apr 24th, 2009, 10:31 AM
Using Dreamweaver, I inserted the code for the form and edited it to be able to use my own image. Never use DW or editors of that kind in the design view to make your document. You need to hand code your page, by including the most suitable semantic (http://www.boagworld.com/archives/2005/11/semantic_code_what_why_how.html) elements. Also, you should never use tables for your layout, which is considered as very bad. (http://www.hotdesign.com/seybold/). Finally, have a look at http://www.alistapart.com/articles/prettyaccessibleforms to see how to male an accessible form.