I am seeing a border around my buttons on an HTML webpage. I am trying to make one button blue and one green and they are placed in a table. Code below:
<table align="center">
<tr style=" font-family: verdana; font-size: 24px;">
<th> Select your Region </th>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<td align="center">
<button>
<a id="cust" type="button"
style=
"background-color: #00824A;
border: none;
color: white;
padding: 16px 55px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
font-weight: bold;
font-family: verdana"
href="URL">
US
</a>
</button>
</td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<td align="center">
<button>
<a id="cust" type="button"
style=
"background-color: #0061D5;
border: none;
color: white;
padding: 16px 55px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
font-weight: bold;
font-family: verdana"
href="URL">
EU
</a>
</button>
</td>
</tr>
</table>
This is how they are showing up on the webpage:
I was expecting the whole button to be that color without the grey around the sides of it. I removed the "border" with border: none in the styles. Instead, it shows a rectangle of the color within the larger grey button.
The border is the button element itself, not the link <a> you've got inside of it. You need to style the button and remove the default border with <button style="border: none;">
Relevant reading: https://css-tricks.com/overriding-default-button-styles/
<table align="center">
<tr style=" font-family: verdana; font-size: 24px;">
<th> Select your Region </th>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<td align="center">
<button style="border: none;">
<a id="cust" type="button"
style=
"background-color: #00824A;
border: none;
color: white;
padding: 16px 55px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
font-weight: bold;
font-family: verdana"
href="URL">
US
</a>
</button>
</td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<td align="center">
<button style="border:none;">
<a id="cust" type="button"
style=
"background-color: #0061D5;
border: none;
color: white;
padding: 16px 55px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
font-weight: bold;
font-family: verdana"
href="URL">
EU
</a>
</button>
</td>
</tr>
</table>
Related
I'm want to add new row using jquery any one help me to solve my problem"
'''
https://jsfiddle.net/dn6chabs/86/
jsfiddle here want to add new row
'''
So, there were quite a few issues with your code:
If you check console by hitting f12 you have this error Uncaught ReferenceError: $c is not defined because of this line: $("#field7").val($c);
I don't think it's necessary for the add and remove to be <a> tags, unless you want them specifically for styling, as it confuses the matter
$(this).parent().parent().remove(); this line doesn't really appear to do anything
Anyway, here's the corrected code!
$("#field7").val(c);, this has been corrected
The add and remove have been made <span> tags with custom styling to look like <a> tags
The onclick event has been corrected in light of this
The removal process has been fixed and is now $('#table').children().eq($("#table").children().length - 1).not('tfoot').remove();, whereby it never removes the subtotal / total line
$(document).ready(function() {
$("#add_to_table").on('click', function() {
navObj = $("#table tbody:last").clone();
$("#table").append(navObj);
});
$("#remove_from_table").on('click', function() {
$('#table').children().eq($("#table").children().length - 1).not('tfoot').remove();
});
});
$(document).ready(function() {
var a = document.getElementById("field5").innerHTML;
var b = document.getElementById("field6").InnerHTML;
c = a * b;
$("#field7").val(c);
});
.link {
text-decoration: underline;
color: blue;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="add_to_table" class="link">Add</span>
<span id="remove_from_table" class="link">Remove</span>
<table id="table" style="width: 100%; border-collapse: collapse; border-spacing: 0; margin-bottom: 20px; border: 0px;" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr id="row">
<th scope="row" style="white-space: nowrap; font-weight: 400; color: #fff; font-size: 1.6em; background: #3989c6;">#</th>
<th scope="row" class="text-left" style="white-space: nowrap; font-weight: 400; color: #fff; font-size: 1.6em; background: #3989c6;">DESCRIPTION</th>
<th scope="row" class="text-right" style="white-space: nowrap; font-weight: 400; color: #fff; font-size: 1.6em; background: #3989c6;">UNITS</th>
<th scope="row" class="text-right" style="white-space: nowrap; font-weight: 400; color: #fff; font-size: 1.6em; background: #3989c6;">PRICE</th>
<th scope="row" class="text-right" style="white-space: nowrap; font-weight: 400; color: #fff; font-size: 1.6em; background: #3989c6;">TOTAL</th>
</tr>
</thead>
<tbody>
<tr>
<td id="field1" class="no" style="color: #fff; font-size: 1.6em; background: #3989c6;">01</td>
<td id="field2" class="text-left" style="padding: 15px; background: #eee; border-bottom: 1px solid #fff;">
<h3 id="field3">WebSite <em><strong>Consultansy</strong></em></h3>
<em id="field4">Tasks related to meeting minutes AbC</em>
</td>
<td id="field5" class="qty" style="padding: 15px; background: #eee; border-bottom: 1px solid #fff;">4</td>
<td id="field6" class="unit" style="background: #ddd;">$100.00</td>
<td id="field7" class="total" style="background: #3989c6; color: #fff;">$300.00</td>
<td>
</td>
</tr>
</tbody>
<tfoot style="display: table-footer-group; vertical-align: middle; border-color: inherit;">
<tr>
<td style="border: none;" colspan="2"> </td>
<td style="background: 0 0; border-bottom: none; white-space: nowrap; text-align: right; padding: 10px 20px; font-size: 1.2em; border-top: 1px solid #aaa;" colspan="2">SUBTOTAL</td>
<td style="background: 0 0; border-bottom: none; white-space: nowrap; text-align: right; padding: 10px 20px; font-size: 1.2em; border-top: 1px solid #aaa;">$300.00</td>
</tr>
<tr>
<td style="border: none;" colspan="2"> </td>
<td style="background: 0 0; border-bottom: none; white-space: nowrap; text-align: right; padding: 10px 20px; font-size: 1.2em; border-top: 1px solid #aaa;" colspan="2"><em>TAX Deductions</em></td>
<td style="background: 0 0; border-bottom: none; white-space: nowrap; text-align: right; padding: 10px 20px; font-size: 1.2em; border-top: 1px solid #aaa;">00.00</td>
</tr>
<tr>
<td style="border: none;" colspan="2"> </td>
<td style="color: #3989c6; font-size: 1.4em; border-top: 1px solid #3989c6;" colspan="2">GRAND TOTAL</td>
<td style="color: #3989c6; font-size: 1.4em; border-top: 1px solid #3989c6;">$300.00</td>
</tr>
</tfoot>
</table>
Check the fiddle: JSFiddle
Let me know how you get on!
I am facing an issue with a button set in a table cell which covers two rows. it does not fill the second row. how can i make this button fill both rows? I have tried to set height in the style of the button as well as on the table cell itself without success. Please see my code is below:
1) the css style of the button:
.button {
padding: 5px 15px;
font-size: 1.1em;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 1px;
box-shadow: 0 2px #999;
width: 100%;
vertical-align: middle;
}
And 2) my html table below:
<tr>
<td rowspan="2">
<button href="#0" class="button" id="cancel_order">Aκύρωση</button>
</td>
<td style="padding-right:5px; padding-left:5px;" colspan="2">
<button class="button">Εκτύπωση</button>
</td>
<td rowspan="2">
<button class="button">Παραγγελία</button>
</td>
</tr>
<tr>
<td style="padding-right:5px; padding-left:5px;" colspan="2">
<button class="button">Απόδειξη</button>
</td>
</tr>
In my opinion you should use css3 flexbox to achieve this as shown below:
.btn-holder {
display: flex;
}
.btn-holder .btn-holder {
flex-direction: column;
}
.button {
margin: 0 5px 5px 0;
padding: 5px 15px;
font-size: 1.1em;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 1px;
box-shadow: 0 2px #999;
}
<div class="btn-holder">
<button class="button" id="cancel_order">Aκύρωση</button>
<div class="btn-holder">
<button class="button">Εκτύπωση</button>
<button class="button">Παραγγελία</button>
</div>
<button class="button">Απόδειξη</button>
</div>
https://jsfiddle.net/k5wefqz5/1/
Is this your expected result ?
You miss <table> tag to complete your code.
Add this:
button {height:100%; }
Wrap table elements inside a <table> in order to get <td> and <tr> to behave as expected.
SNIPPET
table {
border: 1px solid red;
}
td {
border: 1px solid black;
}
button {
height: 100%;
}
<table>
<tr>
<td rowspan="2">
<button href="#0" class="button" id="cancel_order">Aκύρωση</button>
</td>
<td style="padding-right:5px; padding-left:5px;" colspan="2">
<button class="button">Εκτύπωση</button>
</td>
<td rowspan="2">
<button class="button">Παραγγελία</button>
</td>
</tr>
<tr>
<td style="padding-right:5px; padding-left:5px;" colspan="2">
<button class="button">Απόδειξη</button>
</td>
</tr>
</table>
I have to style an email and when I was done and tested it all seemed to work fine, except in outlook.com, Microsoft exchange and Hotmail. For some reason exchange strips all code used (tables, tr & td tags) whatever I do, is there some workaround or is it just not possible? I have used CSS in my <style> tag. Should I change that to inline styling? or is there some other use.
Also my mail uses certain values (shortcodes) which are being given by the form, this works all fine in all other mail boxes but again not in outlook. If I can't use code there is there some workaround for that too?
So long story short, how can I use code in my html-email if Microsoft exchange breaks all code and gives a blank mail.
The entire mail you can see here on my test site
Here is my mail code:
<style>
td {
text-decoration: none;
color: #78797a;
width: 420px;
line-height: 22px;
border: 1px solid black;
}
img {
display:block;
}
h3 {
text-decoration: none;
color: #434343;
}
h4 {
text-decoration: none;
color: #434343;
}
-webkit-text-size-adjust: none;
</style>
<table style="font-size: 15px; font-family: 'Open Sans', sans-serif; font-weight: 200;">
<img src="http://www.belife.nl/wp-content/uploads/2015/06/belife-RGB.jpg" align="top"><br>
<h4>Verwijzend arts</h4>
<tr style="padding: 10px">
<td> Naam</td><td> [naam_vw]</td>
</tr>
<tr style="padding: 10px">
<td> Voorletters</td> <td>[voorletters_vw]</td>
</tr>
<tr style="padding: 10px">
<td> Geslacht</td> <td>[geslacht_vw]</td>
</tr>
<tr style="padding: 10px">
<td> Functie verwijzer:</td> <td>[verwijzer_vw]</td>
</tr>
<tr style="padding: 10px">
<td> Naam instantie:</td> <td>[instantie_vw]</td>
</tr>
<tr style="padding: 10px">
<td>Adres:</td> <td>[adres_vw]</td>
</tr>
<tr style="padding: 10px">
<td>Postcode:</td> <td>[postcode_vw]</td>
</tr>
<tr style="padding: 10px">
<td>AGB code verwijzer:</td> <td>[agb_vw]</td>
</tr>
<tr style="padding: 10px">
<td>Mobiel verwijzer:</td> <td>[mobiel_vw]</td>
</tr>
<tr style="padding: 10px">
<td>E-mail:</td> <td>[email_vw]</td>
</tr>
</table>
Shortcodes such as [email_vw] are the ones that are being given via the form which need to be in there.
Any tips and answers are appreciated thanks in advance!
EDIT * I was able to fix outlook myself but now Hotmail is for some reason empty and shows just plain code, would this be caused by the code being inline? *
Well after some searching and reading #tvgemert's article link I was able to fix outlook.
<!DOCTYPE html>
<html>
<head></head>
<body>
<table style="font-size: 15px; font-family: 'Open Sans', sans-serif; font-weight: 200;">
<img src="http://www.belife.nl/wp-content/uploads/2015/06/belife-RGB.jpg" align="top" style="display: block;"><br><h3 style="text-decoration: none; color: #434343;">Met deze brief verwijs ik onderstaande client naar u voor een programma medische specialistische revalidatiezorg (MSR) bij BeLife.</h3>
<h4 style="text-decoration: none; color: #434343;">Verwijzend arts</h4>
<tr style="padding: 10px;">
<td style="text-decoration: none; color: #78797a; width: 420px; line-height: 22px; border: 1px solid black;"> Naam</td>
<td style="text-decoration: none; color: #78797a; width: 420px; line-height: 22px; border: 1px solid black;"> [naam_vw]</td>
</tr>
<tr style="padding: 10px;">
<td style="text-decoration: none; color: #78797a; width: 420px; line-height: 22px; border: 1px solid black;"> Voorletters</td> <td style="text-decoration: none; color: #78797a; width: 420px; line-height: 22px; border: 1px solid black;">[voorletters_vw]</td>
</tr>
<tr style="padding: 10px;">
<td style="text-decoration: none; color: #78797a; width: 420px; line-height: 22px; border: 1px solid black;"> Geslacht</td> <td style="text-decoration: none; color: #78797a; width: 420px; line-height: 22px; border: 1px solid black;">[geslacht_vw]</td>
</tr>
</table>
This has fixed outlook at the least by adding inline code the email is now no longer blank.
How can I make these buttons all align left with about a 3px space between them and adjust their own size based on how much text is put into them?
Unfortunately I don't have access to my own CSS (someone charges hundreds for this privilege). I've been trying for hours but just can't figure it out:
<br>
<style>
.mylink {
padding: 10px 35px;
background-color: #434343;
color: #fffFFF;
text-transform: uppercase;
letter-spacing: -.2px;
text-decoration: none;
font-family: helvetica,arial,sans-serif;
border-radius: 5px;
font-size: 12px;
width: 100%
}
.mylink:hover {
background-color: #ff0000; color: #fffFFF;
}
</style>
<table width="100%">
<tbody>
<tr>
<td width="0%" style="text-align: left;">
<a class="mylink" href="http://www.zzz.com/">ZZZ</a>
</td><td width="0%" style="text-align: left;">
<a class="mylink" href="http://www.aaa.com/">AAA</a>
</td><td width="0%" style="text-align: left;">
<a class="mylink" href="http://www.FFF.com/">FFF</a>
</td>
</td>
</tr>
</tbody>
</table>
Assuming that your other CSS is working by putting it inline (like you have put it), this should work, though a little hacky (floating cells and rows is ... unusual). I'd get rid of the table altogether if the effect here is what you want:
<style type="text/css">
.mylink {
padding: 10px 35px;
background-color: #434343;
color: #fffFFF;
text-transform: uppercase;
letter-spacing: -.2px;
text-decoration: none;
font-family: helvetica,arial,sans-serif;
border-radius: 5px;
font-size: 12px;
float:left;
}
.mylink:hover {
background-color: #ff0000; color: #fffFFF;
}
tr, td {
float:left;
padding:0;
}
</style>
<table>
<tbody>
<tr>
<td>
<a class="mylink" href="http://www.zzz.com/">ZZZZZZZZ</a>
</td>
<td>
<a class="mylink" href="http://www.aaa.com/">AAA</a>
</td>
<td>
<a class="mylink" href="http://www.FFF.com/">FFF</a>
</td><!-- Remove the extra </td> here. -->
</tr>
</tbody>
</table>
What this should look like if it works: https://jsfiddle.net/cmhqr3dg/
I believe this is the effect you are going for.
<br>
<style>
.mylink {
padding: 10px 35px;
background-color: #434343;
color: #fffFFF;
text-transform: uppercase;
letter-spacing: -.2px;
text-decoration: none;
font-family: helvetica,arial,sans-serif;
border-radius: 5px;
font-size: 12px;
width: 100%
}
.mylink:hover {
background-color: #ff0000; color: #fffFFF;
}
td {
float: left;
margin: 0 3px;
}
</style>
<table width="100%">
<tbody>
<tr>
<td>
<a class="mylink" href="http://www.zzz.com/">ZZZZZZZZZZ</a>
</td>
<td>
<a class="mylink" href="http://www.aaa.com/">AAAAAAAAAAAAAAAAAAAAA</a>
</td>
<td>
<a class="mylink" href="http://www.FFF.com/">FFF</a>
</td>
</td>
</tr>
</tbody>
</table>
I removed the style tags from the "td" elements and added the following into the "style" tags
td {
float: left;
margin: 0 3px;
}
I'm having trouble centering my HTML button.
JsFiddle:
http://jsfiddle.net/huskydawgs/j1rpupgx/
Html:
<div>
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="border-radius: 0px; background-color: #f66511; display: block;" width="138" height="30" align="center" bgcolor="#2251a4"><a style="color: #ffffff; font-size: 15px; font-family: sans-serif; text-decoration: none; line-height: 30px; width: 100%; display: inline-block;" href="https://www.onvia.com/">Get Started</a></td>
</tr>
</tbody>
</table>
</div>
For your specific example you can simply add the following CSS:
table{margin:0 auto;}
Here is a full working snippet:
table{margin:0 auto;}
<div>
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="border-radius: 0px; background-color: #f66511; display: block;" width="138" height="30" align="center" bgcolor="#2251a4"><a style="color: #ffffff; font-size: 15px; font-family: sans-serif; text-decoration: none; line-height: 30px; width: 100%; display: inline-block;" href="https://www.onvia.com/">Get Started</a></td>
</tr>
</tbody>
</table>
</div>
table {
width: 100%;
}
.btn {
text-align: center;
border-radius: 0px;
background-color: #f66511;
display: block;
color: #ffffff;
font-size: 15px;
font-family: sans-serif;
text-decoration: none;
line-height: 30px;
width: 138px;
margin: 0 auto;
}
<div>
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td> <a class="btn" href="https://www.onvia.com/">Get Started</a>
</td>
</tr>
</tbody>
</table>
</div>
Just put <center>before opening div and end it after ending div, like this:
<center>
<div>
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="border-radius: 0px; background-color: #f66511; display: block;" width="138" height="30" align="center" bgcolor="#2251a4"><a style="color: #ffffff; font-size: 15px; font-family: sans-serif; text-decoration: none; line-height: 30px; width: 100%; display: inline-block;" href="https://www.onvia.com/">Get Started</a></td>
</tr>
</tbody>
</table>
</div>
</center>
I've also made a JSFiddle for you:
https://jsfiddle.net/k1krs98z