CSS and paypal button

Question

Darla 0 Newbie Poster

10 Years Ago

I seem to have a problem with a paypal button.
I am using expression web 4 to design this site
I wanted the paypal button to show up on all the pages, so I placed it on my dwt page.
In design view, the button is fine, but on the website the button is too large and blurry.
It is so large it goes off the page itself.
I tried to use the smaller button, but the results are the same.
So i am thinking somewhere in my styles.css file there is an error, but I can't find it
Please, can anyone help me out here?
Thanks in advance

gui web-design

3 Contributors
9 Replies
569 Views
3 Weeks Discussion Span
Latest Post 9 Years Ago Latest Post by Darla

All 9 Replies

patk570 42 Newbie Poster

10 Years Ago

post code for button?

iamthwee

9 Years Ago

width and height should be in pixels eg 200px or whatever the image is.

patk570 42 Newbie Poster

9 Years Ago

try this:

#rightside .paypal{height:15px; width:45px;}

then add the class to the form of class='paypal'

Edited 9 Years Ago by patk570

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Darla 0 Newbie Poster · Answer 1 · 2014-04-20T18:13:57+00:00

sorry for the delay, I still need your help. I have altered it a bit through the css file, but it is still not right. I don't know what I am missing.

here is the button code

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="JBT9VTPMNZSBU">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="10" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

Darla 0 Newbie Poster · Answer 2 · 2014-04-22T15:16:41+00:00

ok I changed the "1" to "1px" in the html part of the page--no change in the button

here is the css code

#rightside h2       { margin:20px 0 10px 0; }
#rightside p        { margin:8px 0; line-height:160%; }
#rightside input    { margin-left:-110px;  }
#rightside input img{ padding:8px; border:1px #888888 solid; margin:18px; }

here is the page where I have the extra large button http://www.ubangels.com/

I can't seem to find my error that is making that button so large. In design view it is the perfect size.

thanks for any help you can give me

Darla 0 Newbie Poster · Answer 3 · 2014-04-23T17:07:49+00:00

Ok I still get no change
I should mention here, that I am new to all the css styles and all, so I prob don't understand what I am looking for.
Anyway, here is a copy of my styles.css file Did I put your suggested changes in the correct place, I have a feeling the class paypal is added in the wrong place? Thanks for your help

/* Color Legend */


/* Reset */

html, body { margin: 0; padding: 0; border: 0;  
                background: transparent; font-size:10px; }

div, span, article, aside, footer, header, hgroup, nav, section,
h1, h2, h3, h4, h5, h6, p, blockquote, a, ol, ul, li, 
table, tr, th, td, tbody, tfoot, thead {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    background: transparent;
    }

img     { margin:0; padding:0; border:0; }

table, tr, th, td, tbody, tfoot, thead {
    margin: 0; padding: 0; border: 0;
    vertical-align: baseline;
    background: transparent;
    }

table { border-collapse: collapse; border-spacing: 0; }

input, select, textarea, form, fieldset {
    margin: 0; padding: 0; border: 0;
    }

article, aside, dialog, figure, footer, header, hgroup, nav, section { 
    display:block; }

h1, h2, h3, h4, h5, h6, p, li, blockquote, td, th, a, caption, em, strong, strike { 
    font-family: Arial, Helvetica, sans-serif;
    font-size:100%;
    font-weight: normal;
    font-style: normal;
    line-height: 100%; 
    text-indent: 0;
    text-decoration: none;
    text-align: left;
    color: #000;
    }

ol, ul { list-style: none; }


/* Global */

