I just started creating a website for a darts organisation but I'm encountering some problems in my table layout.
I made a table with a table-layout fixed and 978px width.
When I take a look in firefox it somehow for unknown reason always adds another 8px. In safari everything works perfect.
I have no idea what is happening here.
I made the web with the problem available on the link below.
Any suggestions is welcome.
.dt
{
margin: 0px;
border-width: 0px;
border-spacing: 5px;
border-collapse: separate;
table-layout: fixed;
}
.dt th
{
border-bottom: 1px solid #cdcdcd;
color: #5197fc;
font-weight: bold;
font-size: 12px;
}
.dt td
{
border-bottom: 1px dotted #cdcdcd;
overflow: hidden;
white-space: nowrap;
}
<table runat="server" style="width: 978px;" class="dt">
<tr runat="server">
<th runat="server" class="left" style="width: 511px">Naam</th>
<th runat="server" class="left" style="width: 152px">Tel/Gsm</th>
<th runat="server" class="left" style="width: 252px">Email</th>
<th runat="server" class="left" style="width: 38px"></th>
</tr>
<tr runat="server">
<td runat="server" style="width: 511px"></td>
<td runat="server" style="width: 152px"></td>
<td runat="server" style="width: 252px"></td>
<td runat="server" style="width: 38px">
<asp:ImageButton runat="server" ID="EditAccount" ImageUrl="~/Images/pencil.png" CommandName="EditAccount" Width="16px" Height="16px" />
<asp:ImageButton runat="server" ID="DeleteAccount" ImageUrl="~/Images/delete.png" CommandName="DeleteAccount" Width="16px" Height="16px" />
</td>
</tr>
</table>
Check problem here
Type an A in the textbox and press search to see the problem.
I managed to solve my problem in multiple ways.
I have set border collapse to collapse and adjusted the width of all table cell except the width of the last table cell of each row.
for some reason firefox doesn't ever give the actuall width of the cells you asked for. it always adds or retracts some the width which shows weird behavior.
Thats why I removed the entire table and switch to div with "display: table".
This doesn't give me those weird behavior problems.
.dt {
display: table;
}
.tr {
display: table-row;
}
.dt .th {
display: table-cell;
border-bottom: 1px solid #cdcdcd;
color: #5197fc;
font-weight: bold;
}
.dt .td {
border-bottom: 1px dotted #cdcdcd;
overflow: hidden;
white-space: nowrap;
}
<div class="dt" style="width: 960px">
<div class="tr">
<div class="th" style="width: 500px">Naam</div>
<div class="th" style="width: 150px">Tel/Gsm</div>
<div class="th" style="width: 250px">Email</div>
<div class="th" style="width: 60px"> </div>
</div>
<div class="tr">
<div class="td" style="width: 500px"> </div>
<div class="td" style="width: 150px"> </div>
<div class="td" style="width: 250px"> </div>
<div class="td" style="width: 60px"> </div>
</div>
</div>
It's because you have border-spacing: 5px; on the dt elements. Decreasing that value should decrease the amount of "extra pixels".
Adding border-collapse: collapse; should fix your problem
Related
I am trying to create a custom html email signature (for fun mostly) but I keep running into nonstop issues when it comes to the formatting staying when I copy and paste the html into my gmail signature.
I initially made it with a stylesheet (which I found out was very wrong). Then I switched to inline css but used flexbox (another thing I found out was very wrong). But now I switched to using html tables and now can't find why my inline css formatting isn't copying over completely. Here is what the email signature looks like from the html file
But this is what I get when I send an email with it as my signature
Here is the code. Hopefully someone can point me in the right direction on this. Thanks!
<html style="margin: 0; padding: 0; font-size: 14px; height: 150px; width: 362px;">
<body style="height: 100%; width: 100%;">
<table cellspacing=0 cellpadding = 0 style="height: 100%; width: 100%; border-spacing: 0; border-collapse: collapse;">
<tbody>
<tr style="height: 100%; width: 100%;">
<td style="height: 100%; width: 150px; padding-right: 10px;">
<img src="https://i.imgur.com/YHnpwGD.png" alt="ASU Logo" style="width: 100%;">
</td>
<td style="height: 100%; width: 2px; background-color: #8C1D40;"></td>
<td style="height: 100%; width: 210px">
<table cellspacing=0 cellpadding=0 style="height: 100%; width: 100%; border-spacing: 0; border-collapse: collapse; table-layout: fixed;">
<tbody>
<tr style="height: 30px;">
<td style="padding-left: 10px; width: 100%;">
<span style="font-weight: bold;">John Smith</span> | That Guy
</td>
</tr>
<tr style="height: 90px;">
<td style="width: 100%;">
<ul style="list-style: none; padding-left: 10px; margin: 0; height: 100%; width: 100%;">
<li style="padding-top: 8px;">
<span style="color: #8C1D40;">mobile:</span> (999) 999-9999
</li>
<li style="padding-top: 8px;">
<span style="color: #8C1D40;">email:</span> email#something.com
</li>
<li style="padding-top: 8px;">
<span style="color: #8C1D40;">website: </span> examplesite.com
</li>
</ul>
</td>
</tr>
<tr style="height: 30px;">
<td>
<img src="https://i.imgur.com/n4IwpVN.png" alt="Facebook" style="height: 25px; padding-left: 10px; display: inline-block;">
<img src="https://i.imgur.com/6bmaWUK.png" alt="Twitter" style="height: 25px; padding-left: 10px; display: inline-block;">
<img src="https://i.imgur.com/sIvnPjO.png" alt="LinkedIn" style="height: 25px; padding-left: 10px; display: inline-block;">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
edit: I have made some fixes so that now it looks almost 100% correct in gmail and outlook
However it is still coming across like so in windows Mail
Any ideas? Thanks!
I believe it is caused by the email systems not fully supporting this styling proprety
list-style: none
You may have better results using just regulars <p> for your contact infos instead of ul / li
Email system are very limited but <p> should work.
Or use <br/> as a last resort.
I'm working on my ASP.NET project (written in C#).
I can't code div to have the correct size for the text inside him. I want to have a div to capture the text well and resize itself when I shrink the page.
Can somebody help me, please?
Here is a photo with what happens.
Css code:
.box {
width: 500px;
height: 500px;
border: 1px solid #e0e4e8;
padding: 20px;
border-radius: 10px;
height: 100px;
color: #717171;
float: left;
position: relative;
display: block;
}
Html code:
<div class="box">
<p class="date">Datele contului</p>
<br />
<table class="profil">
<tr>
<td>Nume:</td>
<td>
<asp:Label ID="lblNume" runat="server" Text=""></asp:Label>
</td>
</tr>
<tr>
<td>Prenume:</td>
<td>
<asp:Label ID="lblPrenume" runat="server" Text=""></asp:Label>
</td>
</tr>
<tr>
<td>Email:</td>
<td>
<asp:Label ID="lblEmail" runat="server" Text=""></asp:Label>
</td>
</tr>
</table>
<hr />
</div>
Just remove the height attribute in css. (or)
Try Setting height to auto.
You have set height twice in your css. Remove Both.
I'm writing a simple form for sending some data to a database.
I use it in my own company so I don't need to have a perfect style.
I am using a table for the layout (this is okay in this application).
<table width="500px" style="border:1px solid black; overflow:hidden">
<tr>
<td>Born <input type="text" name="nato_pf" /></td>
</tr>
</table>
I would like to set the width of the input text to 100% (to the end of the line) , but, if I do that, the input text wraps to a new line.
I have found solutions only using div and they are not for me at the moment.
EDIT: Sometimes I have two input (with different sizes) on the same line, so I think I cannot add other td tags.
http://jsfiddle.net/gmmr7/1
table {
border:1px solid black;
width: 200px;
}
.left {
float: left;
}
.left2 {
overflow: hidden;
padding: 0 4px;
}
.left2>input {
width: 100%
}
<table>
<tr>
<td>
<label class="left">Born</label>
<div class="left2">
<input type="text" name="nato_pf" />
</div>
</td>
</tr>
</table>
<table width="500px" style="border: 1px solid black; verflow: hidden">
<tr>
<td style="width: 50px;">
Born
</td>
<td>
<input type="text" name="nato_pf" style="width: 99%;" />
</td>
</tr>
</table>
99% of width because with 100% the textbox goes over the table's border :)
and also give a width to the first td ;)
jsFiddle http://jsfiddle.net/2yZmB/
you can define another td element
<table width="500px" style="border:1px solid black; overflow:hidden">
<tr>
<td>Born </td><td><input type="text" name="nato_pf" /></td>
</tr>
</table>
css
input{
width:99%;
}
Only in IE does this not work, it displays the cells stacked vertically on top one another? Is there anyway to fix this so that IE7 will display it like a table?
<div class="table" style="width: 1100px; margin-top: 5px;";>
<div class="tr header">
<div class="td" style="width: 2%"></div>
<div class="td" style="width: 2%;"></div>
<div class="td" style="width: 14%;">Name</div>
<div class="td" style="width: 15%;">Company</div>
<div class="td" style="width: 9%;">Type</div>
<div class="td" style="width: 13%;">Phone</div>
<div class="td" style="width: 21%;">Email</div>
<div class="td" style="width: 17%;">City/State</div>
<div class="td" style="width: 8%;">Region</div>
</div>
<div class="tr">
<div class="td"><input type="image" name="Contacts1$rep$ctl01$imgdelbtn" id="Contacts1_rep_ctl01_imgdelbtn" src="images/del.png" style="border-width:0px;" /></div>
<div class="td"><img alt="" src="images/edit.png" style="width: 16px; height: 16px" /></div>
<div class="td">Bob Smith</div>
<div class="td"><a id="Contacts1_rep_ctl01_CompanyLnkBtn" href="javascript:__doPostBack('Contacts1$rep$ctl01$CompanyLnkBtn','')">Ops</a></div>
<div class="td">User</div>
<div class="td">555-555-5555</div>
<div class="td"><a href='mailto:ops#ops.com'>ops#ops.com</a></div>
<div class="td">Ops HI</div>
<div class="td">Midwest</div>
</div>
<div class="tr" style="background-color: #F0F0F0">
<div class="td"><input type="image" name="Contacts1$rep$ctl02$imgdelbtn" id="Contacts1_rep_ctl02_imgdelbtn" src="images/delete.png" style="border-width:0px;" /></div>
<div class="td"><img alt="" src="images/edit.png" style="width: 16px; height: 16px" /></div>
<div class="td">Bob Stevens</div>
<div class="td"><a id="Contacts1_rep_ctl02_CompanyLnkBtn" href="javascript:__doPostBack('Contacts1$rep$ctl02$CompanyLnkBtn','')">ABC CO</a></div>
<div class="td">User</div>
<div class="td">000.000.0000</div>
<div class="td"><a href='mailto:test#test.com'>test#test.com</a></div>
<div class="td">OHHNO CA</div>
<div class="td">Midwest</div>
</div>
</div>
CSS:
div.table
{
border: 1px solid #808080;
display: table;
}
div.tr
{
border: 1px solid #808080;
display: table-row;
}
div.td
{
border: 1px solid #808080;
display: table-cell;
height: 25px;
padding-left: 5px;
padding-right: 5px;
vertical-align: middle ;
}
div.header
{
background-color: #E0E0E0;
font-weight: bold;
}
Rows and columns of logically-associated data belong in a table. DIVs are the wrong tool for the job.
While we've all be told not to use TABLEs, that only applies to using them for layouts. A grid is not a layout, it is a table.
There really is no problem displaying tabular data in a table. That is the point of the table.
Don't feel that you need to display data in div tags.
Why don't you simply use table instead div?
If you look at this table you will see, that IE7 doesn not support "table". I suggest that you try to solve the problem with "float".
IE prior to IE8 doesn't support display: table*
Don't even try. It won't work.
Good day,
I've got a simple CSS question.
I'm trying to change a table into a CSS box, but aligning the table content is difficult to me right now.
Below there's an example of what's inside of the css box i created. How can I align these three elements (calendar and icon to the left , a text link to the center, and the other date field to the right ?) correctly ?
I've tried several things but the problem is getting it aligned properly. I want to change everything in this application that has been created with tables, to css. And I've been an 80% succesful so far.
I'd like to see some easy to understand code, to see how I can apply it on my code.
Thank you for your kind help. I might be burned out due to stress.
[Calendar (icon) Link Date]
UPDATE #1
This is the code for what I'm saying:
<asp:UpdatePanel runat="server" ID="updHoldingsPanel" UpdateMode="Always">
<ContentTemplate>
<div class="sitenote">
<table valign="absmiddle" border="0" cellpadding="0" cellspacing="0">
<tr style="height: 19px">
<td valign="absmiddle" style="text-align: left; width: 9%;">
<asp:Panel ID="pnlDateZero" runat="server" Width="187px">
<table valign="middle" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle">
<asp:Label ID="Label1" runat="server" Text="As of" Width="40px"></asp:Label></td>
<td valign="middle" style="width: 80px">
<asp:TextBox ID="txtDate" runat="server" AutoPostBack="True" Width="80px" Height="15px" OnTextChanged="txtDate_TextChanged" ></asp:TextBox>
<%--<asp:TextBox ID="txtDate" runat="server" AutoPostBack="True" Width="80px" Height="15px" contentEditable="false" OnTextChanged="txtDate_TextChanged" ></asp:TextBox>--%>
</td>
<td valign="absmiddle">
<span style="float:left; vertical-align:top; padding-top:0px; padding-top:1px;">
<asp:ImageButton align="middle" ID="imgCalendar" runat="server" ImageUrl="~/images/calendar5.gif"/>
<%--<cc1:CalendarExtender ID="ceDate" runat="server" PopupButtonID="imgCalendar" Format="MM/dd/yyyy" TargetControlID="txtDate" FirstDayOfWeek="Monday"></cc1:CalendarExtender>--%>
</span>
</td>
</tr>
</table>
</asp:Panel>
<asp:Label ID="lblAsOf" Text="" runat="server" Visible="False"></asp:Label></td>
<td style="text-align:center; width: 27%;">
</td>
<td style="text-align:center; width: 11%;">
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">LINK</asp:LinkButton>
</td>
<td style="text-align:left; width: 2%;">
<asp:UpdateProgress AssociatedUpdatePanelID="updHoldingsPanel" id="UpdateProgress1" runat="server" DisplayAfter="100" DynamicLayout="false">
<ProgressTemplate>
<asp:Image ID="Image3" runat="server" ImageUrl="~/images/live_com_loading.gif">
</asp:Image>
</ProgressTemplate>
</asp:UpdateProgress>
</td>
<td valign="absmiddle" style="text-align: right; width: 1%;">
</td>
<td style="text-align: right; valign="absmiddle">
<asp:CheckBox ID="chkInclude" runat="server" AutoPostBack="true"
OnCheckedChanged="chkInclude_CheckedChanged" Text="Include Zero Holdings"
VerticalAlign="Middle" />
</td>
</tr>
</table>
</div>
AND THE CSS OF THE BOX IS :
.sitenote {
display:block;
padding:6px;
border:1px solid #bae2f0;
background:#e3f4f9;
line-height:130%;
font-size:13px;
margin-top: 0;
margin-right: 0;
margin-bottom: 0.5em;
margin-left: 0;
}
You need to combine float:left and float:right elements and text-align css property
Full code at : http://jsbin.com/ilano3/3/edit
<div style="float:left">left</div>
<div style="float:right">right</div>
<div style="text-align:center">center</div>
You can use something like this, I think that it's the simplest approach:
<style>
.wrapper {
width: 600px;
}
.column {
float: left;
width: 200px;
}
.first {
text-align: left;
}
.second{
text-align: center;
}
.third{
text-align: right;
}
</style>
<div class="wrapper">
<div class="column first">
icon
</div>
<div class="column second">
link
</div>
<div class="column third">
date
</div>
</div>
You can add CSS for .first, .second and .third to change their width, text alignment, color...
http://jsfiddle.net/T8JMM/2/
If you really need your data/text in columns, you shouldn't shun tables. Tables are used for tabular data and if that's what your data is then just keep using them. The only bad thing about tables is when you use it for design. It looks to me that what you are trying to display is tabular data so just use 'em :)
To check if your data is bound to be shown in tables, answer the following questions:
Should the icon, link and date be on the same row ALWAYS?
Is the date on the right side bound to the link on the left side?
If your answer is yes to both questions, just use a table.
Otherwise, use lists. Separate the icon, link and date data into lists like this:
<ul class="icon-list column">
<li>Calendar (icon)</li>
<li>Calendar (icon)</li>
<li>Calendar (icon)</li>
</ul>
<ul class="link-list column">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
<ul class="date-list column">
<li>Date</li>
<li>Date</li>
<li>Date</li>
</ul>
Then using css, just float them and add some width:
.column {
float: left;
width: 33%;
}
Don't forget to clear the floats! :)
Try something like this:
<style type="text/css" media="all">
.row { border: 1px solid black; text-align: center; }
.row > .left { float: left; }
.row > .center { display: inline-block; }
.row > .right { float: right; }
/* after/inline-block (FF, IE5.5-7, S2, O9) */
.row:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }
.row { display: inline-block; }
.row { display: block; }
</style>
<div class="row">
<div class="left">Calendar (icon)</div>
<div class="center">Link</div>
<div class="right">Date</div>
</div>
The left and right divs are simply positioned with float and are contained within the float by the .row:after… CSS at the end. The center div will accept the row's text-align: center, since it's inline-block.
Note that the center piece is aligned based on the available space between the floats; multiple rows have have mis-aligned centers. Also, as it stands, too narrow of a width will cause the last piece (of left/center/right) to go to a new line; there may be a way to truncate it with overflow, but that depends on what you're going for.
Hope this helps!