CSS and paypal button

Question

Member #5881

12 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

html-css:bootstrap web-design

3 Contributors
9 Replies
600 Views
3 Weeks Discussion Span
Latest Post 12 Years Ago Latest Post by Member #5881

Dani AI

Generated 10 Months Ago

The button is being scaled by your stylesheet. A global rule that targets all inputs is forcing the PayPal input type="image" to enlarge, which makes the image blurry and can push it off the page. was right that CSS sizes need units (px), and ’s idea of using a class is sensible — but the class must be applied to the input itself (and not accidentally left as stray text in the CSS file).

Fixes to apply (in this order):

Remove the stray text class='paypal' from the bottom of your styles.css — it’s invalid CSS and should be deleted.
Add a specific override for image inputs so the global input rule can’t scale them. Put something like this in your CSS (different from the rules you already tried):

/* prevent the PayPal image from being stretched */
#rightside input[type="image"] {
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  display: inline-block;
}

Or give the actual image input a class and size that class (apply the class on the <input type="image">, not on the form). Example CSS pattern:

#rightside .paypal-btn {
  width: /* set to the image's native pixel width, e.g. 150px */;
  height: auto;
  padding: 0;
  border: 0;
}

Quick troubleshooting tips: open DevTools (Inspect Element) on the button and look at Computed Styles to see which rule is setting the width. Temporarily comment out your global input { width: ... } to confirm that it’s the culprit. Also check for large negative margins on elements in the right column — those can push the button off-screen. Applying one of the targeted fixes above will keep the PayPal image at its natural size and restore crispness.

All 9 Replies

patk570 42 Newbie Poster

12 Years Ago

post code for button?

Member #46692

12 Years Ago

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

patk570 42 Newbie Poster

12 Years Ago

try this:

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

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

Edited 12 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.

Member #5881 · 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="" 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>

Member #5881 · 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

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

Member #5881 · 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...

Member #5881 · 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

Member #5881 · 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

Dani AI

Recommended Answers Collapse Answers

All 9 Replies

Recommended Answers