Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

Question: how to resize form buttons in a CSS

New Here ,
Nov 14, 2011 Nov 14, 2011

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

16.7K
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Nov 14, 2011 Nov 14, 2011

Without seeing any code from the HTML and CSS, our guess is as good as yours.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 14, 2011 Nov 14, 2011

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>

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 14, 2011 Nov 14, 2011
LATEST

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;

}

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines