Please help me remove the image border.

by Go4DBest

Posted: 14 years ago 11 replies

WEB DESIGN

Greetings Warriors,

I am using a thesis theme to create a squeeze page.

My problem is that there's a border around the button.

Here's the page, Express Income University — Just another WordPress site

I have already tested a lot based on my research but no luck yet.

I really need your help.

Here are my codes for the homepage:

HTML Code:

<div align="center"><font face="Verdana, Geneva, sans-serif" >
  <table width="530" border="0">
    <tr>
      <td align="center" style="padding:1px"> <strong style="font-size:25px; color:#cc0000"><font color="#000000">FREE!</font>*&quot;25 y/old Australian self- </strong></td>
    </tr>
    <tr>
     <td align="center" style="padding:1px"> <strong style="font-size:25px; color:#cc0000"> made millionaire now accepting  </strong></td>
    </tr>
    <tr>
       <td align="center" style="padding:1px"> <strong style="font-size:25px; color:#cc0000"><font color="#000000" face="Verdana, Geneva, sans-serif"> </font>partners, to help grow his company  </strong></td>
    </tr>
    <tr>
      <td align="center" style="padding:1px"> <strong style="font-size:25px; color:#cc0000"><font color="#000000" face="Verdana, Geneva, sans-serif"> </font>to $20 million and beyond..." </strong></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td align="center"><table width="476"  >
  <tr>
    <td width="468"> <div  style="border:dashed 3px #cc0000; background:#ffff99; padding:1px">
      <table width="447"   border=" " >
        <tr>
          <td width="441"    ><!-- Form begins here, change the existing <form > tag only to aweber <form and <input until the last <input> also remove the <div style="display: none;"> of aweber , to increase the text box , add this to input, style="width:85%;" -->
            
           <form method="post" class="af-form-wrapper" action="http://www.aweber.com/scripts/addlead.pl"  >
<div>
<input type="hidden" name="meta_web_form_id" value="1028625762" />
<input type="hidden" name="meta_split_id" value="" />
<input type="hidden" name="listname" value="exinuniversity" />
<input type="hidden" name="redirect" value="http://www.aweber.com/thankyou-coi.htm?m=text" id="redirect_4a71766e32ea64f096ce81eeb1f4bd0f" />

<input type="hidden" name="meta_adtracking" value="My_Web_Form" />
<input type="hidden" name="meta_message" value="1" />
<input type="hidden" name="meta_required" value="email" />

<input type="hidden" name="meta_tooltip" value="" />

<table  border="0" cellpadding="0" cellspacing="0" background="../Jared Sloan/List Of Sites of Jared/lifetimevacationsecrets.com/retail/ ">
                <tr></tr>
                <tr>
                  <td width="767" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr></tr>
                    <tr>
                      <td height="46" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                          <td width="90%"><table width="100%" border="0" cellspacing="0" cellpadding="4">
                            <tr></tr>
                            <tr>
                              <td align="left" width="50%"></td>
                            </tr>
                            <tr>
                              <td align="left"></td>
                            </tr>
                            <tr></tr>
                            <tr>
                              <td align="center"><font face="Century Gothic" size="6" color="#ffffff"><strong> </strong></font> 
                   
                  
                   <br/>
                                 
 <input class="text" id="awf_field-35557562" type="text" name="email"  value="Enter Your Best Email Here"   onfocus="if(this.value == 'Enter Your Best Email Here') { this.value = ''} " 
            onblur="if(this.value == '') { this.value='Enter Your Best Email Here'; }"   style="width:80%; height:40px; font-size:18px;   border:double; border: #FF0"  />
            
            </td>
                            </tr>
                          </table></td>
                        </tr>
                      </table></td>
                    </tr>
                    <tr>
                      <td align="center">
                      <br/><input name="submit" type="image" id="submit" src="http://expressincomeuniversity.com/wp-content/uploads/2012/11/yes-let-me-21.png" border="0" />
                      <br/>
                      
                      </td>
                    </tr>
                    <tr></tr>
                  </table></td>
                </tr>
                <tr></tr>
              </table>
            </form>
            <!-- Form ends here, add below the <script type="text/javascript"> of aweber -->
           
           <script type="text/javascript">
    <!--
    (function() {
        var IE = /*@cc_on!@*/false;
        if (!IE) { return; }
        if (document.compatMode && document.compatMode == 'BackCompat') {
            if (document.getElementById("af-form-631017761")) {
                document.getElementById("af-form-631017761").className = 'af-form af-quirksMode';
            }
            if (document.getElementById("af-body-631017761")) {
                document.getElementById("af-body-631017761").className = "af-body inline af-quirksMode";
            }
            if (document.getElementById("af-header-631017761")) {
                document.getElementById("af-header-631017761").className = "af-header af-quirksMode";
            }
            if (document.getElementById("af-footer-631017761")) {
                document.getElementById("af-footer-631017761").className = "af-footer af-quirksMode";
            }
        }
    })();
    -->
