I'm using a Wordpress plugin for a newsletter, and basically, there's a code that you can place anywhere on your website and it will include a form with email and submit button in that place, for users to subscribe to the newsletter basically.

 

This form is made out of a table, and here's what it looks like:

 

(click on image, I know, the preview looks small)

 

As you can see, there's three horizontal lines around the form. I'm trying to remove these, but I don't manage to do so.

 

Here's the form itself:

<script type="text/javascript">
//<![CDATA[
if (typeof newsletter_check !== "function") {
window.newsletter_check = function (f) {
    var re = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-]{1,})+\.)+([a-zA-Z0-9]{2,})+$/;
    if (!re.test(f.elements["ne"].value)) {
        alert("The email is not correct");
        return false;
    }
    for (var i=1; i<20; i++) {
    if (f.elements["np" + i] && f.elements["np" + i].required && f.elements["np" + i].value == "") {
        alert("");
        return false;
    }
    }
    if (f.elements["ny"] && !f.elements["ny"].checked) {
        alert("You must accept the privacy statement");
        return false;
    }
    return true;
}
}
//]]>
</script>

<div class="newsletter newsletter-subscription">
<form method="post" action="http://logicbenchmarks.com/?na=s" onsubmit="return newsletter_check(this)">

<table cellspacing="0" cellpadding="3" border="0">

<!-- email -->
<tr>
	<td align="left"><input class="newsletter-email" type="email" value="Your Email" name="ne" size="30" required></td>
</tr>

<tr>
	<td colspan="2" class="newsletter-td-submit">
		<input class="newsletter-submit" type="submit" value="Subscribe"/>
	</td>
</tr>

</table>
</form>
</div>

I tried to add border: none; to "table", to "newsletter", etc. but it didn't do anything. I then coloured the borders in red and noticed that this horizontal line isn't even the border. The red border was then on top of those lines. I added border-bottom: none; and then I could see the red borders that were left (all except the bottom ones basically), and those horizontal lines.

 

Anyone know what they are? And how I get rid of them?

Edited March 21, 201610 yr by Revs

Could really do with seeing the site so that we can check the CSS that is doing this, as there could be a number of factors causing this.

Could really do with seeing the site so that we can check the CSS that is doing this, as there could be a number of factors causing this.

 

Not sure why I never got a notification for your reply, because it seems like I'm subscribed to this thread.

 

Anyway, the site isn't really online, so it's kind of hard. What would these factors be for example? I could look out for them. But is this even an <hr>? I believe not. I don't think it's part of the table either?

It's not an <hr>, but it probably is a definition for either table, tr or td. If you cannot find the right place in the stylesheet or cannot find the stylesheet itself you can override the setting by adding this inside each <table>, <tr> and <td> tag:

style="border:0px solid transparent"

There could be numerous examples, so you should really get a live example up if you want help

 

e.g

might not be a border, could be an outline.

could be an !important rule preventing you from simply overriding the border rule

could be pseudo element showing the border

might not be the element you think it is showing the border, might be another one

 

those are a few examples off the top of my head, but i'm sure there are others

 

Live example if you want help..

This is the problem with these plugins, they should just provide an API that you send your form data to, instead you end up with a pile of bad markup and horrible CSS.

 

If you have to use it then open up the Chrome dev tools and it shouldn't take long to find the offending element.

Edited March 27, 201610 yr by rbrtsmith

Thanks guys

 

I managed to remove them. I followed Bitpalace's advice and added style="border: 0px transparent" to each <table>, <td> and <tr>. In fact it worked. But I thought that was nasty haha. So I added a class to each of them, and added the border specifications in the stylesheet. Suddenly, it didn't work anymore. I added !important, and now it works. So apparently there's some conflicts here with some existing settings.

 

Should I leave it like this now, or is that still "nasty"? Any risks that it may not appear like this in other browsers?

depending on where the CSS for the table is being called. If it doesn't work without the !important on your styles, they may be inline on the table elements or the plugin stylesheet is called after your stylesheet has been called meaning that the plugin rules overwrite yours.

 

Whether it's bad to have !important? - personally I try not to use it but there are times like this with plugins that call for it.