http://www.surefiretaxes.com/Business/Crosslink-Tax-Software
Under the video and 2 images where it says "Features" this shows up correctly in Chrome/FireFox, but doesn't show up in IE9. What is really confusing me is when i take the same information out and throw it into DreamWeaver it works perfectly fine.
<style>
.Comparisonlbl {font-size: 13pt; color: #0061A0; line- height:1.2em}
.Comparison {border-collapse: collapse; border-spacing: 0;}
.Comparison tr {border-bottom: 1px solid #4D4D4D; line-height:1.3em}
.Comparison th {font-size: 11pt; color: #595959; padding: 15px 0 3px; text-align:center; vertical-align:top}
.Comparison td {text-align:left; color:#4D4D4D; font-size: small;}
</style>
</head>
<body>
<table class="Comparison" width="700px;">
<tbody>
<tr>
<th style="padding: 15px 0px 3px; text-align: center; color: maroon; font-size: 11pt; vertical-align: top;" width="324">Features Not Mentioned in the Video Above</th>
<th style="padding: 15px 0px 3px; text-align: center; color: maroon; font-size: 11pt; vertical-align: top;" width="364">Feature Description</th>
</tr>
<tr>
<th>Free Included Features:<br></th>
<th><div align="center"></div></th>
</tr>
<tr>
<td><strong>Free Unlimited E-Filing</strong><br>
<span style="font-size: x-small;">1040s, 1041, 1120s/c, 1065, 706, 709, 990, 5500 and more</span></td>
<td>You can E-File any Individual or Business form for any of the 50 U.S. states free of charge. To see a complete list of all the forms that you can e-file for free see our [Included Tax Forms] page.</td>
</tr>
<tr style="line-height: 1.3em; border-bottom-width: 0px;">
<td> </td>
<td> </td>
</tr>
<tr>
<th>Free Included Features:<br>
<div style="font-size: 9pt;">Crosslink doesn't offer these options</div></th>
<th><div align="center"></div></th>
</tr>
<tr>
<td><strong>Automatic Backup Software</strong></td>
<td>Backup your Tax Data from any year using our backup software. You can also retrieve these returns anywhere anytime. - [read more]</td>
</tr>
<tr>
<td><strong>E-File 2010, 2011, and 2012 returns</strong></td>
<td>With Sure-Fire you will be able to E-File 2010, 2011, and 2012 tax returns. This feature isn't available with many software vendors. - [read more]</td>
</tr>
<tr>
<td><strong>Interview Form Sheet</strong></td>
<td>Our software has a built in Interview Form Sheet that asks you questions to help determine what forms are needed for the return. - [read more]</td>
</tr>
<tr>
<td>
<table border="0">
<tbody>
<tr>
<td vAlign="center;"><strong>Refund by Pre-Paid Mastercard</strong>
</td>
<td vAlign="center;" width="85"><img border="0" src="/SureFire/v2/moneywise_card.png" width="60"></td>
</tr>
</tbody>
</table>
</td>
<td>Give your customers a Pre-Paid Mastercard their refund will be deposited onto before they leave your store. - [read more]</td>
</tr>
<tr>
<td><strong>Sure-Fire Assistant</strong></td>
<td>This software shows videos on how to do everything from a 1040 return to an amended return. Also, this software can automatically fix any software issues you might run into 9 times out of 10 without contacting support. - [read more]</td>
</tr>
</tbody>
</table>
I don't think border bottom works on a tr. Try putting it on a td tag.
Have you attempted to declare a doctype such as:
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
FYI you will need the proper markers around that, however I can't place them.
IE gets picky about table styling without them. Hope it works, sorry I would normally test it first for you but I'm on mobile.
Related
Select cells are not displaying borders in my table. There doesn't seem to be any rhyme or reason; there are just a few cells that don't display the borders properly, even though the surrounding cells render just fine. I've tried to isolate the problem, but without luck.
Please excuse the inline CSS - I don't have stylesheet access in the CMS, requiring everything to be inline. Not sure if it's relevant, but everything worked when I planned this out with a stylesheet before switching to inline CSS.
Any help is appreciated. Thank you!
<!---4/5:COMMUNITY ENGAGEMENT TABLE--->
<table style="width:90%;font-family:Tahoma;font-size: 11px;color:#253E6E;text-align:center;border-collapse:collapse;border-spacing:0px;">
<tbody>
<tr class="dbblue" style="text-align:left; background-color:#253E6E; font-family: Tahoma;color: white; font-size:13px;">
<td colspan="5" style="padding-left:5px;">COMMUNITY ENGAGEMENT</td>
</tr>
<tr class="dbred" style="text-align:center; background-color:#A33D4A; font-family: Tahoma; color: white; font-size:11px;">
<td class="row1" style="width:10%;border-width:1px; border-style:solid; border-color:#253E6E; padding:3px;">Initial Baseline</td>
<td class="row2" style="width:25%;border-width:1px; border-style:solid; border-color:#253E6E; padding:3px;">Indicator / Metric</td>
<td class="row3" style="width:10%;border-width:1px; border-style:solid; border-color:#253E6E; padding:3px;">2016-17 Status</td>
<td class="row4" style="width:45%;border-width:1px; border-style:solid; border-color:#253E6E; padding:3px;">Rationale / Details</td>
<td class="row5" style="width:10%;border-width:1px; border-style:solid; border-color:#253E6E; padding:3px;">2018 Goal</td>
</tr>
<tr>
<td style="border-width:1px;border-style:solid;border-color:#253E6E;padding:3px;">Began Formal Process in 2013-14</td>
<td style="border-width:1px;border-style:solid;border-color:#253E6E;padding:3px;">Maintain Effective Community Engagement</td>
<td class="dbgreen">Process on Schedule -<br />Work Plan</td>
<td style="border-width:1px;border-style:solid;border-color:#253E6E;padding:3px;">During the Engage 200 process, our community requested the Board remain connected to the community to determine its priorities, foster partnerships and promote learning.</td>
<td style="border-width:1px;border-style:solid;border-color:#253E6E;padding:3px;">Plan Monitored Annually</td>
</tr>
</tbody>
</table>
I made a pricing table that will change the background of the row when hovered. Due to the way I am using it I ran into two problems.
there is a 3 row span I am using to hold the purchase button as I want it vertically aligned in the center with the columns to its left. I had to use !important to keep the background white on rollover. Fixed.
when you rollover the purchase button cell its highlights the first row. This is what I do not want. I've tried all sorts of things and rearranged things as well and can't come up with any solution without removing the 3 row span.
jsfiddle
<table>
<tr>
<th colspan="3">title text</th>
</tr>
<tr>
<td>amount</td>
<td class="pricing">price</td>
<td class="purchase" rowspan="3">purchase button</td>
</tr>
<tr>
<td>amount</td>
<td class="pricing">price</td>
</tr>
<tr>
<td>amount</td>
<td class="pricing">price</td>
</tr>
</table>
table{
margin:.5em 0 1em 0;
width:100%;
font-size:15px;
}
table th{
padding:0px 0 10px 5px;
}
table td{
padding:2px 5px;
}
table td.purchase{
text-align:right;
width:150px;
vertical-align:middle;
background:#ffffff !important;
}
table td.pricing{
width:130px;
border-left:5px #ffffff solid;
}
table td.details {
padding:0 35px 0 15px;
}
table tr:hover td
{
background-color: #ebf1f6;
}
I had a similar requirement: apply a background color on a table row, as I hovered over the row with the mouse pointer, except on a 'selected' row, that was already highlighted in a different background color.
Using 'pointer-events: none;' achieved exactly what i wanted: JsFiddle
table#CustOrders tbody tr:hover td {
background-color: LemonChiffon;
}
table#CustOrders tbody tr#selected {
background-color: Yellow;
pointer-events: none;
}
The first thing that came to my mind is using "pointer-events" css property. But I am not sure if it is useful here. Check this link (there is a jsFiddle example available)
Also think about using some javascript code to set the logic you need. I understand that you want to use css only, but js fix can be quite small and obvious here - so why not ?
you can check Answer
HTML
<table width="100%" border="0" cellspacing="2" cellpadding="2">
<tr>
<td colspan="2" scope="row">title text </td>
</tr>
<tr>
<td width="75%" scope="row">
<table width="100%" border="0" cellspacing="2" cellpadding="2" class="amount_table">
<tr>
<td>amount</td>
<td>price</td>
</tr>
<tr>
<td>amount</td>
<td>price</td>
</tr>
<tr>
<td>amount</td>
<td>price</td>
</tr>
</table>
</td>
<td width="25%">Purchace</td>
</tr>
</table>
CSS
.amount_table tr:hover{
background:gray
}
I have a ASP.net web page I'm working with, I didn't create it myself, with the following HTML code:
<DIV style="POSITION: absolute; TEXT-ALIGN: center; WIDTH: 1400px; TOP: 60px; LEFT: 125px">
<SPAN style="TEXT-ALIGN: center; FONT-SIZE: xx-large" id=labelInstructions>Some Text: <BR><BR></SPAN>
<TABLE style="WIDTH: 1200px" border=1 align=center>
<TBODY>
<TR>
<TD><LABEL style="FONT-SIZE: x-large" for=FileUpload1>ENTER Path: </LABEL><INPUT id=FileUpload1 size=70 type=file name=FileUpload1></TD>
</TR>
<TR>
<TD><SPAN style="COLOR: red; FONT-SIZE: medium" id=fileUploadError><BR><BR></SPAN></TD>
</TR>
<TR>
<TD>
<TABLE style="WIDTH: 1200px" border=1>
<TBODY>
<TR>
<TD style="WIDTH: 400px; FONT-SIZE: x-large" vAlign=top align=right>FILE CONTENT INSTRUCTIONS:</TD>
<TD style="WIDTH: 850px; FONT-SIZE: x-large" vAlign=top align=left>INSTRUCTION 1<BR>INSTRUCTION 2<BR></TD></TR>
<TR><TD></TD></TR>
<TR>
<TD style="WIDTH: 400px; FONT-SIZE: x-large" vAlign=top align=right>FILE CONTENT EXAMPLE:</TD>
<TD style="WIDTH: 850px; FONT-SIZE: x-large" vAlign=top align=left>EXAMPLE 1<BR>EXAMPLE 2<BR><BR></TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
When this html is displayed in IE, I notice that the alignment of the text in the cells in the inner table, i.e. the table that is in the third cell of the outer table, is distorted when zooming in and out on it. I have a fixed table setting in pixels instead of percentages, so I don't understand why this is an issue. I want the text in the cells to stay in the same
position when zooming. The code must be manipulated from the code behind, so I cannot create a separate CSS file. Any help is appreciated.
Here are two examples to illustrate what I'm talking about:
Normal zoom at 100%:
Zoom at 75%:
Notice in the second image the two table cells at the bottom are slightly offset to the left.
UPDATE:
Yes, I understand, we will be implementing a new system in the near future. Obviously this is old and very non-standard, this was dropped in my lap when I started working with it. And we're coming up with plans for a new system to replace it, in the meantime, this is what I have to deal with.
(1) There's a problem with your nested table...
<TBODY>
<TR>
<TD style="WIDTH: 400px; FONT-SIZE: x-large" vAlign=top align=right>FILE CONTENT INSTRUCTIONS:</TD>
<TD style="WIDTH: 850px; FONT-SIZE: x-large" vAlign=top align=left>INSTRUCTION 1<BR>INSTRUCTION 2<BR></TD></TR>
<TR><TD></TD></TR>
<TR>
<TD style="WIDTH: 400px; FONT-SIZE: x-large" vAlign=top align=right>FILE CONTENT EXAMPLE:</TD>
<TD style="WIDTH: 850px; FONT-SIZE: x-large" vAlign=top align=left>EXAMPLE 1<BR>EXAMPLE 2<BR><BR></TD>
</TR>
</TBODY>
The format of this inner table is:
Row 1: Two cells.
Row 2: One cell.
Row 3: Two cells.
You need to have an extra td in row #2. (I'd say use colspan, but I'm not sure if IE does that correctly either.)
(2) I don't know how to fix that, but my guess would be that it will require javascript or disabling of the zoom feature (last I heard, the latter is not possible, though. I could be wrong there.) I haven't read the entire thing, but this MSDN article seems like a great place to start. It looks like you can detect the browser's zoom factor. If it's not equal to 1.0, you could try to get javascript to resize things in order to get the td's to their intended location.
(3) It isn't recommended that you use tables for content alignment. (I suppose this would be a good reason why.)
Is there a standard method for calculating fixed width values for tables in HTML? Right now, I'm working on formatting tables on a web page to be a fixed width, I have a table that's within another table, when testing the page in IE I notice that the alignment of the colon is off as the second picture below illustrates. My intention is to make sure the colons are properly aligned as they are in Firefox and was just curious if the misalignment was due to the settings in the HTML or if it has more to do with how the browser renders the page.
Firefox:
Internet Explorer:
UPDATE:
Sorry for not providing any reference code, here's a snippet of the particular section I'm working with.
<div style="width: 1600px; text-align: center; position: absolute; top: 10%; left: 0%;">
<span id="labelInstructions" style="font-size: xx-large;">PAGE TITLE <br><br></span>
<table style="width: 1000px;" align="Center" border="0">
<tbody>
<tr>
<td style="width: 1000px;"><label for="FileUpload1" style="font-size: x-large;">ENTER: </label><input name="FileUpload1" id="FileUpload1" size="70%" type="file"></td>
</tr>
<tr>
<td style="width: 1000px;"><span id="fileUploadError" style="color: Red; font-size: medium;"><br><br></span></td>
</tr>
<tr>
<td style="width: 1000px;">
<table style="width: 1260px;" border="0">
<tbody>
<tr>
<td style="font-size: x-large; width: 800px;" align="right" valign="top">FILE INSTRUCTIONS:</td>
<td style="font-size: x-large; width: 1800px;" align="left" valign="top">INSTRUCTION 1<br>INSTRUCTION 2<br></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td style="font-size: x-large; width: 800px;" align="right" valign="top">FILE EXAMPLE:</td>
<td style="font-size: x-large; width: 1800px;" align="left" valign="top">EXAMPLE 1<br>EXAMPLE 2<br><br></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
I know it's ugly, just a note, this is an ASP.Net generated webpage and I'm setting the attributes of the HTML elements pro-grammatically from the code behind. I sorta inherited this and my employer wants to keep major changes to a minimum.
UPDATE 2:
When I adjust the inner table width I can get it to align in IE when set to 1377px. For Firefox, the sweet spot for alignment is 1260px.
All you have to do is make the table columns the same width as each other.
Example of style:
table tr td:first-child { background-color:yellow; width:200px; }
HTML:
<table>
<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr>
<tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>
<tr><td>Row 3 Cell 1</td><td>Row 3 Cell 2</td></tr>
</table>
Sorry for not directly answering to your question, but...
Stoneage is over! You really shouldn't use Tables for layouting-purposes, as they are hardly-accessible for disabled people and make your HTML-File way too big (in relation to the content).
Seperate Content and Layout, use CSS.
Make sure to place the the parts that you want to align together in one table.
<table id="layout">
<tr><td>HEADER</td>
<tr><td>
<table id="form">
<tr><td>LABEL</td><td>INPUT FIELD</td></tr>
<tr><td>LABEL</td><td>INPUT FIELD</td></tr>
<tr><td>LABEL</td><td>INPUT FIELD</td></tr>
</table>
</tr>
<tr><td>FOOTER</td>
</table>
i would create two classes, left and right and apply the left class to the <td> on the left and the right class to the <td> on the right. the left class would be something like
.left{width:100px; text-align:right;}
heres an example
VStudio ASP.NET gives the following message:
Attribute 'bgcolor' is considered outdated. A newer construct is recommended.
What is the recommended construct?
bgcolor is within a <td> element.
Another related message is :
Attribute 'bordercolor' is not a valid attribute of element 'table'.
Does anyone know where I might find the newer replacements?
BGColor was deprecated in the W3C HTML 4.0 Specification.
Newer Web sites and web applications use CSS (Cascading Style Sheets) to render the same thing, as follows:
body {
background-color : #ffffff;
}
For tables, do the following:
<table>
<tr id="row1">
<th>Header 1</th> <td>Cell 1</td> <td>Cell 2</td>
</tr>
<tr id="row2">
<th>Header 2</th> <td>Cell 3</td> <td>Cell 4</td>
</tr>
<tr id="row3">
<th>Header 3</th> <td>Cell 5</td> <td>Cell 6</td>
</tr>
</table>
And in your CSS:
th { text-align: center; font-weight: bold; vertical-align: baseline }
td { vertical-align: middle }
table { border-collapse: collapse; background-color: #ffffff }
tr#row1 { border-top: 3px solid blue }
tr#row2 { border-top: 1px solid black }
tr#row3 { border-top: 1px solid black }
That will make it so the table will have a background color, and do different stuff with the rest of the table data/table rows.
Simply put that in your style sheet and reference it on your web page like so:
<link rel="stylesheet" href="style.css" TYPE="text/css" media="screen">
You can put just about whatever you like in your CSS, more information on CSS here, and here.
Best guess would be CSS's background-color and border-color:
<table style="border-color: #ffffff;">
<td style="background-color: #000000;">
It's also worth noting, that while not as elegant as a seperate style section, it is valid now to do it this way, with inline styles, if this is what you're more comfortable with:
<body style="background-color: #ccc;">
The newer replacement is cascading style sheets (CSS). Any attributes or elements that control the visual appearance of an HTML document are deprecated. Visual styles should be specified using CSS.
The recommended way to do things like this is to use CSS. You could set up CSS classes for your table. Something like this:
CSS:
.MyTable {
border: solid 2px #000;
}
.MySpecialCell {
background-color: #F00;
}
HTML:
<table class="MyTable">
<tr>
<td class="MySpecialCell">...</td>
</tr>
</table>