Hi all,
I am trying to implement some PayPal features into my website with some of theirbutton functionality. In normal HTML, they look fine. But using a CSS template, the form buttons get squashed and funny looking. Is there an easy way to resize them? OR.... is there a better way to do this?
Here's a code snippet from the tag through to the first button. Thanks for your help, -ry
Sorry I think I did that
Sorry I think I did that wrong. here's the code again....
Hi all,
I am trying to implement some PayPal features into my website with some of theirbutton functionality. In normal HTML, they look fine. But using a CSS template, the form buttons get squashed and funny looking. Is there an easy way to resize them? OR.... is there a better way to do this?
Here's a code snippet from the tag through to the first button. Thanks for your help, -ry
<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></p></div> </p><p>
Here's the CSS file /* CSS
Here's the CSS file
/* CSS Credit: <a href="http://www.templatemo.com/ */ body" rel="nofollow">http://www.templatemo.com/ */ body</a> { 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; }