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

Recommended Answers

post code for button?

Jump to Post

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

Jump to Post

try this:

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

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

Jump to Post

All 9 Replies

post code for button?

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>

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

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

try this:

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

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

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'

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

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

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'
Be a part of the DaniWeb community

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