I've been building a form all day and doing most of my dev in webkit browsers because of the good developer tools. I went to test in IE and I'm having some really strange results with regards to having 3 columns of divs in a row. I can't seem to find a fix. Has anybody seen this issue before (see link below)?
http://65.61.167.68/form/
I suggest avoiding the use of display: inline-block, since IE 6 and 7 don't implement it properly. In this case, you can solve the issue in FF by changing line 33 of your stylesheet. Remove the display: inline-block and instead, float left.
#paydayForm .row .column
{
float:left;
margin-bottom:5px;
margin-right:18px;
margin-top:5px;
width:170px;
}
No answer to your problem, but for this kind of data it's a lot better to use tables instead of divs. Divs can be useful, but not in this case. Check the following example: http://jsfiddle.net/NtXwQ/
<table>
<tr>
<td colspan="2">amount requested</td>
<td rowspan="2">info<br />text<br />here</td>
</tr>
<tr>
<td>first name</td>
<td>last name</td>
</tr>
<tr>
<td>zip code</td>
<td>city</td>
<td>state</td>
</tr>
<tr>
<td colspan="2">date of birth</td>
<td>social security no</td>
</tr>
</table>
Using CSS you can change the width, height, padding, etc. and create the same style you're using now. In the end a setup like this is also a lot easier to maintain. Using divs to display tabular data will only give you headaches :)
Related
I need to put 3 links in the same line aligned like left, center, and right without using CSS.
Its something like this, I hope this helps
If you really want to do all of this without using any CSS, you can use tables.
<table>
<tr>
<td>First link</td>
<td>Second link</td>
<td>Third link</td>
</tr>
</table>
Otherwise you don't really have much of an option if you want the spacing and all you got on your image example. I would also not recommend using tables all that much, because pretty much everything should be responsive for mobile devices these days, and tables are really hard to fit in to a 320px of screen width.
This is extremely bad practice. A list of links is not tabular data. HTML is not a layout tool. This is how things were done in 1996. The web is better (in some ways) now and we do not do things this way now.
It is possible to hack a layout with a table and obsolete presentational attributes. The data is not tabular, however, so this is bad food for screen readers and search engines.
It is also not HTML 5. What you want to achieve is not possible with HTML 5. This is HTML 4.01 Transitional which, when it was released two decades ago, was only ever intended as a stop-gap while people converted over to using CSS for presentation.
<table width="100%">
<tr>
<td width="33%">A link</td>
<td width="34%" align=center>A link</td>
<td width="33%" align=right>A link</td>
</tr>
</table>
assuming you can add inline styling ,you can use this
<div>
<a href="" >firstlink</a>
<a href="" style ="text-align: center;
width: 90%;
display: inline-block;
margin: auto;">secondlink</a>
<a href="" >thirdlink</a>
</div>
else you can use one by answered by community wiki
I'm trying to program a javascript timeline, in which you click on the left column revealing something in the right column. I suppose there are easier ways to do this, but the HTML below looks really really neat.
So the usual way rowspan works is that you have a td that you want to extend down a few rows to complete the table.
<tr>
<td>1942</td>
<td rowspan=2>Something happened</td>
</tr>
<tr>
<td>2017</td>
</tr>
However, what if I want to rowspan upwards, so that the below timeline item fills both rows?
<tr>
<td>1942</td>
</tr>
<tr>
<td>2017</td>
<td rowspan=2>Something else happened</td>
</tr>
I know I can just move them all to the top row and rowspan from there, but I really want to have this nice, easy-to-edit format, with dates and rows right next to each other.
(An idea I had was that if you think of rowspan as analogous to css width and height, there might be something analogous to css left and top (like "table-row"?) you could set, other than actually moving the td's to the tr you want. I don't think that exists, though.)
(also, does anyone know if negative rowspan is defined?)
No, rowspan always works “downwards”. HTML 4 does not explicitly say this, but it is definitely implied, and there is no way to change it. HTML5 makes it explicit, in its boringly detailed (but necessary for implementors) Processing model for tables.
I know this is an old question, but I was looking for this myself and this is the first result on google. After a bit of tweaking, I’ve managed to find a solution:
<table>
<thead>
<tr>
<td>Column 1/<td>
<td>Column 2</td>
</tr>
</thead>
<tbody>
<tr>
<td rowspan=2>A1</td>
<!--This cell must be hidden; otherwise you will see a gap at the top of the second column between the header and body-->
<td style=“padding:0px;” />
</tr>
<tr>
<td rowspan=3>A</td>
</tr>
<tr>
<td>A2</td>
</tr>
<tr>
<td>A3</td>
</tr>
</tbody>
</table>
You might have to experiment a bit if you want to have a hierarchy deeper than 2 columns, but I’m confident it’s possible.
I have 2 tables one on top of the other and I would like to align their column widths exactly with each other, is there a way to do this? Tried fixed table col widths etc no joy
You can see on fiddle the columns are slightly off each other
http://jsfiddle.net/askhe/
HTML
<table class="tblresults txtblack">
<tr class="tblresultshdr bold">
<td class="col1">Company</td>
<td>Currency</td>
<td>Bid</td>
<td>Ask</td>
<td>YTD Vol</td>
</tr>
<tr>
<td class="col1">ABC</td>
<td>GBP</td>
<td>94</td>
<td>16</td>
<td>3,567,900</td>
</tr>
<tr>
<td class="col1">DEF</td>
<td>GBP</td>
<td>3</td>
<td>46</td>
<td>10,000</td>
</tr>
<tr>
<td class="col1">GHI</td>
<td>GBP</td>
<td>3</td>
<td>46</td>
<td>10,000</td>
</tr>
<tr>
<td class="col1">JKLM</td>
<td>GBP </td>
<td>7</td>
<td>46</td>
<td>56,000</td>
</tr>
</table>
<table class="tblresults txtblack margintop10">
<tr>
<td colspan="5" class="bold" >Investments</td>
</tr>
<tr>
<td class="col1">ghjk</td>
<td>GBP</td>
<td>13</td>
<td>6</td>
<td>130,000</td>
</tr>
<tr>
<td class="col1">asdsa</td>
<td>GBP</td>
<td>120</td>
<td>46</td>
<td>16,000</td>
</tr>
<tr>
<td class="col1">dfdsfsdf </td>
<td>GBP</td>
<td>1</td>
<td>4</td>
<td>13,000</td>
</tr>
</table>
CSS
table.tblresults {
width:100%;
*width:99.5%;
border: 1px solid #b9b8b8;
top: 0;
}
table.tblresults tr.tblresultshdr {background: lightgrey;}
table.tblresults tr.tblresultshdr td {padding: 6px;}
table.tblresults td {padding: 8px; border: 1px solid #b9b8b8;}
table.tblresults td.col1 {width: 70%;}
table elements where meant for scientific data, such as probes from experiments, not for actual layout:
Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.
While you're not using them for layout, your problem is actually a rendering/layout issue. The easiest solution to this is to merge both tables into one (jsfiddle).
If you prefer your data to be encapsulated in many little tables instead of one giant table you'll need to specify a width for almost all columns.
Why not put them in the same table? It seems they are semantically similar.
http://jsfiddle.net/askhe/5/
No need to merge tables, you can use this
table-layout: fixed;
There is a wonderful article here about it
https://css-tricks.com/fixing-tables-long-strings/
Although I agree that the solution to merge the tables is the best and simplest one in many cases, i came to the need to really have this 2 separate tables with identical columns (to make one table fixed and the 2nd scrollable)
to achieve that, I declared 2 tables with same number of columns, one with width rules (% and px), one without
Then, with Javascript, I applied the width of the ruled table to the free one:
document.getElementById("HeaderTable").style.width = document.getElementById("main").clientWidth ;
document.getElementById("tar1").style.width = document.getElementById("org1").clientWidth ;
document.getElementById("tar2").style.width = document.getElementById("org2").clientWidth ;
document.getElementById("tar3").style.width = document.getElementById("org3").clientWidth ;
document.getElementById("tar4").style.width = document.getElementById("org4").clientWidth ;
1st line fix the table width, then it's done column by column. Using .clientWidth is important, because .style.width send a percentage if it's what is applied on the ruled column.
This was almost working, but not quite. Table had a similar layout, but shifted by a few pixels. As I only needed that to be working in IE, I though I could move that with fixed values, to be as close as possible as what I wanted, so I change my code to:
document.getElementById("tar1").style.width = document.getElementById("org1").clientWidth - 9;
document.getElementById("tar2").style.width = document.getElementById("org2").clientWidth ;
document.getElementById("tar3").style.width = document.getElementById("org3").clientWidth - 10;
document.getElementById("tar4").style.width = document.getElementById("org4").clientWidth - 10;
I guess the values could be different for a different table. But what surprised me, is that it works in every major browser, independently of the zoom level
windows resize breaks the alignement, so you need to bind the function to this event. Also, this solution don't work anymore on extreme size of the table
Here is a jsfiddle, as some CSS is involved. for the moment it doesn't work on zoom, because my floating header doesn't stick to right: 0px, don't know why yet
Well, using this simple HTML snippet you can do it. well in my case i was creating pdf's from HTML, so this solution worked for me. Hope it help some one else.
<table border=0>
<tr>
<td>
<!--Insert table 1 -->
</td>
<td>
<!--Insert table 2 -->
</td>
</tr>
</table>
I'm experiencing a webkit rendering issue when attempting use a
<td colspan=5>
The majority of the table is set up like this
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
However, when I add a row with the one td with colspan=5, the td is indented one column to the right. It basically looks like this even though this is not the markup.
<tr>
<td> </td>
<td colspan="4"></td>
</tr>
Has anyone experienced this indenting and is there any way to correct this? It renders just fine in IE and Firefox. This seems like it should be basic table functionality. There are no styles affecting the table
I tried the same mark-up in chrome and it seems to render correctly. Could you please check if there are any unclosed or tags.
Why does the CSS property overflow:scroll; not work in <td>, while overflow:hidden; works well?
<table border="1" style="table-layout:fixed; width:100px">
<tr>
<td style="overflow:scroll; width:50px;">10000000000000000000000000000000000</td>
<td>200</td>
<td>300</td>
</tr>
</table>
From the CSS specs1,2, I can't see why.
You have to wrap it in a div, that will work:
<table border="1" style="table-layout:fixed; width:500px">
<tr>
<td style="width:100px;"><div style="overflow:scroll; width:100%">10000000000000000000000000000000000</div></td>
<td>200</td>
<td>300</td>
</tr>
</table>
Firstly provide desired height to td and then Apply "float: left" property to respective "td" you want scrollbar to appear.
I got something from here!
Andrew Fedoniouk wrote:
This is actually my question:
"One technical reason is that the overflow property does not apply to
tables." - why? What is this reason?
I'm no expert, but I believe this is
just for backward compatibility with
legacy table behavior. You can check
the "automatic" table layout
algorithm in the spec. I'm pretty
sure that this layout algorithm is
incompatible with the overflow
property (or, more accurately, the
layout algorithm will never result in
the need for any value of overflow
except 'visible').
Yep, this is why I am asking. Seems like there are no formal reasons
why or should not be scrollable but seems like
UA vendors reached some silent agreement in this area. So is the
question.
The spec agrees with you with respect
to elements. Table cells are
supposed to respect overflow, although
Mozilla, at least, appears not to do
so. I can't answer your question in
this instance, although I would still
guess the answer is still tied to
legacy rendering.
The main thread is here.
<table border="1" style="table-layout:fixed; width:500px">
<tr>
<td style="width:100px;"><div style="overflow:scroll; width:100%">10000000000000000000000000000000000</div></td>
<td>200</td>
<td>300</td>
</tr>
</table>