0

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

3
Contributors
9
Replies
42
Views
4 Years
Discussion Span
Last Post by Darla
0

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>

Edited by Dani: Formatting fixed

0

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

0

try this:

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

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

Edited by patk570

0

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'
0

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

Edited by Darla

0

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'
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.