</script>

</td>
        </tr>
      </table>
    </div></td>
  </tr>
</table></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
    </tr>
  </table>
  </font>
</div>

I added some codes as well on the custom.css based on my research, but they are not working.

Thanks,
G.B.

#border #image #remove

taskemann

14 years ago

Add this to your custom CSS:

.post img,.post a img {
border: none transparent;
padding: 0;
margin: 0;
background: transparent;
}

Thanks
1 reply

{{ DiscussionBoard.errors[7368591].message }}

Go4DBest

14 years ago

Originally Posted by taskemann

Add this to your custom CSS:

Thanks for the input, man.

The border is still showing.

These are the custom.css codes:

HTML Code:

/*

File:			custom.css

Description:	Custom styles for Thesis

More Info:		http://diythemes.com/thesis/rtfm/custom-css/

*/
body
{
 background-color: #cccccc;
	font-family: Verdana, Arial, Helvetica, sans-serif;
 }
.custom #footer {
  text-align:center;
font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	color: #0b8052;

}
.custom #footer ul,
 .custom #footer li {
  display:inline;

}
.custom #page {
margin-top:4em;
margin-bottom:1em;
-moz-box-shadow:0 0 25px #6f6e6e;
-webkit-box-shadow:0 0 25px #6f6e6e;
}

.post img,.post a img {
border: none transparent;
padding: 0;
margin: 0;
background: transparent;
}

I added your codes at the very bottom.

Thanks
1 reply

Signature

We setup and design wordpress sites using the Divi theme for roughly 200 USD. Let's talk.

{{ DiscussionBoard.errors[7368608].message }}

taskemann

14 years ago

Hm.. Strange because that code works on all my WP blogs no matter the theme :confused:

Your blog won't load by the way :p

Originally Posted by Go4DBest

Thanks for the input, man.

The border is still showing.

These are the custom.css codes:

HTML Code:

/*

File:            custom.css

Description:    Custom styles for Thesis

More Info:        http://diythemes.com/thesis/rtfm/custom-css/

*/
body
{
 background-color: #cccccc;
    font-family: Verdana, Arial, Helvetica, sans-serif;
 }
.custom #footer {
  text-align:center;
font-family:Verdana, Geneva, sans-serif;
    font-size:12px;
    color: #0b8052;

}
.custom #footer ul,
 .custom #footer li {
  display:inline;

}
.custom #page {
margin-top:4em;
margin-bottom:1em;
-moz-box-shadow:0 0 25px #6f6e6e;
-webkit-box-shadow:0 0 25px #6f6e6e;
}

.post img,.post a img {
border: none transparent;
padding: 0;
margin: 0;
background: transparent;
}

I added your codes at the very bottom.

[ 1 ] Thanks
1 reply

{{ DiscussionBoard.errors[7368629].message }}

Go4DBest 14 years ago

Originally Posted by taskemann

Hm.. Strange because that code works on all my WP blogs no matter the theme :confused:

Your blog won't load by the way :p

Thesis theme is weird sometimes.

I have no idea why my client used justhost.com as his host provider. I refreshed it and it loads just fine here on my end. But sometimes, it loads very slow.
- [ 1 ] Thanks
Signature

We setup and design wordpress sites using the Divi theme for roughly 200 USD. Let's talk.
{{ DiscussionBoard.errors[7368699].message }}

