...

View Full Version : Paypal button width not working properly



wolfcry044
01-26-2007, 12:50 AM
http://www.uafclan.com
is my website

If you see to the right hand side is a paypal button. I've tried so many things, but I can't get the width to show up properly. It auto stretchese itself to really long. I've even deleted the div's it was nested in, and it was still stretched.

The html for it is in the header, here is the html for all the right side boxes:
**Note** I tried putting height and width elements in the paypal code, however height seemed to work fine, width would not respond. I checked and rechecked the code and it was correct.****


<!------------------- RIGHT Side Box Elements -------------------->
<!-- RIGHT Side Box Elements -->
<div class="class1"><!-- Lnk Properties-->
<div id="inviscontainerrightboxes"><!-- Begin invisible container to hold txt boxes-->


<!-------------BEGIN SIDEBOX ------------>
<!-------------SideBox Header ------------>
<DIV style="height:21px; width:150px; font-size: 14px; background-color: #000000; color: #000000; text-align: center;

font-weight: bold; background-image:url(http://www.uafclan.com/main/assets/sideboxheader.png); background-repeat:

repeat; ">

</div><!--END Div Style -->

<!-------------SideBox Content------------>
<div id="sideboxbackground">
<!-- Side Box Content -->
<span class="boxtext">
<span class="mainbodytext">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</span><!-- END mainbodytext -->
</span><!-- END boxtext -->
</div><!--END Sideboxbackground-->
<!-------------END SIDEBOX------------>

<br>

<!-------------BEGIN SIDEBOX ------------>
<!-------------SideBox Header ------------>
<DIV style="height:21px; width:150px; font-size: 14px; background-color: #000000; color: #000000; text-align: center;

font-weight: bold; background-image:url(http://www.uafclan.com/main/assets/sideboxheader.png); background-repeat:

repeat; ">
Top Donators
</div><!--END Div Style -->

<!-------------SideBox Content------------>
<div id="sideboxbackground">
<!-- Side Box Content -->
<span class="boxtext">
<span class="mainbodytext">

<br>
No Donations have been made to UAF yet
<br>
<br>

</span><!-- END mainbodytext -->
</span><!-- END boxtext -->
</div><!--END Sideboxbackground-->
<!-------------END SIDEBOX------------>

<br>

<!-------------BEGIN SIDEBOX ------------>
<!-------------SideBox Header ------------>
<DIV style="height:21px; width:150px; font-size: 14px; background-color: #000000; color: #000000; text-align: center;

font-weight: bold; background-image:url(http://www.uafclan.com/main/assets/sideboxheader.png); background-repeat:

repeat; ">
Upcomming Events
</div><!--END Div Style -->

<!-------------SideBox Content------------>
<div id="sideboxbackground">
<!-- Side Box Content -->
<span class="boxtext">
<span class="mainbodytext">

<br>
We currently do not have any upcomming events
<br>
<br>

</span><!-- END mainbodytext -->
</span><!-- END boxtext -->
</div><!--END Sideboxbackground-->
<!-------------END SIDEBOX------------>

<br>

<!-------------BEGIN SIDEBOX ------------>
<!-------------SideBox Header ------------>
<DIV style="height:21px; width:150px; font-size: 14px; background-color: #000000; color: #000000; text-align: center;

font-weight: bold; background-image:url(http://www.uafclan.com/main/assets/sideboxheader.png); background-repeat:

repeat; ">
Affiliates
</div><!--END Div Style -->

<!-------------SideBox Content------------>
<div id="sideboxbackground">
<!-- Side Box Content -->
<span class="boxtext">
<span class="mainbodytext">

<br>
We currently do not have any affiliates
<br>
<br>

</span><!-- END mainbodytext -->
</span><!-- END boxtext -->
</div><!--END Sideboxbackground-->
<!-------------END SIDEBOX------------>

<br>

<!-------------BEGIN SIDEBOX ------------>
<!-------------SideBox Header ------------>
<DIV style="height:21px; width:150px; font-size: 14px; background-color: #000000; color: #000000; text-align: center;

font-weight: bold; background-image:url(http://www.uafclan.com/main/assets/sideboxheader.png); background-repeat:

repeat; ">
Get Flash Here!
</div><!--END Div Style -->

<!-------------SideBox Content------------>
<div id="sideboxbackground">
<!-- Side Box Content -->
<span class="boxtext">
<span class="mainbodytext">

<br>

<a href="http://www.adobe.com/shockwave/download/download.cgi"><img

src="http://www.uafclan.com/main/assets/get_flashplayer.gif" border="0" alt="Get Flash Player Here If You Cannot

Properly View the Flash On This Site!"></a>
<br>
<br>


</span><!-- END mainbodytext -->
</span><!-- END boxtext -->
</div><!--END Sideboxbackground-->
<!-------------END SIDEBOX------------>


<br>


<!-------------BEGIN SIDEBOX ------------>
<!-------------SideBox Header ------------>
<DIV style="height:21px; width:150px; font-size: 14px; background-color: #000000; color: #000000; text-align: center;

font-weight: bold; background-image:url(http://www.uafclan.com/main/assets/sideboxheader.png); background-repeat:

repeat; ">
Donate To UAF!
</div><!--END Div Style -->

<!-------------SideBox Content------------>
<div id="sideboxbackground">
<!-- Side Box Content -->
<span class="boxtext">
<span class="mainbodytext">

<br>

<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="wolfcry044@msn.com">
<input type="hidden" name="item_name" value="United Armed Forces">
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="tax" value="0">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="bn" value="PP-DonationsBF">

<input type="image" src="http://www.uafclan.com/main/assets/donate.png" border="0" name="submit" alt="Make payments

with PayPal - it's fast, free and secure!" >

<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

<br>

</span><!-- END mainbodytext -->
</span><!-- END boxtext -->
</div><!--END Sideboxbackground-->
<!-------------END SIDEBOX------------>


<br>

</div><!--END Inviscontainer that wraps around the body to maintain position of text boxes-->
</div><!--END Class1 link properties-->


Here's the CSS Stylesheet:



@charset "utf-8";

/**************************************************************************
* This Style Sheet Controls The Styles, And Graphics Of The Entire Website*
***************************************************************************/


/* --------------------Background Properties-------------------- */


/* --------This Script and the script in the header file Preloads the images so they only have to load once!---------- */
.hiddenPic {display:none;}




body {
font-family:sans-serif;

background-repeat: repeat;
background-color: #000000;
background-position: 0px 0px; position: relative;
background-attachment:fixed;
color: #000000;
text-align: left;
font-size: 13px;

}



.mainbodytext {font-family: sans-serif;
font-size: 13px; color: #ffffff; background-color: transparent;
}


.sidebartext {font-family: sans-serif;
font-size: 14px; color: #C3C4B6; background-color: transparent;
}



/* --------------------Page Graphics-------------------- */

#banner {position:absolute; left:40px; top:0px; z-Index:10;}

#mech {position:absolute; left:20px; top:10px; z-Index:100;}

#menubar {position:absolute; left:40px; top:77px; z-Index:1;}

#undertopbannermorals {position:absolute; left:40px; top:112px; z-Index:1;}

#soldier {position:absolute; left:794px; top:110px; z-Index:100;}

#handbookindex {position:relative; left:200px; }

#copyright { border-color:transparent; border-style:solid; border-width:0px; background-color: transparent; font-size: 10px; text-align:center; font-weight: none; color: #ffffff;}

#inviscontainer { position: absolute; left: 195px; top: 165px; z-Index:1; width: 600px; background-color: transparent; }

#inviscontainerleftboxes { position: absolute; left: 40px; top:366px; z-Index:100; width: 150px; background-color: transparent; }

#inviscontainerrightboxes { position: absolute; left: 803px; top:165px; z-Index:100; width: 150px; background-color: transparent; }

#textboxes { border-color:#5C5950; border-style:solid; border-width:2px; width: 600px; background-color:#252525; font-size: 20px; }

#sideboxbackground { border-color:#5C5950; text-align: center; border-width:0px; width: 150px; background-color: #252525; background-image:url(sideboxbackground.png);font-size: 15px; }






/*--------------------Form CSS for Enlist Page--------------------*/


<style type="text/css">

label{
float: left;
width: 120px;
font-weight: bold;
}

input, textarea{
width: 180px;
margin-bottom: 5px;
}

textarea{
width: 250px;
height: 150px;
}

.boxes{
width: 1em;
}

#submitbutton{
margin-left: 120px;
margin-top: 5px;
width: 90px;
}

br{
clear: right;
}

</style>


/*--------------------Generic Text And Link Attributes--------------------*/



.boxtext { padding: 8px;}


/*--------------------*NOTE* the nowrap code is so the text does not Get out of order
when browser resizes. Not good to use for main body however, just for headers--------------------*/


/* *mental note to self* Remember to make more classes if you need to make different text subjects have different link attributes. Any name can be used
but for simplicity purposes I've chosen class1, class2. etc. change if you wish*/


.class1 a:link { color:#CCCCCC; background-color: transparent; text-decoration: none;}
.class1 a:visited { color:#CCCCCC; background-color: transparent; text-decoration: none;}
.class1 A:active { color:#FFFFFF; background-color: transparent; text-decoration: none;}
.class1 a:hover { background: #B6B7A9; color :#000000; text-decoration: none;}


/*--------------------Text Indent [used anytime anyone uses p tag--------------------*/

p {text-indent: 8px;}



/*--------------------Unique Text Attributes--------------------*/

/*--------------------*REMEMBER, to use whitespace: nowrap; when you dont want text to stretch with browser--------------------*/



/*--------------------Body header is the welcome header unique to each page. --------------------*/

#bodyheader {font-family: sans-serif, Arial, Helvetica; border: 0px; text-decoration:underline overline;
font-size: 18px; font-weight: bold; color: #000000; background-color: transparent; position: absolute; left: 375px; top: 195px;
z-Index:1; white-space: nowrap; width:450px; height: 25px; text-align: center;

}

VIPStephan
01-26-2007, 01:18 AM
You have 105 HTML errors (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.uafclan.com%2F) and at least 3 CSS errors (http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A%2F%2Fwww.uafclan.com%2F). Fixing those might fix your image.

For example I've seen HTML in your CSS file which shouldn't be there:


<style type="text/css">
label{
float: left;
width: 120px;

ArcticFox
01-26-2007, 08:17 AM
WolfCry044, this is your problem:

input, textarea{
width: 180px;
margin-bottom: 5px;
}

wolfcry044
01-26-2007, 08:21 AM
ohhh I forgot that I had made some css for a form I was doing. I didnt realize it interacted with other form elements.

Also, upon validating the code, it messed up my entire site. The boxes that hold the information were DIVS that I was nesting inside an invisible div container so that they would be positioned on the page. They had no length, so that when more boxes were placed, it would let them scroll down the page but it wouldnt go past 600px width.

However I found I was using DIV's more than one time. That was causing many errors. Now that I've tried making them SPAN instead of DIV so that I could use them more than once, the elements in the page are messed up.

how do I fix this? when I try to use span, the background for the headers dont stretch past what the text is. It ignores length and width.

It was all going fine until I validated it. Now I dont know what to do.

ArcticFox
01-26-2007, 08:26 AM
Thanks VIPStephan for violating the new guy's page!

Er, validating...

:D

Wolf, try this:

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


Now re-validate (if you want to), see what comes up, and check how your page looks.

VIPStephan
01-26-2007, 08:32 AM
Hm, sorry 'bout that. I guess sometimes things better stay unspoken...

codingmasta
01-26-2007, 08:37 AM
Nice template, maybe that's paid hehehe lol :)

ArcticFox
01-26-2007, 08:41 AM
And that's 104 Errors on vipstephan.de/ (http://validator.w3.org/check?uri=http%3A%2F%2Fvipstephan.de%2F&charset=%28detect+automatically%29&doctype=SVG+1.1+Basic&verbose=1)!

Unspoken by me, of course.
;)

wolfcry044
01-26-2007, 09:55 AM
The graphics for the site was made entirely by my own hand. It's not a template.

Is there any way to fix it so it works like how I wanted it to but validated as well?

And, I fixed most of the errors. The ones that remain now are because I took the text boxes apart and are trying to figure out how to put them together again. I tried Div, but you can't use a div more than once, and I tried Span, but it messes everything up. That's why I'm asking you guys, is there any other way to get it to work?

felgall
01-26-2007, 10:57 AM
Most people put way too many divs in their page. Usually you can get what you want by applying the style to the particular tags directly rather than having to enclose them in a div. Also you can use as many divs as you need.

It is ids that have to be unique. If you want to apply the same style in multiple places use a class.

wolfcry044
01-26-2007, 10:59 AM
But when I use a class, it makes it to where the background image of the text only stretches as far as the amount of text that is in there. On my site I want there to be headers, that have text aligned to the middle. They are headers of some text boxes. But they all need to be the same size, not just the size the text is that is in the header.

do I use div style just outside the spans?

And what is div class, and how should it be used?

wolfcry044
01-26-2007, 11:23 AM
I've tried div class, and it seems to be working. Is it ok to use div classes more than once?

wolfcry044
01-26-2007, 12:12 PM
Ok, I've figured it out. Div class instead of Div ID was all I needed.

The main page is now 100 percent valid transitional. The rest of the pages are not yet, but at least I have the index page properly coded. Now all I have to do is do the same thing to the side boxes, and then do the same thing to all the other pages on the site.

Thanks for your help guys. I figured classes would work at first, but span class ruined it. Div Class rocks! :thumbsup:

http://www.uafclan.com

dotnet98
03-01-2010, 09:29 PM
Ok, I've figured it out. Div class instead of Div ID was all I needed.

The main page is now 100 percent valid transitional. The rest of the pages are not yet, but at least I have the index page properly coded. Now all I have to do is do the same thing to the side boxes, and then do the same thing to all the other pages on the site.

Thanks for your help guys. I figured classes would work at first, but span class ruined it. Div Class rocks! :thumbsup:

http://www.uafclan.com

Hi,
I am facing the same issue...my paypal button streches out of propotion.
Below is the CSS stle sheet....can you help

/* CSS Document */
* { margin:0; padding:0;}
html, body { height:100%; }
body {font-size:100%; line-height:.9375em; background: url(images/bg.gif) top left repeat-x #e5eced }
html, input, textarea { font-family: Arial, Helvetica, sans-serif;
color:#232323; }

.alignMiddle{ vertical-align:middle}
.alignCenter{ text-align: center}
.container1{ width:100%}
object { vertical-align:top; outline:none}
.clear { clear:both;}
.fleft{ float:left}
.fright{ float:right}
div.container { overflow:hidden; width: 100%;}
a img{ border:0}
img{ vertical-align:top; }

a{color:#38aff3; text-decoration:underline; outline:none}
a:hover{text-decoration:none}

.link{color:#000000; background:url(images/marker.gif) top left no-repeat; padding-left:20px; background-position:0 5px; text-decoration:none; font-size:.916em }
.link:hover{text-decoration:underline }

.button{color:#f8f7f3; background:url(images/button.gif) top left no-repeat; font-weight:bold; padding:1px 8px 5px 9px; text-decoration:none; }
.button:hover{text-decoration:underline }

#content ul{margin:0; padding:0; list-style:none;}
#content ul li{background:url(images/marker1.gif) top left no-repeat; background-position:0 9px; margin:0; padding-left:10px; }
#content ul li a{color:#232323; text-decoration:none ; line-height:1.53em; font-size:13px}
#content ul li a:hover { text-decoration:underline; }
#content ul li span { background:#f9ab8c; color:#fff; font-size:13px; }

#content .ul1{margin:0; padding:0 25px 7px 0; list-style:none;}
#content .ul1 li{background:none; margin:0; padding-left:0; line-height:1.66em; }
#content .ul1 li a{color:#d84348; text-decoration:none; font-size:12px; float:right; font-weight:bold; background: url(images/marker2.gif) top left no-repeat; background-position:0 3px; padding-left:24px}
#content .ul1 li a:hover { text-decoration:underline; }

#content .ul li{background:#e5f3f5; background-position:0 5px; margin:0; padding-left:10px; }
#content .ul .li{background:#fbfbfb;}
#content .ul li a{color:#38aff3; text-decoration:none; line-height:2.16em; font-size:1em}
#content .ul li a:hover { text-decoration:none; color:#000 }

.link-1 { display:block; float:left; background:url(images/link_bg.gif) left top repeat-x; color:#ffffff; text-decoration:none; }
.link-1 em { display:block; background:url(images/link_left.gif) no-repeat left top; font-size:13px}
.link-1 b { display:block; background:url(images/link_right.gif) no-repeat right top; padding:0 15px 0 15px; font-style:normal; line-height:22px}
.link-1:hover{ text-decoration:none; color:#000000}
.link-2 { display:block; float:left; background:url(images/link_bg1.gif) left top repeat-x; color:#ffffff; text-decoration:none; }
.link-2 em { display:block; background:url(images/link_left1.gif) no-repeat left top; font-size:13px}
.link-2 b { display:block; background:url(images/link_right1.gif) no-repeat right top; padding:0 11px 0 11px; font-style:normal; line-height:22px}
.link-2:hover{ text-decoration:none; color:#000000}


/*header*/
#header {font-size:0.75em; color:#FFFFFF }
#header .logo{ margin:35px 0 19px 0 }
#header .block{ background:url(images/jhonson.png) top left no-repeat; height:332px; width:100%; color:#202020 }
#header .indent-block{padding:55px 0 0 27px}
#header .indent{margin:30px 0 0 519px; position:absolute; width:461px; background:url(images/block1.gif) top left no-repeat; height:55px}
#header .indent3{margin:118px 0 0 860px; position:absolute; width:110px; }
#header .indent4{margin:256px 0 0 0; position:absolute; width:980px; }
#header .indent3 a{ color:#000; text-decoration:none; font-weight:bold; font-size:1.08em}
#header .indent3 a:hover{ text-decoration:underline}
#header .indent1{padding:0 0 27px 0; background:url(images/bg_menu.gif) top left no-repeat;}
#header .indent2{padding:16px 0 0 16px;}

#header ul{margin:0; padding:0; list-style:none;}
#header ul li{ margin:0; display:inline; float:left; background:url(images/bg_menu.gif) top right no-repeat;}
#header ul .last{background:none}
#header ul li a{color:#030303; text-decoration:none; display:block; float:left ; padding:0 20px 0 22px; font-weight:bold; line-height:36px; font-size:1.08em}
#header ul li a:hover {color:#fa4348; text-decoration:none; }
#header ul li .current{color:#fa4348; text-decoration:none; }


#header h1{color:#232323; font-size:3.58em; letter-spacing:-1px; line-height:1.2em }
#header h2{color:#232323; font-size:1.83em; letter-spacing:-1px; margin-bottom:19px; line-height:1.2em }
.link-3{color:#232323; font-size:1.33em; line-height:1.2em; background:url(images/marker.gif) center left no-repeat; padding:5px 0 2px 28px; text-decoration:none }
.link-3:hover{ text-decoration:none; color:#1ea7ef}

/*content*/
.bg-cont{ background:#fdfbfb; border:1px solid #c3dbde;}
#content{ font-size:0.75em; width:100%; text-align:left;}
#content .indent-main{padding:15px 27px 30px 26px}
#content .title{ margin-bottom:16px}
#content .img-left{ float:left; margin:0 15px 28px 0}
#content .img-left1{ float:left; margin:0 10px 16px 0}
#content .img-left2{ float:left; margin:0 10px 0 0}
#content .img-left3{ float:left; margin:0 15px 0 0}
#content .img-right{ float:right; margin:0 0 10px 15px}
#content .img-indent{ margin:0 0 16px 0}
#content p{ margin:0 0 17px 0}
#content .p{ margin:0}
#content .p1{ margin:0 0 17px 0}
#content .p2{ margin:0 0 7px 0}
#content h2{color:#000000; background:url(images/tail.gif) bottom left repeat-x; padding-bottom:12px; margin-top:7px; font-size:1.33em; line-height:1.2em; margin-bottom:17px; }
#content h1{color:#fdfdfd; font-size:1.58em; letter-spacing:-1px; line-height:1.2em; margin-bottom:31px;}
#content h1 b{ text-transform:uppercase}
#content h3{color:#111111; font-size:1em; line-height:1.2em; margin-bottom:21px; font-weight:normal }
#content h3 span{color:#111111; font-size:1.83em; line-height:1.2em; margin-bottom:17px; }
#content h5{color:#f64729; font-size:1.33em; line-height:1.2em; margin-bottom:7px; letter-spacing:-1px }
#content h4{color:#f64729; font-size:1em; margin-bottom:13px; font-weight:normal }
#content .tail{ background:url(images/tail.gif) repeat-x bottom; padding-bottom:9px; margin-bottom:9px}
.txt{ color:#000; font-size:1.92em}
.txt1{ color:#8f8f8f}

#content .indent{padding:0 0 0 150px}
#content .indent1{padding:30px 0 0 0}
#content .indent4{padding:0 0 0 16px}
#content .indent2{padding:20px 0 0 16px}
#content .indent3{padding:14px 0 0 0}
#content .indent5{padding:0 0 0 208px}

/*box*/
.box{ background:#fbfbfb; width:100%;}
.box .border-top {background:url(images/border_top.gif) repeat-x top;}
.box .border-bottom {background:url(images/border_bottom.gif) repeat-x bottom;}
.box .border-left {background:url(images/border_left.gif) repeat-y left;}
.box .border-right {background:url(images/border_right.gif) repeat-y right;}
.box .corner-top-left {background:url(images/corner_top_left.gif) no-repeat left top;}
.box .corner-top-right {background:url(images/corner_top_right.gif) no-repeat right top;}
.box .corner-bottom-left {background:url(images/corner_bottom_left.gif) no-repeat left bottom;}
.box .corner-bottom-right {background:url(images/corner_bottom_right.gif) no-repeat right bottom; width:100%; }
.box .indent-box{ padding:12px 16px 16px 16px; }
/*box1*/
.box1{ background:#e5eff0; border:1px solid #d3e4e7; font-size:1.16em; line-height:1.42em}
.box1 .indent-box{ padding:14px 10px 10px 18px; }
#content .box1 h2{color:#000000; background:none; padding-bottom:0; margin-top:0; font-size:2.14em; line-height:1.2em; margin-bottom:17px; letter-spacing:-1px }
/*box2*/
.box2{ background:#fbfbfb; border:1px solid #d3e4e7; font-size:1.16em; line-height:1.42em}
.box2 .indent-box{ padding:14px 10px 10px 18px; }
#content .box2 h2{color:#000000; background:none; padding-bottom:0; margin-top:0; font-size:1.57em; line-height:1.2em; margin-bottom:1px; letter-spacing:-1px }
/*box3*/
.box3{ background:#e5eff0; border:1px solid #d3e4e7;}
.box3 .indent-box{ padding:14px 10px 20px 18px; }
#content .box3 h2{color:#000000; background:none; padding-bottom:0; margin-top:0; font-size:1.83em; line-height:1.2em; margin-bottom:17px; letter-spacing:-1px }
/*box4*/
.box4{ background:#fbfbfb; border:1px solid #d3e4e7; }
.box4 .indent-box{ padding:14px 10px 10px 18px; }
#content .box4 h2{color:#000000; background:none; padding-bottom:0; margin-top:0; font-size:1.83em; line-height:1.2em; margin-bottom:1px; letter-spacing:-1px }

/*footer*/
#footer { color:#232323; font-size:0.75em;}
#footer .indent-footer{ padding:16px 50px 0 37px;}
#footer a {color:#232323; text-decoration:none}
#footer a:hover { text-decoration:underline}

#footer ul{margin:0; padding:0; list-style:none;}
#footer ul li{ margin:0; display:inline; background:url(images/bg_li.gif) center left no-repeat; float:left}
#footer ul li a{color:#38aff3; text-decoration:none; display:block; float:left; padding:2px 15px 2px 15px}
#footer ul li a:hover { text-decoration:underline; }
#footer ul .first{background:none;}
#footer ul .first a{ padding-left:0}


.jamp{ width:113px; margin-left:6px}
select{font-size:12px; color:#2d3331; height:22px; font-family: Arial, Helvetica, sans-serif;}

.indent-2{ position:relative; padding-left:10px; float:left}
.indent-3{ position:relative; padding-left:30px; float:left}
.h{ height:38px}
.h1{ height:30px; background:url(images/bg_input.gif) no-repeat top left}
.block-contact span{ float:right; margin-right:0}
.input{
border:none;
background:none;
width:258px; height:18px;
font-size:1em;
color:#000;
padding-left:10px;
padding-top:2px;
padding-bottom:2px;
}input{
border:1px solid #d3e4e7;
background:#FFFFFF;
width:241px; height:18px;
font-size:1em;
padding-left:10px;
padding-top:3px;
padding-bottom:2px;
}
textarea{
border:1px solid #d3e4e7;
background:#FFFFFF;
width:271px; height:127px;
font-size:1em;
padding-left:10px;
margin-bottom:11px;
overflow:auto}

the button becomes normal if i cange the textarea width but the the entire template gets screwed.....plz help

wolfcry044
03-02-2010, 07:08 AM
Wow, I was last here back in 2007, 3 years ago lol

1. Which of that CSS has to do with the paypal button?
2. Can you post the HTML portion of that paypal button?

bradfo684
05-12-2010, 06:11 AM
Hi Wolfcry, or Anyone who can help,
I'm having the same problem, and I know very very little about html, only the very basics. I don't know what div, etc is, but I do know how to go into the code and replace code. I'm currently using Dreamweaver 8 and added the paypal extension. The following is the code for the paypal button, and again followed by the code for the entire page. Any help would be soooo greatly appreciated. I have been toying with this for hours, with my huge lack of knowledge haha, trying to edit width, height etc, and have had no luck, so anyone's help would be greatly appreciated. My buy now button becomes stretched when I add it and preview it in firefox, though it looks fine in dreamweaver.

Paypal button code:

<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick" />
<input type="hidden" name="bn" value="webassist.dreamweaver.4_5_0" />
<input type="hidden" name="business" value="mygmatadvisor@gmail.com" />
<input type="hidden" name="item_name" value="Philadelphia Weekend Course" />
<input type="hidden" name="item_number" value="Phi1" />
<input type="hidden" name="amount" value="1197" />
<input type="hidden" name="currency_code" value="USD" />
<input type="hidden" name="undefined_quantity" value="1" />
<input type="hidden" name="receiver_email" value="mygmatadvisor@gmail.com" />
<input type="hidden" name="mrb" value="R-3WH47588B4505740X" />
<input type="hidden" name="pal" value="ANNSXSLJLYR2A" />
<input type="hidden" name="no_shipping" value="0" />
<input type="hidden" name="no_note" value="1" />
<input type="image" name="submit" src="http://images.paypal.com/images/x-click-but23.gif" border="0" alt="Make payments with PayPal, it's fast, free, and secure!" />
</form>

Entire code for the page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="layout.css" rel="stylesheet" type="text/css" />
<script src="maxheight.js" type="text/javascript"></script>
<!--[if lt IE 7]>
<script type="text/javascript" src="ie_png.js"></script>
<script type="text/javascript">
ie_png.fix('.png');
</script>
<![endif]-->
<style type="text/css">
<!--
.style2 {font-size: 12px}
.style8 {font-size: 1.02em}
.style9 {font-size: 27px}
.style14 {color: 1111}
.style15 { color: #7eb0d6;
font-size: 0.85em;
}
.style1 {color: #688dc3}
.style19 {font-size: .812; color: #688dc3; }
.style20 {font-size: .812}
.style21 {color: #214880; }
-->
</style>
</head>

<body id="page6" onload="new ElementMaxHeight(); ">
<div class="main">
<div id="header">
<ul class="ul">
<li><a href="index.html">Home</a></li>
<li><a href="index-1.html">About </a></li>
<li><a href="index-2.html">Our Teachers </a></li>
<li><a href="index-3.html">Our Guarantee </a></li>
<li><a href="index-4.html">Locations</a></li>
<li><a href="index-5.html">FAQ</a></li>
<li class="last"><a href="index-6.html" class="current">Enroll</a></li>
</ul>
<div class="flag"><span class="style14"><span class="style15">help@mygmatadvisor.com :: 646-418-2425 </span></span></div>
<a href="index.html"><img alt="" src="images/logo.gif" class="logo" /></a><br />
<div class="container">
<div class="col-1">
<div class="indent1 txt">
<h2><strong><span class="style8">My GMAT Adviso</span>r </strong><br />
<span class="style9">Personal Experts to<br />
help you succeed.</span> </h2>
<p class="style2">The best teachers, personalized attention</p>
<p class="style2">(small classes with 1-5 students in each),</p>
<p class="style2">convenient location, save time. Proven</p>
<p class="style2">inovative strategies to master the GMAT and </p>
<p class="style2">guarantee you success. It's what we do. </p>
<h2><br />
</h2>
<div class="indent"><a href="#" class="button">Learn More</a></div>
</div>
</div>
<div class="col-2">
<div class="indent2">
<ul class="ul1">
<li><a href="index-4.html">Course Dates </a></li>
<li><a href="index-6.html">Private Tutoring </a></li>
<li><a href="index-8.html">Contact </a></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
<div id="content">
<div class="indent-main">
<div class="container">
<div class="col-1">
<div class="box">
<div class="left-top-corner png">
<div class="right-top-corner-1 png">
<div class="border-top png"></div>
</div>
</div>
<div class="xcontent png">
<div class="indent-box5">
<h2>Enroll Now</h2>
<p><span class="style1"><span class="style20">Weekend Course:</span></span></p>
<p>**- Small personalized classes (1-5 students in each)<br />
**- The top professors in the field<br />
**- Proven inovative strategies to master the GMAT that are unmatched in the industry<br />
**- Our Guarantee - We guarantee you will increase your score by 55 points or we will provide free private *****tutoring until you do and pay for your next GMAT! <br />
**- Convenient and comfortable classrooms <br />
**- And much more! </p>
<p>We will prepare you for your future. </p>
<p class="style1">Only $1197!</p>
<p class="style1">At My GMAT Advisor we wanted the most secure way to enroll. That's why we chose Paypal, the safest, most secure way to pay online. </p>
<p class="style21">Enroll Now:</p>
<p class="style19">Philadelphia:*May 22 &amp; 23 (2010): Center City Philadelphia

<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick" />
<input type="hidden" name="bn" value="webassist.dreamweaver.4_5_0" />
<input type="hidden" name="business" value="mygmatadvisor@gmail.com" />
<input type="hidden" name="item_name" value="Philadelphia Weekend Course" />
<input type="hidden" name="item_number" value="Phi1" />
<input type="hidden" name="amount" value="1197" />
<input type="hidden" name="currency_code" value="USD" />
<input type="hidden" name="undefined_quantity" value="1" />
<input type="hidden" name="receiver_email" value="mygmatadvisor@gmail.com" />
<input type="hidden" name="mrb" value="R-3WH47588B4505740X" />
<input type="hidden" name="pal" value="ANNSXSLJLYR2A" />
<input type="hidden" name="no_shipping" value="0" />
<input type="hidden" name="no_note" value="1" />
<input type="image" name="submit" src="http://images.paypal.com/images/x-click-but23.gif" border="0" alt="Make payments with PayPal, it's fast, free, and secure!" />
</form>
</p>
</p>
<p>&nbsp;</p>
<p><br />
</p>
</div>
</div>
<div class="left-bottom-corner png">
<div class="right-bottom-corner png">
<div class="border-bottom png"></div>
</div>
</div>
</div>
</div>
<div class="col-2"><img alt="" src="images/bg-2.gif" /></div>
<div class="col-3">
<div class="box">
<div class="left-top-corner-2 png">
<div class="right-top-corner png">
<div class="border-top png"></div>
</div>
</div>
<div class="xcontent png">
<div class="indent-box4">
<p class="txt2"><span class="container1"><img src="images/6page_img1.jpg" alt="guy teaching girl and both smiling" width="158" height="87" class="img-left" /></span></p>
<p class="txt2">&nbsp;</p>
</div>
</div>
<div class="left-bottom-corner png">
<div class="right-bottom-corner png">
<div class="border-bottom png"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="indent-footer">My GMAT Advisor &copy; 2010</div>
</div>
</div>
</body>
</html>



Thank you so much.
Brad

ArcticFox
05-12-2010, 01:03 PM
Hi Wolfcry, or Anyone who can help,

<input
type="image"
name="submit"
src="http://images.paypal.com/images/x-click-but23.gif"
height="23" width="68"
border="0"
alt="Make payments with PayPal, it's fast, free, and secure!" />

bradfo684
05-12-2010, 02:29 PM
Hi ArcticFox,
Thank you so much for offering your help. It's greatly appreciated. I inputed the changes, but the button is still stretched though, any other ideas?
Thanks again,
Brad

wolfcry044
09-24-2010, 01:58 AM
Change the height and width to whatever makes it looks best

Aenima
01-24-2011, 05:06 PM
Hello!

I am encountering the same problem on my website... But before I can explain the problem, I just need to say that I am an amateur with coding.. this is pretty much the first website I have ever realized, using a template and basic html. (I hope my not-so-clean code will not offend anyone :P)

here is the website: www.terredessourires.org

When I try, the button is streched horizontally. I can change the height using height="xx" in the image attribute, but nothing works for the width... Here is an example of one of the pages the code will appear on, just below "1 donation= 1'000 smiles", on the right hand side.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Terre Des Sourires</title>
<link href="css/style.css" media="all" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/s3Slider.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
<!--[if lt IE 7]>
<script type="text/javascript" src="js/unitpngfix.js"></script>
<![endif]-->
</head>

<body>
<div id="page-wrapper"><!-- begin wrapper -->
<div id="header" class="wrapper"><!-- begin header -->
<div id="logo-container">
<h1 id="logo"><a href="index_en.html">Terre Des Sourires</a></h1>

</div>
<div id="search">
<a href="partenaires.html"><img src="images/france.png" alt="fr" /></a>
<a href="partenaires_en.html"><img src="images/britain.png" alt="en" /></a>
<a href="partenaires_de.html"><img src="images/germany.png" alt="en" /></a>
</div>
</div><!-- end header -->
<div id="navigation"><!-- begin navigation -->
<ul>
<li><a href="index_en.html" class="current">home </a></li>
<li><a href="about_en.html">wo we are</a></li>
<li><a href="actions_en.html">what we do</a></li>
<li><a href="laos_en.html">Laos</a></li>
<li><a href="partenaires_en.html">our partners</a></li>
<li><a href="news_en.html">News</a></li>
<li><a href="images_en.html">Images</a></li>
<li><a href="contacts_en.html" class="last">Contacts</a></li>
</ul>
</div><!-- end navigation -->
<div id="content" class="wrapper"><!-- begin content -->
<div id="content-left"><!-- begin content-left -->
<h2>Our Partners</h2>
<p>These companies have trusted us and we are thankful for their support of our actions in Laos:</p>
<ul class="service-client">
<li><strong>Pictet</strong> - Banquiers privťs depuis 1805</li>
<a href="http://www.pictet.com/" target=_blank><img src="logos/pictet.jpg" alt="" width="215" height="90" /></a>
<li><strong>Commune de Meyrin</strong> - Canton de GenÍve</li>
<a href="http://www.chene-bourg.ch/" target=_blank><img src="logos/meyrin.jpg" alt="" width="214" height="100" /></a>
<li><strong>SIG</strong> - Services industriels de GenÍve</li>
<a href="http://www.sig-ge.ch/" target=_blank><img src="logos/logo_sig.gif" alt="" width="133" height="133" /></a>
<li><strong>Jean-Sťbastien Monzani</strong> - Graphic Design</li>
<p><a href="http://www.jsmonzani.com/" target=_blank><img src="logos/jsmonzani.gif" alt="" width="220" height="76" /></a></p>
<br />
<li><strong>Virtua</strong>- Agence Web</li>
<a href="http://www.virtua.ch/" target=_blank><img src="logos/virtua.png" alt="" width="236" height="134" /></a>
<li><strong>C&amp;A</strong> - La mode ŗ prix sympa.</li>
<a href="http://www.c-et-a.ch/" target=_blank><img src="logos/C_and_A-logo-2CEF3F337D-seeklogo.com.gif" alt="" width="150" height="150" /></a>
<li><strong>comtoGether</strong>- La plateforme de Communication.</li>
<a href="http://www.comtogether.com/" target=_blank><img src="logos/ctg.jpg" alt="" width="200" height="101" /></a>
<li><strong>Commune de ChÍne-Bourg</strong> - Canton de GenÍve</li>
<a href="http://www.chene-bourg.ch/" target=_blank><img src="logos/chenebourg.jpg" alt="" width="181" height="131" /></a>

</ul>



</div><!-- end content-left -->

<div id="content-right"><!-- begin content-right -->
<h2>Lao faces</h2>
<img src="images/tresor4.jpg"/>


<p></p>

<br /><h2>1 Donation = 1'000 Smiles</h2>
<p class="text">
Thank you for your support !<br /></p>
<p class="name"><strong>- Postal Account -</strong></p>
<p class="text">
Association Terre des Sourires<br />
1239 Collex-Bossy<br />
Account CCP 10-747484-1</p>

<p class="name"><strong>- International Transfers -</strong></p>
<p class="text">IBAN : CH24 09000 00010 747484-1<br />
SWIFT (BIC): POFICHBEXXX<br />
Swiss Post<br />
PostFinance<br />
Nordring 8<br />
CH3030 Bern </p>
</div>
</div><!-- end content-right -->




</div><!-- end content -->
<div id="push"></div>
</div><!-- end wrapper -->

<div id="footer"><!-- begin footer -->
<div id="footer-wrapper" class="wrapper">
<p>&copy; 2010 www.terredessourires.org</p>
<ul id="footer-nav">
<li class="first"><a href="index_en.html" class="current">Home</a></li>
<li><a href="about_en.html">Wo we are</a></li>
<li><a href="actions_en.html">What we do</a></li>
<li><a href="laos_en.html">Laos</a></li>
<li><a href="partenaires_en.html">Partners</a></li>
<li><a href="news_en.html">News</a></li>
<li><a href="images_en.html">Images</a></li>
<li><a href="contacts_en.html" class="last">Contacts</a></li>
</ul>
</div>
</div><!-- end footer -->

</body>
</html>


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

And here is the code for the button.


<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="R52GEVRQA8DEW">
<input type="image" src="http://www.terredessourires.org/images/donate_fr.gif" border="0" name="submit" alt="PayPal - la solution de paiement en ligne la plus simple et la plus sťcurisťe !">
<img alt="" border="0" src="https://www.paypal.com/fr_FR/i/scr/pixel.gif" width="1" height="1">
</form>

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

Once again, I will probably not understand anything too technical, so if anyone has a simple way of correcting this, it would be hugely appreciated!

Thanks in advance...

VIPStephan
01-25-2011, 12:46 AM
Aenima, you may be unexpierienced with forum etiquette so Iím just gonna tell you for now:


Please donít hijack other peopleís threads, create your own one if you need help.
When you post your code please use the small Ď#í button in the reply window as this makes it a lot easier to scan your post.


Now, I donít see any Paypal button on your website so I canít say whatís wrong or what you need to do. Please help us to help you.

Aenima
01-26-2011, 03:21 PM
Hello VIPStephan,

Thank you for your answer. I am sorry about hijacking the post, I thought his problem was solved...

I have uploaded a page with the button on it: http://www.terredessourires.org/partenaires_en.html

You'll see that the button is obviously too big and nothing I tried worked. Also, it doesn't do anything when I click on it...

What am I doing wrong? is there some sort of conflict going on?

Thanks in advance for your answer!

abduraooft
01-26-2011, 03:30 PM
You've

input, textarea
{ border: 1px solid #dddddd; background: #eeeded; width: 300px; margin: 5px; padding: 3px;}
, in your CSS file ,which is not very specific (http://htmldog.com/guides/cssadvanced/specificity/) and thus it's affecting the width of that paypal button too.

You may add a class to that button, like

<input type="image" class="paypal" border="0" alt="PayPal - The safer, easier way to pay online!" name="submit" src="https://www.paypal.com/en_US/CH/i/btn/btn_donateCC_LG.gif"> and then add an extra rule in you CSS like

input.paypal{
width:auto;
} to override this.

Aenima
01-27-2011, 10:29 AM
Hello!

Thank you very much, simple solution indeed, and it worked fine. But this had no effect on the clicking problem...

Paypal only advises to copy the code where you want the button, nothing else to set up really, but my button doesn't seem clickable... Any idea on how to solve this?

abduraooft
01-27-2011, 10:43 AM
<script type="text/javascript" src="js/scripts.js"></script>

Your js/scripts.js has
$("form").submit(function(){
which is also not specific. It interferes with the submit action of your paypal form too (your may test this by removing or disabling script in your page).

I think, changing the above code to


$("form#contact-form").submit(function(){
Or removing that particular script tag from this page will fix everything!

PS: How many forms are there in your site?

Aenima
01-28-2011, 12:07 PM
Yep, thanks once again, I changed the scripts.js code and it works fine!!

There should be 3 forms: one contact form in each language.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum