I have a table with some table data, I'm using inline styles because I want the html to work in an email. But it seems the table data is adding padding to where the images are, I tried using border-collapse: collapse, and everything, but still that little 3 or 4 px padding goes onto the bottom of images in the table data. Here is code for reference:
<!DOCTYPE html>
<html lang="en">
<body>
<table style="background: #E6E6E6; ">
<tr><td style="padding-left:18%;">
<!--one main column in a nested table-->
<table >
<tr><td><p style="text-align: center; font-size: 11px; color: grey;">There’s never been a better time to use the Hulu Plus App on your PS3 » | View as Web page </p></td></tr>
<tr><td><img src="pics/psnetworkheader.png" /></td></tr>
<tr style="background-image: url('pics/topGreyBack.png'); background-repeat:no-repeat;"><td style="padding-left:35px;">
<table><tr style="padding-top:35px;"><!--one row, two td columns and nested table-->
<td style="padding-right: 60px; padding-top: 40px; width:30%;" ><!--left column in grey block-->
<img src="pics/huluImg.png" style="box-shadow: 0 0 6px #eee;"/>
<p style="color: #F2F2F2; margin-top: 20px; font-size: 12px; ">The Hulu Plus App on the PS3 features an updated experience with a new layout and intuitive controls. Watch Fall Premieres, stream current hit TV shows
and classic series all from your PS3.</p>
<p style="color: #F2F2F2; margin-top: 20px; font-size:12px;">Not a member? Get a <b>FREE MONTH</b>
of unlimited instant streaming.
<br/>Your promo code is: <b>XXXXXXXXX</b>
</p>
› Try 1 Month Free
<p style="color: #F2F2F2; margin-top: 9px; font-size:9px;">Expires 10/20/12. You must be a new subscriber to receive this offer. </p>
</td>
<td >
<img src="pics/tvImg.png"/>
</td>
</tr></table> <!--end row in grey block-->
</td></tr><!--end grey block-->
<table style="margin-left:2px; width: 720px;">
<tr style="padding-top:35px; "><td style="width:50%;padding-left: 35px; padding-right: 20px;">
<h3>Hulu Plus, its TV on your terms. </h3>
<p><small>With the Hulu Plus app you can watch your favorite shows right on your PS3. From current seasons to the classics, it’s all yours for only $7.99 a month.</small></p>
<ul style="font-size: 13px;">
<li>Easily scroll through popular shows and movies, clips, movie trailers, and personalized recommendations.</li>
<li>Use the new enhanced search function and Shows You Watch feature which highlights the content you regularly enjoy so you can jump straight to the latest episode.</li>
</ul>
</td><!--end first td-->
<td style="padding-left: 55px; padding-top: 40px;">
<table style="border-spacing:10px; ">
<tr>
<td style="padding:0px;-webkit-box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);
-moz-box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);
box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75); ">
<img src="pics/mofa.png"/>
</td>
<td style="padding:0px;-webkit-box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);
-moz-box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);
box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);">
<img src="pics/grimm.png"/>
</td>
</tr>
<tr >
<td style="-webkit-box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);
-moz-box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);
box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);">
<img src="pics/snl.png"/>
</td>
<td style="-webkit-box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);
-moz-box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);
box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);">
<img src="pics/americandad.png"/>
</td>
</tr>
<tr >
<td style="-webkit-box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);
-moz-box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);
box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);">
<img src="pics/community.png"/>
</td>
<td style="-webkit-box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);
-moz-box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);
box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);">
<img src="pics/familyguy.png"/>
</td>
</tr>
<tr >
<td >
<img src="pics/theoffice.png"/>
</td>
<td >
<img src="pics/naruto.png"/>
</td>
</tr>
<tr >
<td >
<img src="pics/newgirl.png"/>
</td>
<td >
<img src="pics/once.png"/>
</td>
</tr>
</td></tr>
<!--end white block row-->
</table><!-- end white block-->
<!--one big column-->
</table>`enter code here`
</tr></td>
</table> <!--container-->
</body>
</html>
Your images should have inline CSS for display: block;. So something like this:
<img src="pics/huluImg.png" style="box-shadow: 0 0 6px #eee;"/>
Will be this:
<img src="pics/huluImg.png" style="box-shadow: 0 0 6px #eee; display: block;"/>
Related
I just created simple html table and Opened in the browser which looks like below:
browser view: (Expected One)
HTML:
<html>
${imageHeader}
<body>
<div>
<br> ${suite}</b> For Daily Run : <br> <br>
<b>${exeDate}</b>. Kindly analyse the failures.
</div>
<br>
<table class="styled-table" style=" border-collapse: collapse;
margin: 25px 0;
font-size: 0.9em;
font-family: sans-serif;
width: 80%;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
color: #ffffff;
text-align: center; padding: 5px 10px;border-bottom: 1px solid #dddddd; border-bottom: 1px solid #dddddd;border-bottom: 1px solid #dddddd;overflow:hidden;">
<thead style="background-color: #009879;
color: #ffffff;
text-align: center;border-bottom: 1px solid #dddddd;height: 5px;
line-height: 10px;">
<tr style="
color: #ffffff;
text-align: center;border-bottom: 1px solid #dddddd; height:30%;">
<th style=" padding: 5px 10px; border-bottom: 1px solid #dddddd;border: 0.8px solid black;overflow:hidden;">S.NO</th>
<th style=" padding: 5px 10px; border-bottom: 1px solid #dddddd;border: 0.8px solid black;overflow:hidden;">TOTAL TEST CASES</th>
<th style=" padding: 5px 10px; border-bottom: 1px solid #dddddd;border: 0.8px solid black;overflow:hidden;">PASSED TEST CASES</th>
<th style=" padding: 5px 10px; border-bottom: 1px solid #dddddd;border: 0.8px solid black;overflow:hidden;">FAILED TEST CASES</th>
<th style=" padding: 5px 10px; border-bottom: 1px solid #dddddd;border: 0.8px solid black;overflow:hidden;">PASS PERCENTAGE(%)</th>
</tr>
</thead>
<tbody style="border-bottom: 1px solid #dddddd;border-bottom: 1px solid #dddddd;">
<tr style="color: #696969;text-align: center;border-bottom: 1px solid #dddddd;">
<td style="text-align:center;border-bottom: 1px solid #dddddd;border: 0.8px solid black; overflow:hidden;">01</td>
<td style="text-align:center;border-bottom: 1px solid #dddddd;border: 0.8px solid black; overflow:hidden;">450</td>
<td style="text-align:center;border-bottom: 1px solid #dddddd;border: 0.8px solid black;overflow:hidden;">300</td>
<td style="text-align:center;border-bottom: 1px solid #dddddd;border: 0.8px solid black;overflow:hidden;">150</td>
<td style="text-align:center;border-bottom: 1px solid #dddddd;border: 0.8px solid black;overflow:hidden;">80</td>
</tr>
<!-- and so on... -->
</tbody>
</table>
<div>
<br><br><b>QA Team</b>
</div>
</body>
</html>
I thought everything looks good and now I just want to use this html to embedded as email content to send the status to stakeholders.
After successfully integrated as e-mail content and the html looks like below:
HTML view as E-mail content: (Not Expected)
The table header is look huge in the e-mail content, but the same is looking good in the browser.
How can I reduce the size of header and make it that it looks like in the browser.
You've got a height:30% on the <tr> that might be adding height.
You've also got padding, so remove that. Perhaps you want top and bottom 0, but left and right 5px so the words are not right up against each other. That would be: padding:0 5px on your <th>'s.
The final thing that can interfere is the line-height. Make sure your line-height is the same as the font-size if they're all always going to be on one line (check on a mobile too!), or otherwise set it about 4px higher than the font-size so it's not defaulting to something large. It's best to put the result, e.g. font-size:16px; line-height:20px, on the <table style="..."> so everything under it inherits that (and I'm assuming you don't use other styles that override this, as it should all be inline).
I've been trying to edit this table(s) for a few days.
The plan is that the header is always at the top when scrolling. Because everything is configured code, I can not work with typical HTML / CSS. After a long time I have found this (almost) working solution.
That the code looks so ugly is because I got this structure inherited and I haven't had the time to worry about it yet.
The problem that still exists is when the DIV outside is smaller than the table needs, the table contracts. Although the columns actually have a given width. If the div is wide enough outside, then the table looks like it should.
What am I doing wrong?
Maybe someone has an idea or solution ready.
This is how it should look (even if the div is smaller just with scrolling)
https://jsfiddle.net/mzue3j9t
Sample:
<div id="GRD1" style="overflow: auto hidden; display: block; position: absolute; top: 22px; left: 20px; width: 400px; height: 176px; font-family: Tahoma; font-size: 8pt; color: rgb(0, 0, 0); z-index: 1; background-color: threedface; visibility: visible; border: 1px solid rgb(127, 157, 185);">
<table class="header" cellspacing="0" cellpadding="0" style="table-layout: fixed; background:threedface">
<thead>
<tr>
<th style="white-space: nowrap; border-width: 1px 0px 1px 1px; border-style: solid; border-color: rgb(0, 0, 0); padding: 0px 2px; text-align: left; cursor: default; width: 17px; font-weight: normal;" title="undefined"> </th>
<th style="white-space: nowrap; border-width: 1px 0px 1px 1px; border-style: solid; border-color: rgb(0, 0, 0); padding: 0px 2px; text-align: left; cursor: default; width: 48px; font-weight: normal;" title="">Question</th>
<th style="white-space: nowrap; border-width: 1px 0px 1px 1px; border-style: solid; border-color: rgb(0, 0, 0); padding: 0px 2px; text-align: right; cursor: default; width: 19px; font-weight: normal;" title="">i.O</th>
<th style="white-space: nowrap; border-width: 1px 0px 1px 1px; border-style: solid; border-color: rgb(0, 0, 0); padding: 0px 2px; text-align: right; cursor: default; width: 29px; font-weight: normal;" title="">n.i.O</th>
<th style="white-space: nowrap; border-width: 1px 0px 1px 1px; border-style: solid; border-color: rgb(0, 0, 0); padding: 0px 2px; text-align: left; cursor: default; width: 74px; font-weight: normal;" title="">Another check</th>
<th style="white-space: nowrap; border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0); padding: 0px 2px; text-align: left; cursor: default; width: 78px; font-weight: normal;" title="">Commentary</th>
</tr>
</thead>
</table>
<div class="body" style="overflow: hidden auto; height: 100%; width: 100%;">
<table cellspacing="0" cellpadding="0" style="table-layout: fixed; background:threedface">
<tbody>
<tr id="row_1">
<td id="GRD1_num_1" style="border-width:0px 0px 1px 1px;border-style:solid;border-color:#000000;padding: 0px 2px 0px 2px;;width:17px;text-align:right;white-space:nowrap;">1</td>
<td id="GRD1_0_0" row="1" col="1" editable="1" parentid="0" style="width:48px;height:1.2em;white-space:nowrap;background-color:#FFFFFF;border-width:0px 0px 1px 1px;border-style:solid;border-color:#000000;padding: 0px 2px 0px 2px;text-align:left;cursor:pointer;">Test 1</td>
<td id="GRD1_0_1" row="1" col="2" editable="3" parentid="0" checkstate="1" style="width:19px;height:1.2em;text-align:center;white-space:nowrap;background-color:#FFFFFF;border-width:0px 0px 1px 1px;border-style:solid;border-color:#000000;padding: 0px 2px 0px 2px;cursor:pointer;">
<input type="checkbox" style="margin:0px;padding:0px;" checked="checked" value="1">
</td>
<td id="GRD1_0_2" row="1" col="3" editable="3" parentid="0" checkstate="0" style="width:29px;height:1.2em;text-align:center;white-space:nowrap;background-color:#FFFFFF;border-width:0px 0px 1px 1px;border-style:solid;border-color:#000000;padding: 0px 2px 0px 2px;cursor:pointer;">
<input type="checkbox" style="margin:0px;padding:0px;" value="0">
</td>
<td id="GRD1_0_3" row="1" col="4" editable="3" parentid="0" checkstate="1" style="width:74px;height:1.2em;text-align:center;white-space:nowrap;background-color:#FFFFFF;border-width:0px 0px 1px 1px;border-style:solid;border-color:#000000;padding: 0px 2px 0px 2px;cursor:pointer;">
<input type="checkbox" style="margin:0px;padding:0px;" checked="checked" value="1">
</td>
<td id="GRD1_0_4" row="1" col="5" editable="1" parentid="0" style="width:78px;height:1.2em;white-space:nowrap;background-color:#FFFFFF;border-width:0px 1px 1px 1px;border-style:solid;border-color:#000000;padding: 0px 2px 0px 2px;text-align:left;cursor:pointer;">Commentary1</td>
</tr>
</tbody>
</table>
</div>
</div>
and this is how it looks when it is smaller ..
https://jsfiddle.net/mzue3j9t/1
Create it with just 1 table and make th inside thead position sticky.
<table>
<thead>
<tr>
<th style="background:threedface;position: sticky; top: 0;"></th>
...
</tr>
</thead>
<tbody>
<tr>
<td></td>
...
</tr>
...
</tbody>
</table>
I don't know why you are writing inline styles. Is it an email template?
else please create a separate css file and import it in the html.
I would suggest to clean up your code, remove the style tag from your HTML and create a CSS file for it. Doing that will allow you to debug the problem.
alternatively, I would suggest using some framework for tables which will render you work responsive to the page size, therefore no need to create different classes for each page size. I would use the Framework (https://getbootstrap.com/) however, there are other frameworks.
Im making a dynamic table and i dont know how many trs i will have:
<div style="height: 20cm">
<table cellpadding="0" cellspacing="0" style="border-spacing:0;border-collapse:0;font-size:12px;width: 100%;text-transform:uppercase;">
<thead>
<tr style="font-weight:bold">
<th style="width:9%;border-bottom:1px solid black;padding:6px;" align="center">cantidad</th>
<th style="width:12%;border:1px solid black;border-top:0 none;padding:6px;" align="center">codigo</th>
<th style="width:79%;border-bottom:1px solid black;padding:6px;align: center" align="center">descripcion</th>
</tr>
</thead>
<tbody style="border-bottom: none;">
<tr t-foreach="o.pack_operation_ids" t-as="l">
<td style="border-bottom:0 none;border-right: 1px solid black;border-top: 0 none;padding: 0px 0px 0px 5px">1
</td>
<td style="border-right:1px solid black;border-top:0 none; padding: 0px 0px 0px 5px">2
</td>
<td style="border-bottom:0 none; border-top: 0 none; padding: 0px 0px 0px 5px">Description
</td>
</tr>
</tbody>
</table>
</div>
Thing is that i need the borders to fill the entire div (to the bottom line), i dont care about the amounts of rows that i will have.
Hope some one can help, thanks in advance.
If you know exactly the width of columns, you may use background for pseudo element
div:after {
position: absolute;
bottom: 0;
content: ''; left: 0; width: 100%;
background: url('1px-height-with-dots-on-column-positions.png') 0 0 repeat-y;
}
You have to use a little jquery or javascript for this. If you are already familiar with it then it will be great.
Also give td height:30px and add border="1" to table
Check below snippet.
$(function(){
var height = $(".main").height();
height = parseInt(height / 25);
for(var i = 0; i <= height; i++)
{
var newrow = '<tr t-foreach="o.pack_operation_ids" t-as="l"><td style="border-bottom:0 none;border-right: 1px solid black;padding: 0px 0px 0px 5px"></td><td style="border-right:1px solid black; padding: 0px 0px 0px 5px"></td><td style="border-bottom:0 none; padding: 0px 0px 0px 5px"></td></tr>';
$("table tbody").append(newrow);
}
});
td{
border-bottom:0 none;border-right:0px solid black;border-top: 1 solid black;padding: 0px 0px 0px 5px;
height:30px;
}
tr{
border:1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="main" style="height: 20cm">
<table border="1" cellpadding="0" cellspacing="0" style="border-spacing:0;border-collapse:0;font-size:12px;width: 100%;text-transform:uppercase;">
<thead>
<tr style="font-weight:bold">
<th style="width:9%;border-bottom:1px solid black;padding:6px;" align="center">cantidad</th>
<th style="width:12%;border:1px solid black;border-top:0 none;padding:6px;" align="center">codigo</th>
<th style="width:79%;border-bottom:1px solid black;padding:6px;align: center" align="center">descripcion</th>
</tr>
</thead>
<tbody style="border-bottom: none;">
<tr t-foreach="o.pack_operation_ids" t-as="l">
<td style="border-bottom:0 none;border-right: 1px solid black;border-top: 0 none;padding: 0px 0px 0px 5px">1
</td>
<td style="border-right:1px solid black;border-top:0 none; padding: 0px 0px 0px 5px">2
</td>
<td style="border-bottom:0 none; border-top: 0 none; padding: 0px 0px 0px 5px">Description
</td>
</tr>
</tbody>
</table>
</div>
I really hope you can help as I'm going crazy trying to figure out how I can make this signature the way I want.
Basically, I would like the logo to be aligned at the top with the text,
and the bottom image to be left aligned, starting underneath the logo (and not underneath the text).
Note: This html is for email, so I can't using css.
Here is a visual of what I have (and want) and the code :
<table id="sig" style="min-width: 960px; min-height: 82px; line-height: 18px; margin: 6px 0; padding: 8px; border-top: 1px #15345B dotted; border-bottom: 1px #3d3d3d dotted; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; font-size: 12px; color: #3d3d3d;">
<tr>
<td style="padding: 6px 0 0 0">
<a href="http://www.txxxxk.fr" title="www.txxxxk.fr">
<img src="http://www.txxxxk.fr/wp-content/uploads/2015/12/defweb_logotaldeak-red3.png" alt="Txxxxk" style="float: left; padding: 6px 20px 0 0; border: none;"></a>
</td>
<td style="padding: 6px 0 0 0">
<span style="font-size: 12px"><strong style="color: #000000; letter-spacing: 1px">Oxxxxxx xxxxxy</strong>, CEO</span><br>
<strong style="color: #d80f0f; letter-spacing: 1px">TxxxxK</strong><br>
e: oxxxxx#txxxxxk.fr | s: www.txxxxxk.fr
<br>
t.: 0xxxxxxxx0 | m.: 0xxxxxx5<br>
5 xxxxxx - 6xxxxx Bxxxx<br>
<a href="http://twitter.com/Txxxxk">
<img src="https://img.newoldstamp.com/s/d/t.png" alt="Twitter" style="float: left; margin: 2px 4px 0 0; border: none;"></a>
<a href="http://facebook.com/Txxxxk">
<img src="https://img.newoldstamp.com/s/d/f.png" alt="Facebook" style="float: left; margin: 2px 4px 0 0; border: none;"></a>
<a href="http://linkedin.com/company/txxxxk">
<img src="https://img.newoldstamp.com/s/d/l.png" alt="Linked In" style="float: left; margin: 2px 4px 0 0; border: none;"></a><br />
<a href="http://www.txxxxk.fr">
<img src="http://www.txxxxk.fr/wp-content/uploads/2015/12/banner-signature-2016.png" alt="Vxxxxxt" style="float: left; margin: 2px 4px 0 0; border: none;"></a>
</td>
</tr>
</table>
<table id="sig" style="min-width: 960px; min-height: 82px; line-height: 18px; margin: 6px 0; padding: 8px; border-top: 1px #15345B dotted; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; font-size: 12px; color: #3d3d3d;">
<tr>
<td style="padding: 6px 0 0 0">
<a href="http://www.txxxxk.fr" title="www.txxxxk.fr">
<img src="http://www.txxxxk.fr/wp-content/uploads/2015/12/defweb_logotaldeak-red3.png" alt="Txxxxk" style="float: left; padding: 6px 20px 0 0; border: none;"></a>
</td>
<td style="padding: 6px 0 0 0">
<span style="font-size: 12px"><strong style="color: #000000; letter-spacing: 1px">Oxxxxxx xxxxxy</strong>, CEO</span><br>
<strong style="color: #d80f0f; letter-spacing: 1px">TxxxxK</strong><br>
e: oxxxxx#txxxxxk.fr | s: www.txxxxxk.fr
<br>
t.: 0xxxxxxxx0 | m.: 0xxxxxx5<br>
5 xxxxxx - 6xxxxx Bxxxx<br>
<a href="http://twitter.com/Txxxxk">
<img src="https://img.newoldstamp.com/s/d/t.png" alt="Twitter" style="float: left; margin: 2px 4px 0 0; border: none;"></a>
<a href="http://facebook.com/Txxxxk">
<img src="https://img.newoldstamp.com/s/d/f.png" alt="Facebook" style="float: left; margin: 2px 4px 0 0; border: none;"></a>
<a href="http://linkedin.com/company/txxxxk">
<img src="https://img.newoldstamp.com/s/d/l.png" alt="Linked In" style="float: left; margin: 2px 4px 0 0; border: none;"></a>
</td>
</tr>
</table>
<table style="border-bottom: 1px #3d3d3d dotted; margin: 0px 0 6px; min-width: 960px;">
<tr>
<td align="left"><a href="http://www.txxxxk.fr">
<img src="http://www.txxxxk.fr/wp-content/uploads/2015/12/banner-signature-2016.png" alt="Vxxxxxt" style="float: left; margin: 2px 4px 0 0; border: none;"></a></td>
</tr>
</table>
Fiddle
Something like this might do the trick, just place the bottom content on its own row.
<table id="sig" style="min-width: 960px; min-height: 82px; line-height: 18px; margin: 6px 0; padding: 8px; border-top: 1px #15345B dotted; border-bottom: 1px #3d3d3d dotted; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; font-size: 12px; color: #3d3d3d; " >
<tr>
<td style="padding: 6px 0 0 0" >
<img src="http://www.txxxxk.fr/wp-content/uploads/2015/12/defweb_logotaldeak-red3.png" alt="Txxxxk" style="float: left; padding: 6px 20px 0 0; border: none;">
</td>
<td style="padding: 6px 0 0 0">
<span style="font-size:12px"><strong style="color: #000000; letter-spacing: 1px">Oxxxxxx xxxxxy</strong>, CEO</span><br>
<strong style="color: #d80f0f;letter-spacing: 1px">TxxxxK</strong><br>
e: oxxxxx#txxxxxk.fr | s: www.txxxxxk.fr <br>
t.: 0xxxxxxxx0 | m.: 0xxxxxx5<br>
5 xxxxxx - 6xxxxx Bxxxx<br>
</td>
</tr>
<tr>
<td colspan="2"><img src="https://img.newoldstamp.com/s/d/t.png" alt="Twitter" style="float: left; margin: 2px 4px 0 0; border: none;">
<img src="https://img.newoldstamp.com/s/d/f.png" alt="Facebook" style="float: left; margin: 2px 4px 0 0; border: none;">
<img src="https://img.newoldstamp.com/s/d/l.png" alt="Linked In" style="float: left; margin: 2px 4px 0 0; border: none;"><br />
<img src="http://www.txxxxk.fr/wp-content/uploads/2015/12/banner-signature-2016.png" alt="Vxxxxxt" style="float: left; margin: 2px 4px 0 0; border: none;"></td>
</tr>
</table>
You're using one table row for an appearance that needs two rows, also you need two td tags in the first tr to get the logo and text next to each other:
think of it like:
< ROW (TR) >
< DATA (TD)> < DATA (TD) >
< / ROW (TR) >
<table>
<tr>
<td><!-- logo goes here --></td>
<td><!-- contact info goes here --></td>
</tr>
<tr>
<td><!-- Banner goes here --></td>
</tr>
</table>
I want to style the text input areas on my form, however when I create a style for input in css, it does not actually style the input box. I have been able to style my button, just not input boxes.
<div class="loginContainer">
<form action ="" method="post">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<label for="username" class="label">Username</label>
</td>
<td width="150">
<input type="text" name="username" size="25" id="username" autocomplete="off" />
</td>
</tr>
<tr>
<td>
<label for="password" class="label">Password</label>
</td>
<td width="150">
<input type="password" name="password" size="25" id="password" autocomplete="off" />
</td>
</tr>
<input type="hidden" name="token" value="<?php echo Token::generate(); ?>">
<tr>
<td>
<label for="remember">
<input type="checkbox" name="remember" id="remember"> Keep me signed in
</td>
</tr>
<tr>
<td>
<input type="submit" class="submit" value="Log in">
</td>
</tr>
</table>
</form>
And here is the CSS for it:
input[type="text"] {
padding: 4px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
box-shadow: 0px 0px 8px #d9d9d9;
-moz-box-shadow: 0px 0px 8px #d9d9d9;
-webkit-box-shadow: 0px 0px 8px #d9d9d9;
display: block;
}
This ends up creating a form which creates: http://i.imgur.com/9Hj9Vie.png
Note the lack of style on the input fields. How should I go about fixing this?
It's kind of strange that the border radius is not applied, you can try the following ( note the lack of quotes ):
input[type=text] {
padding: 4px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
box-shadow: 0px 0px 8px #d9d9d9;
-moz-box-shadow: 0px 0px 8px #d9d9d9;
-webkit-box-shadow: 0px 0px 8px #d9d9d9;
display: block;
/* new stuff */
border: 1px solid pink;
outline: 1px solid green;
background: orange;
}
If you want the for the password field also to be styled you need to add that tag in the style as well, like this:
input[type=text], input[type=password] {
padding: 4px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
box-shadow: 0px 0px 8px #d9d9d9;
-moz-box-shadow: 0px 0px 8px #d9d9d9;
-webkit-box-shadow: 0px 0px 8px #d9d9d9;
display: block;
}