Copy link to clipboard
Copied
I have a question. I am trying to implement some PayPal features into my website with some their custom button functionality. In normal HTML, the buttons look fine. But using a CSS template, the form buttons get squashed and funny looking. Is there an easy way to resize them?
(I'm using Dreamweaver CS4 on a WinVista machine)
Any help is greatly appreciated.
-ryan
Copy link to clipboard
Copied
Without seeing any code from the HTML and CSS, our guess is as good as yours.
Copy link to clipboard
Copied
Here is the code from the <body> tag through the first button.
<div id="container">
<div id="header">
<div id="title">
<div id="sitetitle">Music <span>Store</span></div>
</div>
<div id="login"></div>
</div>
<div id="banner">
<div id="banner_text">
<div id="banner_title">Ordering information</div>
<p> </p>
<div class="more_button"></div>
</div>
</div>
<div id="menu"><center>
<ul>
<li><a href="http://store.ryansheeler.com" class="current">Main Page</a></li>
<li><a href="About/AboutRyanMusic.html">Artist Bio</a></li>
<li></li>
<li><a href="CD.html">Albums</a></li>
<li><a href="Lyrics.html">Lyrics</a></li>
<li><a href="order.html">Ordering</a></li>
<li><a href="http://ryansheeler.com/ContactMe.html" class="lastmenu">Contact</a></li>
</ul>
</center>
</div>
<div id="content">
<p><span class="style34">My CDs can be purchased directly from me here:</span></p>
<p> </p>
</div>
<table width="574" border="1" align="center">
<tr>
<td width="356"><img src="images/PCL Album Front Cover.jpg" width="175" height="175" /> Polk County Line (2011)</td>
<td width="202"><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="7PX9MQJVE3E6Y">
<input name="submit2" type="image" class="current" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" alt="PayPal - The safer, easier way to pay online!" border="0" />
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
</td>
</tr>
<tr>
Copy link to clipboard
Copied
and here is the ENTIRE CSS file
/*
CSS Credit: http://www.templatemo.com/
*/
body {
margin:0;
padding:0;
line-height: 1.5em;
font-family: Helvetica, Arial, sans-serif;
font-size: 11px;
color: #FFFFFF;
background: #FFFFFF;
}
h1 {
margin: 0 0 25px 0;
padding: 10px 0 10px 15px;
font-size: 20px;
font-weight: bold;
color: #ffc601;
background: #000000;
border-bottom: 1px solid #b4a08a;
}
h2 {
width: 235px;
height: 25px;
padding: 15px 0 0 35px;
margin: 0 0 25px -10px;
font-size: 16px;
color: #6c5b4c;
background: url(images/left_heading_background.gif) no-repeat;
}
h3 {
margin: 0 0 5px 0;
padding: 0;
font-weight: bold;
font-size: 14px;
color: #ffc601;
}
h4 {
margin: 0 0 5px 0;
padding: 0;
font-weight: bold;
font-size: 12px;
color: #999999;
text-align: center;
}
.rantsection {
height: 13px;
margin-bottom: 10px;
}
.rantsection img {
float: left;
height: 13px;
width: 13px;
border: 0px;
margin-right: 5px;
}
a:link, a:visited { color: #999999; text-decoration: none;}
a:active, a:hover { color: #999999; text-decoration: underline;}
.more_button a{
clear: both;
text-align: center;
display: block;
width: 60px;
padding: 1px 0;
margin-bottom: 5px;
background: #6c5b4c;
border-bottom: 1px solid #a59180;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
}
.download_button a{
float: right;
text-align: center;
width: 65px;
padding: 1px 0;
background: #6c5b4c;
border-bottom: 1px solid #a59180;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
}
img {
border: 1px solid #6c5b4c;
}
/* ----- Form ----- */
.form_row{
margin-bottom: 3px;
}
form{
margin: 0;
padding: 0;
text-align: right;
}
label {
margin-right: 10px;
}
input{
width: 130px;
height: 18px;
padding: 1px 0;
line-height: normal;
color: #99836c;
border: 1px solid #99836c;
background: #400a0a;
font-size: 14px;
}
select{
color: #99836c;
}
.button{
width: 60px;
line-height: normal;
margin: 0;
height: 23px;
}
/* End of Form */
#container {
margin: 0px auto;
width: 970px;
background: url(images/main_background.gif) repeat-y;
}
/*------------ Header --------------- */
#header {
float: left;
width: 900px;
padding: 0 35px;
margin: 15px 0 10px 0;
}
#title {
float: left;
width: 300px;
}
#sitetitle {
padding: 30px 0 10px 0;
font-size: 4.0em;
font-weight: bold;
color: #FF9933;
}
#sitetitle span{
font-weight: normal;
color: #FFFFFF;
}
#login {
float: right;
margin-top: 25px;
width: 300px;
}
/* -------------- End of Header------------------ */
/* --------- Banner ---------- */
#banner {
clear: both;
width: 970px;
height: 256px;
background: url(images/banner.jpg) no-repeat;
}
#banner_text {
padding: 60px 0 0 225px;
width: 550px;
}
#banner_title{
margin: 0 0 25px 0;
padding: 0;
font-size: 24px;
font-weight: bold;
color: #ffc601;
}
#banner_text p{
margin: 0 0 25px 0;
padding: 0;
}
/* --------- End of Banner ---------- */
/*--- Menu ---*/
#menu{
float: left;
width: 970px;
height: 51px;
background: url(images/menu_background.gif) no-repeat;
}
#menu ul {
float: left;
margin: 0;
padding: 10px 0 0 40px;
list-style: none;
}
#menu ul li{
display: inline;
}
#menu ul li a{
float: left;
width: 140px;
height: 20px;
margin-top: 10px;
padding: 0;
font-size: 1.1em;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #CCCCCC;
border-right: 1px solid #CCCCCC;
}
#menu ul li .lastmenu{
border-right: none;
}
#menu li a:hover, #menu li .current{
color: #FFCC33;
}
/*--- End of Menu ---*/
/*--- Content ---*/
#content {
float: left;
margin: 0;
padding: 0 10px;
width: 950px;
color: #FC3;
text-align: center;
}
/*--- Left Column---*/
#left_column {
float: left;
margin: 20px 10px 0 0;
padding: 0px;
width: 235px;
}
.left_col_box {
margin: 0 0 25px 25px;
color: #AAA;
}
.blog_box {
padding-bottom: 15px;
margin-bottom: 15px;
border-bottom: 1px solid #220404;
}
.blog_box h3 a{
font-size: 12px;
color: #d3a401;
}
.blog_box span{
color: #99836c;
}
/*--- End of Left Column---*/
/*--- Right Column---*/
#right_column {
float: right;
margin: 25px 25px 0 0;
padding: 0;
width: 650px;
}
.right_panel_fullwidth {
float: left;
width: 650px;
padding: 0 0 25px 0;
}
.right_panel_fullwidth img{
float: left;
margin: 3px 10px 0 0;
}
.right_panel_fullwidth_content {
float: left;
width: 620px;
padding: 0 15px 25px 15px;
}
.right_panel_fullwidth_content p{
text-align: justify;
}
#new_released_section {
float: left;
width: 650px;
margin: 0 0 30px 0;
}
.new_released_box {
float: left;
width: 180px;
margin: 0 10px 0 15px;
text-align: center;
}
.new_released_box img{
margin-bottom: 5px;
}
#news_section {
float: left;
width: 310px;
margin: 0 25px 0 0;
}
.news_box {
float: left;
width: 280px;
margin: 0 15px 25px 15px;
}
.news_box img{
float: left;
width: 110px;
margin: 3px 10px 0 0;
border: 1px solid #333333;
}
.news_box p{
margin: 0;
padding: 0;
}
#topdownload_section {
float: right;
width: 300px;
padding: 0;
margin: 0;
background: #99836c;
}
.topdownload_box {
float: left;
width: 270px;
padding-bottom: 5px;
margin: 0 15px 10px 15px;
color: #24211d;
font-weight: bold;
border-bottom: 1px solid #6b5946;
}
* html .topdownload_box {
margin: 0 15px 10px 7px;
}
.topdownload_box span{
font-weight: normal;
}
.title_singer{
float: left;
width: 200px;
}
/*--- End of Right Column---*/
/*--- End of Content ---*/
/* ----- Footer ----- */
#footer {
clear: both;
padding: 15px 0;
width: 950px;
margin: 0 10px;
text-align: center;
color: #000000;
background: #6c5b4c;
text-align: center;
}
#footer a{
color: #000000;
}
#footer a:hover{
color: #cccc66;
}
/* ----- End of Footer ----- */
#container #content #right_column #new_released_section .new_released_box h3 {
text-align: center;
}
Get ready! An upgraded Adobe Community experience is coming in January.
Learn more