magiclouie 14 years ago

Have you tried this?

.custom #mysubmit {
border: none !important;
}

Just let me know how it goes.
- [ 2 ] Thanks
- 1 reply
{{ DiscussionBoard.errors[7369092].message }}
- Go4DBest 14 years ago
  
  Originally Posted by magiclouie
  
  Have you tried this?
  
  Just let me know how it goes.
  
  Still not working.....
  
  By the way, is the mysubmit in your code is the name of the button?
  
  This is the code of my button:
  
  <input name="submit" type="image" id="submit" src="http://expressincomeuniversity.com/wp-content/uploads/2012/11/yes-let-me-21.png" border="0" />
  
  [ 1 ] Thanks
  
  Signature
  
  We setup and design wordpress sites using the Divi theme for roughly 200 USD. Let's talk.
  
  {{ DiscussionBoard.errors[7369118].message }}
Istvan Horvath 14 years ago

#submit {
padding: 0;
}
- [ 2 ] Thanks
- 1 reply
Signature
{{ DiscussionBoard.errors[7369162].message }}
- Go4DBest 14 years ago
  
  Originally Posted by Istvan Horvath
  
  #submit {
  padding: 0;
  }
  
  A million thanks to you Sir.
  
  The border was gone.
  
  in #submit, submit is the name of the button, right?
  
  Once more, thanks a lot.
  
  I am so delighted.
  
  [ 2 ] Thanks
  
  Signature
  
  We setup and design wordpress sites using the Divi theme for roughly 200 USD. Let's talk.
  
  {{ DiscussionBoard.errors[7369291].message }}
Istvan Horvath 14 years ago

Actually, it is the element's ID. The # sign before an element's name in the stylesheet means "id". Reminder: elements can have id and/or class.
#element = id
.element = class

What happened in the replies above: everybody was just guessing. NOBODY, and I mean not one of the posters took the time to actually look at the HTML code.
If an element has an ID in the html code - that's the first thing you should look for in the CSS! If you cannot find it - then add it and create rules that would influence its behaviour.

P.S. In Chrome the right-click > inspect element can be very useful for questions like the OP.
- [ 3 ] Thanks
Signature
{{ DiscussionBoard.errors[7369408].message }}

ronc0011

14 years ago

Originally Posted by Go4DBest

Greetings Warriors,

I am using a thesis theme to create a squeeze page.

My problem is that there's a border around the button.

Here's the page, Express Income University -- Just another WordPress site

I have already tested a lot based on my research but no luck yet.

I really need your help.

Here are my codes for the homepage:

HTML Code:

<div align="center"><font face="Verdana, Geneva, sans-serif" >
  <table width="530" border="0">
    <tr>
      <td align="center" style="padding:1px"> <strong style="font-size:25px; color:#cc0000"><font color="#000000">FREE!</font>*&quot;25 y/old Australian self- </strong></td>
    </tr>
    <tr>
     <td align="center" style="padding:1px"> <strong style="font-size:25px; color:#cc0000"> made millionaire now accepting  </strong></td>
    </tr>
    <tr>
       <td align="center" style="padding:1px"> <strong style="font-size:25px; color:#cc0000"><font color="#000000" face="Verdana, Geneva, sans-serif"> </font>partners, to help grow his company  </strong></td>
    </tr>
    <tr>
      <td align="center" style="padding:1px"> <strong style="font-size:25px; color:#cc0000"><font color="#000000" face="Verdana, Geneva, sans-serif"> </font>to $20 million and beyond..." </strong></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td align="center"><table width="476"  >
  <tr>
    <td width="468"> <div  style="border:dashed 3px #cc0000; background:#ffff99; padding:1px">
      <table width="447"   border=" " >
        <tr>
          <td width="441"    ><!-- Form begins here, change the existing <form > tag only to aweber <form and <input until the last <input> also remove the <div style="display: none;"> of aweber , to increase the text box , add this to input, style="width:85%;" -->
 
           <form method="post" class="af-form-wrapper" action="http://www.aweber.com/scripts/addlead.pl"  >
