17 Replies Latest reply on Oct 31, 2012 10:27 PM by sudarshan.t

    How to remove border around paypal option button??

    Seaside333 Level 1

      Ok I have a paypal "add to cart" button that has "options" pull down to select colors.

       

      I have this button inside of a table, and the button uses the table tag also for the options part it looks like.

       

      Well the button is taking on the original tables CSS styles and creating a border around the paypal options.

       

      I tried making Classes, and different rules, etc. I don't know what i am doing wrong but I cannot remove that border from the paypal option button.

       

      Here is the HTML for the button inside of the table:

       

      <td><div class="center"> <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="ABMN7P2JKL">

      <table>

      <tr><td><input type="hidden" name="on0" value="Choose Color">Choose Color</td></tr><tr><td><select name="os0">

          <option value="Black">Black </option>

          <option value="Red">Red </option>

      </select> </td></tr>

      </table>

      <input type="image" src= "assets/add_to_cart.png" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">

      <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">

      </form>

      </div>

       

      Here is the CSS for the table:

       

      .table {

          border:1px solid black;

          table-width:100%;

      }

      .table th {

          border:1px solid black;

          table-width:100%;

          }

      .table td {

          border:1px solid black;

          table-width:100%;

          }

        • 1. Re: How to remove border around paypal option button??
          Seaside333 Level 1

          More info

           

          I was able to get rid of the two borders by adding inline styles to two of the paypal option td's

           

          td sytle="border:none;"

           

          So i got it doing what i want, but the styles are inline, i would like to put them on external style sheet.

           

          I tried adding a class to the "td" but cannot make it work, i don't get it.

           

          Here is updated code that works, but uses inline styles:

           

          <td><div class="center"> <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="ABMN7P2JKL">

          <table>

          <tr><td style="border:none;"><input type="hidden" name="on0" value="Choose Color">Choose Color</td></tr><tr><td style="border;none;"><select name="os0">

              <option value="Black">Black </option>

              <option value="Red">Red </option>

          </select> </td></tr>

          </table>

          <input type="image" src= "assets/add_to_cart.png" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">

          <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">

          </form>

          </div>

          • 2. Re: How to remove border around paypal option button??
            sudarshan.t Level 6

            Instead of directly adding to td in your CSS, add it to a separate selector and assign that class to your HTML.

             

            For example, your CSS:

             

            .noborder{

            border: none;

            }

            Then, your HTML:

             

            <td class="noborder">.....</td>

            • 3. Re: How to remove border around paypal option button??
              Seaside333 Level 1

              I tried that already. But just tried it again, to make sure I didn't leave anything out, etc. and it still does not work, only inline style does...strange.

               

              You know what else it could be? or i could try?

              thanks

              • 4. Re: How to remove border around paypal option button??
                sudarshan.t Level 6

                Can you post a link to your actual webpage here so I can take a look at it and help you fix it? If it is sensitive, do mention that and myself or one of the moderators here will ensure it is removed after your issue is resolved.

                • 5. Re: How to remove border around paypal option button??
                  Jon Fritz II Adobe Community Professional & MVP

                  Sometimes when I have this issue, where only inline styles will change an element, there is a definition in the css stylesheet that comes after what I am trying to define that sets it to something else. For example, I want all links to be blue, so I set the css with the following...

                   

                  a {color:blue;}

                   

                  then the rest of my css follows...


                  td {border:none;}

                  p {font-family:verdana;}

                  table {background-color:green;}

                  p a {color:red;}

                   

                  and the html looks like this...

                   

                  <td>

                  <p><a  href="link.html">TEXT</a></p>

                  </td>

                   

                  But since there is a later definition for a link that comes after a <p> tag ( p a {color:red} ) that defines it as red, the link will show as red, not blue. This can also happen if something is defined in a second stylesheet linked in the head of the page. You could be changing it in stylesheet1, but it's being redefined in stylesheet2...

                   

                  <head>

                  <link href="../css/stylesheet1.css" rel="stylesheet" type="text/css" />

                  <link href="../css/stylessheet2.css" rel="stylesheet" type="text/css" />

                  </head>

                   

                  Might not be what's happening here, but it's worth looking into if you have a lot of css. A good way to check is to use Firefox's Inspect Element function. It will show you all css for a given item and tell you where it's coming from.

                  • 6. Re: How to remove border around paypal option button??
                    Seaside333 Level 1

                    that makes sense and sounds like it should work. I have been playing around with the CSS and HTML and can't figure out how to write it.

                     

                    B/c it is basically a table within a table.

                     

                    Ok so say the CSS for the first table is:

                     

                    .table th, td {border:1px solid black;}

                     

                    Now how would I write the CSS for the second table? the table that is inside of the first table.

                    • 7. Re: How to remove border around paypal option button??
                      sudarshan.t Level 6

                      As asked earlier, can you post a link to your webpage so we can help you sort this out in no time.

                      • 8. Re: How to remove border around paypal option button??
                        Seaside333 Level 1

                        Sorry, it is not published online yet.

                        • 9. Re: How to remove border around paypal option button??
                          Seaside333 Level 1

                          Just update of what I am trying to do:

                           

                          Basically I have a table that lists services, prices, and add to cart paypal buttons.

                           

                          Everything works fine and looks great, except I am using two inline styles, that I would like to bring to an external style sheet instead.

                           

                          The reason I am using the inline styles: One of the paypal buttons has a drop down option menu...that option menu is made from a <table>. All the paypal buttons including the one with the option menu are inside of my main table, so the paypal with option button is creating a table within a table that is adapting the styles set for my main table.  The style is a border that goes around the option button.

                          The only way I can stop it, is by using inline styles.

                           

                          I tried adding some CSS that sets the border to none:

                           

                          .noborder {border:none;}

                           

                          then add HTML class to the paypal td section, but that does not work. Only inline style stops border:  <td class="border:none;">

                          • 10. Re: How to remove border around paypal option button??
                            sudarshan.t Level 6

                            Are you targeting the child elements properly if they're contained within another div or another tag?

                             

                            Here's what you can do.

                             

                            Select the line of code where you begin <td> that you want to style in 'Code view'. Open CSS styles panel. Click to add a New CSS Rule. DW will automatically give you the name of the target tag specific selector. Create your CSS rule from there and save it to your CSS file or within your HTML file's stylesheet. That will definitely work. And once it does, you can read the selector to know what you've been missing out on.

                            • 11. Re: How to remove border around paypal option button??
                              Seaside333 Level 1

                              So i am able to get it working using inline style.

                               

                              Now I am able to get it working using the "!important" class

                               

                              Or using ID <td id="....">

                               

                               

                              I tried what you just said and it is an extremely long css rule

                               

                              .container .content .tableone tr td . center form table tr td {border:none;}

                               

                              but it works too!!!

                               

                              So i have four ways that work now

                               

                              inline style = which you don't really want to use

                              !important = which i think you don't really want to use either

                              ID = which is ok i think, but you should use class whenever possible

                              Class = you just showed me how to make, it is really long but works.

                               

                              Is there a way to edit that class to make shorter/more simple?

                              Out of those four which way would you choose and why?

                              • 12. Re: How to remove border around paypal option button??
                                Jon Fritz II Adobe Community Professional & MVP

                                I think setting IDs is probably the most ideal way to do what you are trying.

                                • 13. Re: How to remove border around paypal option button??
                                  sudarshan.t Level 6

                                  Class = you just showed me how to make, it is really long but works.

                                  What I showed you does not necessarily create 'class'. It is a compound selection that is a combination of all classes & ids that lead to the chosen tag that you want to write a rule for. It is long because is is a 'compound selector' which is based on your selection. DW nests every tag that leads to the chosen tag so it is 'very-specific' to that particular <td> within that particular <table> within that particular <td> of another <table> of another <div>. It is a targeted selector only for one usage of one element on your webpage.

                                   

                                  No, you cannot make it shorter. Unless you nest your content within multiple divs and assign them its own class/ id. Or, you can always write javascript to make it work that way - but it'd be a more complex way of doing it and needs a fair bit of understanding of JS.

                                  Out of those four which way would you choose and why?

                                  That really depends. !important is fine. It overrides other styling rules for that object and makes the associated rule a 'priority' meaning like Jon said earlier, if you have more than 1 rule for the same element, !important on the 3rd rule will ignore all previous rules for that specific tag for that element. Keep in mind if your CSS says border: 0 !important;, only border properties set in previous rules are ignored. Other properties you may have created rules for previously will stay intact.

                                   

                                  inline style - Definitely not. I will not use it.

                                   

                                  ID - I guess you're confusing yourself here. #table vs .table - is the exact same thing. But rule of thumb, IDs target single usage per page - for example, are best recommended for nav sections, header & footer, etc... Classes can be used more than 1 time per page. This is, according to 'web standard' so to say. But most browsers will show your content just fine even if you have the same ID used across a page more than once.

                                   

                                  Another primary usage for ID is when you write a jQuery or Javascript piece of code, you can target your IDs in your document very specifically.

                                   

                                  Trust this helps.

                                  • 14. Re: How to remove border around paypal option button??
                                    Seaside333 Level 1

                                    I think i am going to go with the ID tag.

                                    The paypal button has two different tables inside the one button, so i will just create two IDs with different names, but the same rule {border:none;} b/c i know you only suppose to use one ID per page.

                                     

                                    I have one more question:

                                     

                                    You said #table and .table are the same.

                                    Can you please explain to me then why #table worked and .table did not, if they are both the same? I just want to be able to understand it more clearly.

                                     

                                    thanks

                                    • 15. Re: How to remove border around paypal option button??
                                      Nancy OShea Adobe Community Professional & MVP

                                      #table = an ID which carries greater importance than a class, but ID's can be used only 1 time per page.

                                       

                                      .table = a class name with less importance than ID, but classes can be re-used as often as needed.

                                       

                                      Sometimes, styles for parent elements will trump styles in classes.  But it all depends on what else is going on in your site.

                                       

                                       

                                      Nancy O.

                                      • 16. Re: How to remove border around paypal option button??
                                        Seaside333 Level 1

                                        Thanks for clearing that up for me! and thanks to everyone here for help!

                                        • 17. Re: How to remove border around paypal option button??
                                          sudarshan.t Level 6

                                          @Seaside333, You may want to check out this webpage for a very nice article that talks about the difference between ID and classes: http://css-tricks.com/the-difference-between-id-and-class/