html    {   }
body    { background-color:#3E003E; }



/* Headings */

h1, h2, h3, h4, h5, h6 { font-weight: bold; color: #000; }

h1 { font-size:24px; }
h2 { font-size:20px; }
h3 { font-size:16px; }
h4 { font-size:14px; }
h5 { font-size:14px; }
h6 { font-size:14px; }

h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin: 0; }



/* Text Elements */

p               { color:#000; font-size:12px; line-height:150%;  }
p .left         { margin: 1.5em 1.5em 1.5em 0; padding: 0; }
p .right        { margin: 1.5em 0 1.5em 1.5em; padding: 0; }

a               {   }
a:link          { color: #00f;  }
a:visited       { color: #0f0;  }
a:active        { color: #000;  }
a:focus         { color: #666;  }
a:hover         { color: #f00;  }

blockquote      { color:#000; font-size:12px; }

strong          { font-weight: bold; }
em              { font-style: italic; }

/* Images */



/* Lists */

ul              {  }
ol              { list-style-type:decimal; }

ul li           { color:#000; font-size:12px; }
ol li           { color:#000; font-size:12px; }

dl              {   }
dt              {   }
dd              {   }



/* Tables */

table           { width:100%; }

tr              {   }
.odd            { background-color:#eee; }
.even           { background-color:#fff; }

th              { font-weight: bold; }
thead, th       { background: #ccc; }

tbody           {   }

th,td,caption   {   }
caption         {   }

tfoot           {   }
.tfooter        { background-color:#ccc; text-align:center; font-style:italic; }

caption         { background: #efefef; }


/* Containers */

#wrapper            { width:900px; margin:0px auto; background-color:#ffffff;  }

#top                { background-color:#006666; width:100%; padding:20px 0px; overflow:hidden;   }

#logo               { margin: 0 0 0 10px; float:left;   }

#social-media       { float:right; margin:0 10px 0 0;   }
#social-media p     { color:#ffffff; font-size:11px; margin:4px 10px 4px 0px; }
#social-media img   { width:24px; height:24px; }
#social-media ul li { display:inline; }

#topnav             { background-color:#333333; clear:both;  }
#topnav ul          { width:100%; float:left; margin:0px; background-color:#3E003E; 
                        border-bottom:3px #cccccc solid; }
#topnav ul li       { display:inline; }
#topnav ul li a     { float:left; padding:10px 20px; }

#topnav a:link      { color:#ffffff; }
#topnav a:visited   { color:#ffffff; }
#topnav a:active    { color:#ffffff; }
#topnav a:hover     { color:#ffffff; background-color:#006666; }
#topnav a:focus     { color:#ffffff; }


#banner             {   }

#subbanner          { width:100%; background-color:#006666; 
                        padding:15px 0; overflow:hidden;  }
#subbanner h3       { color:#000000; font-size:30px; font-weight:bold;
                        text-align:center; line-height:180%; }

#content            { float:left; width:650px; padding:20px;   }
#content h1         { margin:0 0 20px 0; font-size:32px; 
                        border-bottom:1px #777777 solid; padding:20px 0; }
#content p          { margin:16px 0; line-height:160%;}
#content h2         { margin:20px 0 0 0; }
#content img        { padding:8px; border:1px #888888 solid; margin:8px; }

#rightside          { padding:20px; margin-left:675px;  }
#rightside .paypal  {height:15px; width:45px;}
#rightside h2       { margin:20px 0 10px 0; }
#rightside p        { margin:8px 0; line-height:160%; }
#rightside input    { margin-left:-110px;  }
#rightside input img{ padding:8px; border:1px #888888 solid; margin:18px; }


#footer             { clear:both; background-color:#006666; padding:10px 0;  }
#footer p           { text-align:center; color:#000000; }


#box1 {   }

#box2 {   }

#box3 {   }

#box4 {   }

#box5 {   }

#box6 {   }


/* Layout Extra */




/* Navigation Extra */



/* Forms */

form ol { list-style-type:none; }

form    { text-align:left; margin:20px; }

label   { 
        float: left; width: 150px; margin-top:5px;
        text-align:right; display:block; background:none; font-weight:bold;
        }

submit  { background:none;  }

input   { 
        width: 280px; margin:0 0 16px 10px;
        border:1px #bbb solid; padding:5px; background:none; 
        }

input:focus, textarea:focus { background-color:#BFEBFF; }

textarea {
        width: 280px; height: 150px; margin:0 0 16px 10px;
        border:1px #bbb solid; padding:5px; background:none; 
        }

select { margin-bottom:20px;    }

.month { margin-left:155px; }

.submit {
        width:90px; height:25px;
        margin-left:160px;
        font-size:12px;
        }

.clear  { clear:both; }

class='paypal'

patk570 42 Newbie Poster · Answer 4 · 2014-04-23T17:31:39+00:00

Please use the </>Code button to paste code, please resubmit it...

Darla 0 Newbie Poster · Answer 5 · 2014-04-23T19:01:03+00:00

I did use that button, did I do something wrong? I see I have a pm about it too. but I don't know what I did wrong. I really did use that code button to post this

Darla 0 Newbie Poster · Answer 6 · 2014-05-01T19:27:12+00:00

here is a repost of the code i really hope I did this right

/* Color Legend */


/* Reset */

html, body { margin: 0; padding: 0; border: 0;  
                background: transparent; font-size:10px; }

div, span, article, aside, footer, header, hgroup, nav, section,
h1, h2, h3, h4, h5, h6, p, blockquote, a, ol, ul, li, 
table, tr, th, td, tbody, tfoot, thead {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    background: transparent;
    }

img     { margin:0; padding:0; border:0; }

table, tr, th, td, tbody, tfoot, thead {
    margin: 0; padding: 0; border: 0;
    vertical-align: baseline;
    background: transparent;
    }

table { border-collapse: collapse; border-spacing: 0; }

input, select, textarea, form, fieldset {
    margin: 0; padding: 0; border: 0;
    }

article, aside, dialog, figure, footer, header, hgroup, nav, section { 
    display:block; }

h1, h2, h3, h4, h5, h6, p, li, blockquote, td, th, a, caption, em, strong, strike { 
    font-family: Arial, Helvetica, sans-serif;
    font-size:100%;
    font-weight: normal;
    font-style: normal;
    line-height: 100%; 
    text-indent: 0;
    text-decoration: none;
    text-align: left;
    color: #000;
    }

ol, ul { list-style: none; }


/* Global */

html    {   }
body    { background-color:#3E003E; }



/* Headings */

h1, h2, h3, h4, h5, h6 { font-weight: bold; color: #000; }

h1 { font-size:24px; }
h2 { font-size:20px; }
h3 { font-size:16px; }
h4 { font-size:14px; }
h5 { font-size:14px; }
h6 { font-size:14px; }

h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin: 0; }



/* Text Elements */

p               { color:#000; font-size:12px; line-height:150%;  }
p .left         { margin: 1.5em 1.5em 1.5em 0; padding: 0; }
p .right        { margin: 1.5em 0 1.5em 1.5em; padding: 0; }

a               {   }
a:link          { color: #00f;  }
a:visited       { color: #0f0;  }
a:active        { color: #000;  }
a:focus         { color: #666;  }
a:hover         { color: #f00;  }

blockquote      { color:#000; font-size:12px; }

strong          { font-weight: bold; }
em              { font-style: italic; }

/* Images */



/* Lists */

ul              {  }
ol              { list-style-type:decimal; }

ul li           { color:#000; font-size:12px; }
ol li           { color:#000; font-size:12px; }

dl              {   }
dt              {   }
dd              {   }



/* Tables */

table           { width:100%; }

tr              {   }
.odd            { background-color:#eee; }
.even           { background-color:#fff; }

th              { font-weight: bold; }
thead, th       { background: #ccc; }

tbody           {   }

th,td,caption   {   }
caption         {   }

tfoot           {   }
.tfooter        { background-color:#ccc; text-align:center; font-style:italic; }

caption         { background: #efefef; }


/* Containers */

#wrapper            { width:900px; margin:0px auto; background-color:#ffffff;  }

#top                { background-color:#006666; width:100%; padding:20px 0px; overflow:hidden;   }

#logo               { margin: 0 0 0 10px; float:left;   }

#social-media       { float:right; margin:0 10px 0 0;   }
#social-media p     { color:#ffffff; font-size:11px; margin:4px 10px 4px 0px; }
#social-media img   { width:24px; height:24px; }
#social-media ul li { display:inline; }

#topnav             { background-color:#333333; clear:both;  }
#topnav ul          { width:100%; float:left; margin:0px; background-color:#3E003E; 
                        border-bottom:3px #cccccc solid; }
#topnav ul li       { display:inline; }
#topnav ul li a     { float:left; padding:10px 20px; }

#topnav a:link      { color:#ffffff; }
#topnav a:visited   { color:#ffffff; }
#topnav a:active    { color:#ffffff; }
#topnav a:hover     { color:#ffffff; background-color:#006666; }
#topnav a:focus     { color:#ffffff; }


#banner             {   }

#subbanner          { width:100%; background-color:#006666; 
                        padding:15px 0; overflow:hidden;  }
#subbanner h3       { color:#000000; font-size:30px; font-weight:bold;
                        text-align:center; line-height:180%; }

#content            { float:left; width:650px; padding:20px;   }
#content h1         { margin:0 0 20px 0; font-size:32px; 
                        border-bottom:1px #777777 solid; padding:20px 0; }
#content p          { margin:16px 0; line-height:160%;}
#content h2         { margin:20px 0 0 0; }
#content img        { padding:8px; border:1px #888888 solid; margin:8px; }

#rightside          { padding:20px; margin-left:675px;  }
#rightside .paypal  {height:15px; width:45px;}
#rightside h2       { margin:20px 0 10px 0; }
#rightside p        { margin:8px 0; line-height:160%; }
#rightside input    { margin-left:-110px;  }
#rightside input img{ padding:8px; border:1px #888888 solid; margin:18px; }


#footer             { clear:both; background-color:#006666; padding:10px 0;  }
#footer p           { text-align:center; color:#000000; }


#box1 {   }

#box2 {   }

#box3 {   }

#box4 {   }

#box5 {   }

#box6 {   }


/* Layout Extra */




/* Navigation Extra */



/* Forms */

form ol { list-style-type:none; }

form    { text-align:left; margin:20px; }

label   { 
        float: left; width: 150px; margin-top:5px;
        text-align:right; display:block; background:none; font-weight:bold;
        }

submit  { background:none;  }

input   { 
        width: 280px; margin:0 0 16px 10px;
        border:1px #bbb solid; padding:5px; background:none; 
        }

input:focus, textarea:focus { background-color:#BFEBFF; }

textarea {
        width: 280px; height: 150px; margin:0 0 16px 10px;
        border:1px #bbb solid; padding:5px; background:none; 
        }

select { margin-bottom:20px;    }

.month { margin-left:155px; }

.submit {
        width:90px; height:25px;
        margin-left:160px;
        font-size:12px;
        }

.clear  { clear:both; }

class='paypal'

CSS and paypal button

Recommended Answers Collapse Answers

All 9 Replies

Recommended Answers