<div>
<input type="hidden" name="meta_web_form_id" value="1028625762" />
<input type="hidden" name="meta_split_id" value="" />
<input type="hidden" name="listname" value="exinuniversity" />
<input type="hidden" name="redirect" value="http://www.aweber.com/thankyou-coi.htm?m=text" id="redirect_4a71766e32ea64f096ce81eeb1f4bd0f" />
 
<input type="hidden" name="meta_adtracking" value="My_Web_Form" />
<input type="hidden" name="meta_message" value="1" />
<input type="hidden" name="meta_required" value="email" />
 
<input type="hidden" name="meta_tooltip" value="" />
 
<table  border="0" cellpadding="0" cellspacing="0" background="../Jared Sloan/List Of Sites of Jared/lifetimevacationsecrets.com/retail/ ">
                <tr></tr>
                <tr>
                  <td width="767" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr></tr>
                    <tr>
                      <td height="46" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                          <td width="90%"><table width="100%" border="0" cellspacing="0" cellpadding="4">
                            <tr></tr>
                            <tr>
                              <td align="left" width="50%"></td>
                            </tr>
                            <tr>
                              <td align="left"></td>
                            </tr>
                            <tr></tr>
                            <tr>
                              <td align="center"><font face="Century Gothic" size="6" color="#ffffff"><strong> </strong></font> 
 
 
                   <br/>
 
 <input class="text" id="awf_field-35557562" type="text" name="email"  value="Enter Your Best Email Here"   onfocus="if(this.value == 'Enter Your Best Email Here') { this.value = ''} " 
            onblur="if(this.value == '') { this.value='Enter Your Best Email Here'; }"   style="width:80%; height:40px; font-size:18px;   border:double; border: #FF0"  />
 
            </td>
                            </tr>
                          </table></td>
                        </tr>
                      </table></td>
                    </tr>
                    <tr>
                      <td align="center">
                      <br/><input name="submit" type="image" id="submit" src="http://expressincomeuniversity.com/wp-content/uploads/2012/11/yes-let-me-21.png" border="0" />
                      <br/>
 
                      </td>
                    </tr>
                    <tr></tr>
                  </table></td>
                </tr>
                <tr></tr>
              </table>
            </form>
            <!-- Form ends here, add below the <script type="text/javascript"> of aweber -->
 
           <script type="text/javascript">
    <!--
    (function() {
        var IE = /*@cc_on!@*/false;
        if (!IE) { return; }
        if (document.compatMode && document.compatMode == 'BackCompat') {
            if (document.getElementById("af-form-631017761")) {
                document.getElementById("af-form-631017761").className = 'af-form af-quirksMode';
            }
            if (document.getElementById("af-body-631017761")) {
                document.getElementById("af-body-631017761").className = "af-body inline af-quirksMode";
            }
            if (document.getElementById("af-header-631017761")) {
                document.getElementById("af-header-631017761").className = "af-header af-quirksMode";
            }
            if (document.getElementById("af-footer-631017761")) {
                document.getElementById("af-footer-631017761").className = "af-footer af-quirksMode";
            }
        }
    })();
    -->
</script>
 
</td>
        </tr>
      </table>
    </div></td>
  </tr>
</table></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
    </tr>
  </table>
  </font>
</div>

I added some codes as well on the custom.css based on my research, but they are not working.

Thanks,
G.B.

You have a <div> defined about line 21 inside of a table cell "<td>" You are applying a style on the div with a border defined you need to change that border to border:0; and that should get rid of the border entirely

Thanks
1 reply

{{ DiscussionBoard.errors[7370342].message }}

ronc0011 14 years ago

Unless you are talking about the orange "Let me in" ... OK i think I see what you're talking about I get the border after it's been clicked once That is the "visited " pseudo selector and you need to find that <a> tag where that <img> is used and then apply that border attribute to that tag. So depending on whether this is defined in a Stylesheet or in an inline style that's where you need to make your changes
- Thanks
{{ DiscussionBoard.errors[7370373].message }}

Please help me remove the image border.

Trending Topics

Living a boring life is NOT always a bad thing ...

What's one thing on your bucket list you have to do ??

Ever wonder why great things happen to bad people and horrific things happen to good people??

Do Google Ads Agree to Run an Ended Campaign?

as a newbie