I have a table. One column contains pairs of dates, e.g.
2014/01/01 -
2014/01/02
I don't want this, because then the column is too wide:
2014/01/01 - 2014/01/02
I can't do this:
html
2014/01/01 - <br /> 2014/01/02
Because that causes this:
2014/01/01
-
2014/01/02
So the line needs to be broken exactly once. Any ideas?
That's where non breaking space comes handy. Try this:
2014/01/01 -<br>2014/01/02
In this case dash - should never end up on the next line.
Compare the behavior when it's not enough space in this demo.
<span style="white-space:nowrap;">2014/01/01 -</span> 2014/01/02
Or you could try the older <nobr>2014/01/01 -</nobr> 2014/01/02
I cannot reproduce this error, when I use this:
<table>
<tr>
<td>2014/01/01 -
<br />2014/01/02</td>
</tr>
</table>
I get the expexted output:
2014/01/01 -
2014/01/02
But you could use white-space:nowrap in your CSS:
td {
white-space: nowrap;
}
You can use the <pre> element to control formatting exactly (as in, whitespace including newlines will be rendered exactly as it is in the HTML source, between the open and close tags). It's kind of hacky but should work for this.
<pre>2014/01/01 -
2014/01/02</pre>
Related
I have this page (at this URL) that use the following structure.
I have a HEADER.php :
<TABLE>
<TR>
<TD>Link bar (left)</TD>
<TD>
Then, here I put the contents of the page and include a
FOOTER.php
</TD>
</TR>
<TR>
<TD>Footer Contents</TD>
</TR>
</TABLE>
Ok, I should use newer DIV, but I am too affectionate to old table methods ;)
The issue: everything is centered (as you can see)! I tried to put align-left everything with no success. The strange thing, is if I remove that contents (and put just "Hello World") everything is fine.
So I think that the HTML/CSS (content) - copy and pasted from a Blogger post - is the source of the issue.
But was wondering how a "corrupted" HTML/CSS (content) can alter previuos entities (Also 'Link bar' is centered!)
The same header.php/footer.php for other pages works fine
Thank you in advance
"newer DIV", "old table methods"... using tables for your layout is not old, its prehistoric! Please learn how to use div's, you'll see soon enough that it works soooo much easier.
But I also would like to provide an answer, add this to your stylesheet:
table tr td { text-align: left; }
Remove your tr{text-align:center;} line 222 AND line 296 of timer.html
You have it twice on both line so remove them all.
You really should put all your CSS on the same place, it would be easier for you to debug.
Just define this mentioned below css to achieve your desired result.....
CSS
table tr td {
text-align:left;
}
see the attached demo :-
This is PURE HTML. (no php or anything like that, if you want to know the background its a C# application with HTML in a web view).
All my HTML files are nicely formatted and correctly indented for maintainability and such.
Here is an excerpt:
<tr>
<td class="label">Clinic Times:</td>
<td><textarea name="familyPlanningClinicSessionsClinicTimes">Monday:
Tuesday:
Wednesday:
Thursday:
Friday:
Saturday:
Sunday:</textarea></td>
</tr>
The line breaks in the <textarea></textarea> element are there to get the line breaks on the page. However it also includes the indentation in the textarea element.
e.g.
The only way I can think to remove this issue is to remove the indentation. Its not the end of the world, but is there another way, to keep the nice formatting? Thanks.
You could use the
(it means new line in html) but maybe that's not a nice formatting, like you said...
The only way I can think to remove this issue is to remove the indentation. Its not the end of the world, but is there another way, to keep the nice formatting?
<tr>
<td class="label">Clinic Times:</td>
<td><textarea name="familyPlanningClinicSessionsClinicTimes">Monday:
Tuesday:
Wednesday:
Thursday:
Friday:
Saturday:
Sunday:</textarea></td>
</tr>
There isn't a pure HTML solution to your problem. Textareas always display any whitespace in their contents.
In a perfect world, you'd be able to take advantage of the CSS property white-space; unfortunately, it isn't applied to textareas either.
You can use <div> with contenteditable attribute:
<div contenteditable="true" style="width: 450px; height: 300px; white-space: pre-line;" name="familyPlanningClinicSessionsClinicTimes">Monday:
Tuesday:
Wednesday:
Thursday:
Friday:
Saturday:
Sunday:</div>
But in your case I think idea solution will be just using several ordinary text boxes, one for each day:
Monday: <input type="text" name="familyPlanningClinicSessionsClinicTimesMonday" /><br />
Tuesday: <input type="text" name="familyPlanningClinicSessionsClinicTimesTuesday" /><br />
...
Nope; a textarea will spit back whatever it actually has.
You could inject the value from JavaScript, but that seems like a lot of work for an isolated thing.
In C# if you want to send a new line to a textarea you can use Environment.NewLine
If you merely want a list of items, you can use
<ul>
<li>"Monday"</li>
<li>"Tuesday"</li>
...
</ul> Using <ul><li></li></ul> will start a preformatted list with <ul> starting the list and <li> starting each item on the list. This method does not require any java or css and will auto indent.
This works for me in angular:
ts:
log: string[] = [];
html:
<textarea row=5 col=50>{{ log.join("
") }}</textarea>
result:
in textarea each item of log is shown in a new line.
Try <br/> if it is good for you:
Monday:<br/>Tuesday:<br/>...
Here is a code snippet from my page:
<input value="Search" type="submit" /><!-- whitespace
--><span class="vdivider"></span><!-- whitespace
--></form><!-- whitespace
--><form action="login_action.php" method="post"><!-- whitespace
--><?php
Those whitespace comments are to get rid of the whitespace on each side of the divider. Is this really the only way of doing this? There has to be a more elegant solution.
One option to consider - use a templating engine if you can. For example, in Smarty, there's a {strip} function that does exactly this:
{* the following will be all run into one line upon output *}
{strip}
<table border='0'>
<tr>
<td>
<a href="{$url}">
<font color="red">This is a test</font>
</a>
</td>
</tr>
</table>
{/strip}
Output:
<table border='0'><tr><td><a href="http://. snipped...</a></td></tr></table>
You can use the font-size:0 hack. Basically, you set font-size:0 on the parent element, and set the font-size explicitly on the children.
Live demo: http://jsfiddle.net/simevidas/mLZYW/1/
(Presentation without hack: http://jsfiddle.net/simevidas/mLZYW/)
White-space only shows when it is around or next to inline elements, so at least for the forms you don´t need it (if you haven´t set your forms to display:inline...).
Positioning or floating things almost always removes the unwanted white-spaces, so for example if your .vdivider is supposed to be a vertical divider / new line, you can just use display:block on the input before it and remove that element and the comments around it.
Whitespace between elements (including newlines and tabs) cause browsers to insert spaces where there should be none.
The most elegant method that I've seen used to get around this issue is putting the > on the next line, instead of on the same line. This way, it's still legal html, and you can still keep it pretty.
For example:
<input value="Search" type="submit" />
<span class="vdivider"></span>
</form><form action="login_action.php" method="post">
<?php>
would become:
<input value="Search" type="submit"
/><span class="vdivider"></span
></form><form action="login_action.php" method="post"
><?php>
I have this table in some code;
<table>
<tr><td align="left">One</td><td align="center">Two</td><td align="right">Three</td>
<tr><td align="left">One</td><td align="center">Two</td><td align="right">Three</td>
<tr><td align="left">One</td><td align="center">Two</td><td align="right">Three</td>
</table>
I would like to not use tables and do the alignment and such all in CSS. I tried;
<span style="float:left;">One</span><span style="margin-left:auto;margin-right:auto;">Two</span><span style="float:right;">Three</span>
<span style="float:left;">One</span><span style="margin-left:auto;margin-right:auto;">Two</span><span style="float:right;">Three</span>
<span style="float:left;">One</span><span style="margin-left:auto;margin-right:auto;">Two</span><span style="float:right;">Three</span>
Example would be trying to convert this data to CSS to align as the table would;
<table>
<tr><td align="left">Bob</td><td align="center">Dingle</td><td align="right">3923.33</td></tr>
<tr><td align="left">Johann</td><td align="center">Strauss</td><td align="right">33.33</td></tr>
<tr><td align="left">Skip</td><td align="center">Skipperson</td><td align="right">0</td></tr>
</table>
But the text in the middle doesn't align correctly as its jagged (different lengths) and so are the left and right values. Seems this is madness and I am leaning towards "Just Use Tables".
First, get your HTML right: Use the correct tags to contain your data. The information you gave isn't really enough for us to ascertain what type of information you're trying to format. If it is tabular data, then there's no shame in using tables - its what its meant for.
Now the correct manner to using CSS is not to place all of your styles inline like what you are doing. Keep them in a separate CSS file instead, and use selectors to avoid having to repeat yourself so many times.
Here's the solution: http://www.jsfiddle.net/2TDXc/
Oh, and please don't listen to that 'Just Use Table' bullcrap. Really, its better for everyone in the long run.
What do you mean jagged? You mean you want text-align:justify ? Or do you mean you're having trouble with the columns being different heights? If the latter, containing divs might help. For that matter, try using divs instead of spans or setting display:block
Anyway, looking at the CSS templates provided by Matthew James Taylor may help if you mean the latter problem.
You need to make use of the display:inline and display:inline-table css attributes. They're great for forcing any element to sit next to each other on the same line.
<div>
<span style="display:inline-table;padding:2px;">One</span><span style="display:inline-table;padding:2px;">Two</span><span style="display:inline-table;padding:2px;">Three</span><br />
<span style="display:inline-table;padding:2px;">One</span><span style="display:inline-table;padding:2px;">Two</span><span style="display:inline-table;padding:2px;">Three</span><br />
<span style="display:inline-table;padding:2px;">One</span><span style="display:inline-table;padding:2px;">Two</span><span style="display:inline-table;padding:2px;">Three</span><br />
</div>
As for the jagged-ness, you must realize that your columns do not inherit or share anything from each other like they would in a table, so you'll ultimately have to hardcode a width. It looks like a table might be what you need.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How can I use a carriage return in a HTML tooltip?
I'd like to know if it's possible to force a newline to show in the tooltip when using title property of a TD.
something like
<td title="lineone \n linetwo \n etc...">
Can this be done?
This should now work with Internet Explorer, Firefox v12+ and Chrome 28+
<img src="'../images/foo.gif'"
alt="line 1
line 2" title="line 1
line 2">
Try a JavaScript tooltip library for a better result, something like OverLib.
One way to achieve similar effect would be through CSS:
<td>Cell content.
<div class="popup">
This is the popup.
<br>
Another line of popup.
</div>
</td>
And then use the following in CSS:
td div.popup { display: none; }
td:hover div.popup { display: block; position: absolute; }
You will want to add some borders and background to make the popup look decent, but this should sketch the idea. It has some drawbacks though, for example the popup is not positioned relative to mouse but relative to the containing cell.
The Extensible Markup Language (XML) 1.1 W3C Recommendation say
« All line breaks MUST have been normalized on input to #xA as described in 2.11 End-of-Line Handling, so the rest of this algorithm operates on text normalized in this way. »
The link is http://www.w3.org/TR/2006/REC-xml11-20060816/#AVNormalize
Then you can write :
<td title="lineone
linetwo
etc...">
Using
Works in Chrome to create separate lines in a tooltip.
This should be OK, but is Internet Explorer specific:
<td title="lineone
linetwo
etc...">
As others have mentioned, the only other way is to use an HTML + JavaScript based tooltip if you're only interested in the tooltip. If this is for accessibility then you will probably need to stick to just single lines for consistency.
Using
didn't work in my fb app.
However this did, beautifully (in Chrome FF and IE):
<img src="'../images/foo.gif'" title="line 1<br>line 2">
I use the jQuery clueTip plugin for this.
If you're looking to put line breaks into the tooltip that appears on mouseover, there's no reliable crossbrowser way to do that. You'd have to fall back to one of the many Javascript tooltip code samples
The jquery colortip plugin also supports <br>
tags in the title attribute, you might want to look into that one.