In HTML, elements containing nothing but normal whitespace characters are considered empty. A paragraph that contains just a normal space character will have zero height. A non-breaking space is a special kind of whitespace character that isn&#39;t considered to be insignificant, so it can be used as content for a non-empty paragraph.

Even if you consider CSS margins on paragraphs, since an &quot;empty&quot; paragraph has zero height, its vertical margins will [collapse](http://www.w3.org/TR/CSS21/box.html#collapsing-margins). This causes it to have no height and no margins, making it appear as if it were never there at all.

How about a workaround?
In my case I took the value of the textarea in a jQuery variable, and changed all **`&quot;&lt;p&gt;&amp;nbsp&quot;`** to **`&lt;p class=&quot;clear&quot;&gt;`** and clear class to have certain height and margin, as the following example:

**jQuery**

    tinyMCE.triggerSave();
    var val = $(&#39;textarea&#39;).val();
    val = val.replace(/&lt;p&gt;&amp;nbsp/g, &#39;&lt;p class=&quot;clear&quot;&gt;&#39;);

the val is then saved to the database with the new val.

**CSS**

    p.clear{height: 2px; margin-bottom: 3px;}

You can adjust the height &amp; margin as you wish.
And since &#39;p&#39; is a *display: block* element. it should give you the expected output.

Hope that helps!

If I understand your issue this should work

&amp;emsp—the em space; this should be a very wide space, typically as much as four real spaces.
&amp;ensp—the en space; this should be a somewhat wide space, roughly two regular spaces.
&amp;thinsp—this will be a narrow space, even more narrow than a regular space.

Sources: http://hea-www.harvard.edu/~fine/Tech/html-sentences.html 

I have recently started using `//` to &quot;comment&quot; out single lines of CSS code. I understand that I am not actually commenting out the line; I am just breaking it (I should use `/* ... */`), but it has the same effect. The line is then terminated by the `;` and the following code works fine.

I could delete it, but often I prefer not to in case I want to put it back in later or see what I had been using if I come back to it.

Example:

    li{
        float:left;
        //list-style-type:none;
        text-indent:0px;
    }

Can I get away with this, or is it likely to cause me problems?


Is it bad practice to comment out single lines of CSS with //?

I&#39;ve encounter a following [statement by Richard Stallman][1]:

&gt; &#39;When you start a Lisp system, it enters a read-eval-print loop. Most other languages have nothing comparable to read, nothing comparable to eval, and nothing comparable to print. What gaping deficiencies! &#39;

Now, I did very little programming in Lisp, but I&#39;ve wrote considerable amount of code in Python and recently a little in Erlang. My impression was that these languages also offer read-eval-print loop, but Stallman disagrees (at least about Python):

&gt; &#39;I skimmed documentation of Python after people told me it was fundamentally similar to Lisp. My conclusion is that that is not so. When you start Lisp, it does &#39;read&#39;, &#39;eval&#39;, and &#39;print&#39;, all of which are missing in Python.&#39;

Is there really a fundamental technical difference between Lisp&#39;s and Python&#39;s read-eval-print loops? Can you give examples of things that Lisp REPL makes easy and that are difficult to do in Python?


  [1]: http://stallman.org/stallman-computing.html

How is Lisp&#39;s read-eval-print loop different than Python&#39;s?

`&amp;nbsp;` is a non breaking space, which represents an empty space where no line break occurs.

If I use

    &lt;p&gt;&amp;nbsp;&lt;/p&gt;

I have a space between two passages (bigger break). If I use

    &lt;p&gt; &lt;/p&gt;

I only have a new line between the two passage (no break). Why?



Handling of non breaking space: &lt;p&gt;&amp;nbsp;&lt;/p&gt; vs. &lt;p&gt; &lt;/p&gt;

<code>&#x26;nbsp;</code> is a non breaking space, which represents an empty space where no line break occurs.
If I use
<pre><code class="hljs language-php-template">&#x3C;p>&#x26;nbsp;&#x3C;/p>
</code></pre>
I have a space between two passages (bigger break). If I use
<pre><code class="hljs language-css">&#x3C;p> &#x3C;/p>
</code></pre>
I only have a new line between the two passage (no break). Why?

Due to a plugin being used, I can&#39;t add the &quot;onClick&quot; attribute to the HTML form inputs like usual.
A plugin is handling the forms part in my site and it doesn&#39;t give an option to do this automatically.

Basically I have this input:

    &lt;input type=&quot;text&quot; id=&quot;bfCaptchaEntry&quot; name=&quot;bfCaptchaEntry&quot; style=&quot;&quot;&gt;

I want to add an onClick to it with jQuery onload for it to be like this:

    &lt;input onClick=&quot;myfunction()&quot; type=&quot;text&quot; id=&quot;bfCaptchaEntry&quot; name=&quot;bfCaptchaEntry&quot; style=&quot;&quot;&gt;

How do I go about doing this?

I know this might not be standard practice but seems like the easiest option to do in my situation.

I&#39;m a newbie to jQuery so any help is very much appreciated.

Adding onClick event dynamically using jQuery

&gt; **Possible Duplicate:**  
&gt; [How to retrieve the text of a DOM Text node?](https://stackoverflow.com/questions/7690627/how-to-retrieve-the-text-of-a-dom-text-node)  

&lt;!-- End of automatically inserted text --&gt;

In my experiments to handle DOM mutation observers I&#39;ve noticed that when the `target` is a text node there are four fields all containing the new text of the node.

- `data`
- `nodeValue`
- `textContent`
- `wholeText`

Is there a &quot;best practice&quot; for which of these fields I should use?

Are some just for compatibility with other browsers or older DOM standards? Does it make a difference whether I&#39;m reading vs modifying the text? If one is best what is the purpose of the others?

When working with text nodes should I use the &quot;data&quot;, &quot;nodeValue&quot;, &quot;textContent&quot; or &quot;wholeText&quot; field?

I have routes set in AngularJS like this:

    $routeProvider
        .when(&#39;/dashboard&#39;, {templateUrl:&#39;partials/dashboard&#39;, controller:widgetsController})
        .when(&#39;/lab&#39;, {templateUrl:&#39;partials/lab&#39;, controller:widgetsController})

I have some links on the topbar styled as tabs. How can I add &#39;active&#39; class to a tab depending on current template or url?

Set active tab style with AngularJS

How do I remove the default yellow box border of Selected input and select fields in chrome or any browser like safari?
I want to customize input with custom box shadow css. How do I remove the default browser select border?

How to remove default chrome style for select Input?

I am trying to choose the right technology to use for updating a project that basically renders thousands of points in a zoomable, pannable graph. The current implementation, using Protovis, is underperformant. Check it out here:

http://www.planethunters.org/classify

There are about 2000 points when fully zoomed out. Try using the handles on the bottom to zoom in a bit, and drag it to pan around. You will see that it is quite choppy and your CPU usage probably goes up to 100% on one core unless you have a really fast computer. Each change to the focus area calls a redraw to protovis which is pretty darn slow and is worse with more points drawn.

I would like to make some updates to the interface as well as change the underlying visualization technology to be more responsive with animation and interaction. From the following article, it seems like the choice is between another SVG-based library, or a canvas-based one:

http://www.sitepoint.com/how-to-choose-between-canvas-and-svg/

[d3.js][1], which grew out of Protovis, is SVG-based and is [supposed to be better at rendering animations][2]. However, I&#39;m dubious as to how much better and what its performance ceiling is. For that reason, I&#39;m also considering a more complete overhaul using a canvas-based library like [KineticJS][3]. However, before I get too far into using one approach or another, I&#39;d like to hear from someone who has done a similar web application with this much data and get their opinion.

The most important thing is performance, with a secondary focus on ease of adding other interaction features and programming the animation. There will probably be no more than 2000 points at once, with those small error bars on each one. **Zooming in, out, and panning around need to be smooth.** If the most recent SVG libraries are decent at this, then perhaps the ease of using d3 will outweigh the increased setup for KineticJS, etc. But if there is a huge performance advantage to using a canvas, especially for people with slower computers, then I would definitely prefer to go that way.

Example of app made by the NYTimes that uses SVG, but still animates acceptably smoothly:
http://www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html . If I can get that performance and not have to write my own canvas drawing code, I would probably go for SVG.

I noticed that some users have used a hybrid of [d3.js manipulation combined with canvas rendering][4]. However, I can&#39;t find much documentation about this online or get in contact with the OP of that post. If anyone has any experience doing this kind of DOM-to-Canvas ([demo][5], [code][6]) implementation, I would like to hear from you as well. It seems to be a good hybrid of being able to manipulate data and having custom control over how to render it (and therefore performance), but I&#39;m wondering if having to load everything into the DOM is still going to slow things down.

I know that there are some existing questions that are similar to this one, but none of them exactly ask the same thing. Thanks for your help.

**Follow-up**: the implementation I ended up using is at https://github.com/zooniverse/LightCurves

  [1]: http://d3js.org/
  [2]: http://mbostock.github.com/d3/tutorial/protovis.html
  [3]: http://www.kineticjs.com/
  [4]: https://stackoverflow.com/questions/12098286/canvas-tooltip-to-appear-outside-canvas
  [5]: http://bl.ocks.org/1276463
  [6]: https://gist.github.com/1276463

Fast and responsive interactive charts/graphs: SVG, Canvas, other?

I have a `div` tag containing several `ul` tags.

I&#39;m able to set CSS properties for the first `ul` tag only:

&lt;!-- language: lang-css --&gt;

    div ul:first-child {
	    background-color: #900;
    }

However, my following attempts to set CSS properties for each other `ul` tag except the first one don&#39;t work:

&lt;!-- language: lang-css --&gt;

    div ul:not:first-child {
	    background-color: #900;
    }

    div ul:not(:first-child) {
	    background-color: #900;
    }

    div ul:first-child:after {
	    background-color: #900;
    }

How can I write in CSS: &quot;each element, except the first&quot;?

not:first-child selector

The HTML spec allows for periods (.) in an id:

`&lt;img id=&quot;some.id&quot; /&gt;`

However, using a CSS ID selector rule will _not_ match correctly:

`#some.id { color: #f00; }`

The CSS spec for [ID Selectors][1] does not mention this case. So I assume it is using the combination of a tag name and [class selector][2]? For example, a CSS rule of `a.className` would apply to all anchor tags (`&lt;a&gt;`) with a class name of `className`, like `&lt;a class=&quot;className&quot;&gt;&lt;/a&gt;`.

Is it possible to have an external CSS file rule that references an HTML element by its id that has a period in it?

I expect not since the CSS spec specifies that a CSS &quot;[identifier][3]&quot; does not include the period as a valid character. So is this a fundamental mismatch between HTML and CSS specs? Is my only alternative to use a different type of CSS selection? Can anyone smarter than I confirm or deny this?

(I would remove the period from the HTML id attribute to simplify things, but it is a system-generated id, so I don&#39;t have the ability to change it in this case.)


  [1]: http://www.w3.org/TR/CSS2/selector.html#id-selectors
  [2]: http://www.w3.org/TR/CSS2/selector.html#class-html
  [3]: http://www.w3.org/TR/CSS2/syndata.html#value-def-identifier

CSS selector with period in ID

I&#39;m using Font-Awesome, but while the font files are not loaded, the icons appear with .

So, I want these icons to have `display:none` while files are not loaded.

    @font-face {
      font-family: &quot;FontAwesome&quot;;
      src: url(&#39;../font/fontawesome-webfont.eot&#39;);
      src: url(&#39;../font/fontawesome-webfont.eot?#iefix&#39;) format(&#39;eot&#39;), url(&#39;../font/fontawesome-webfont.woff&#39;) format(&#39;woff&#39;), url(&#39;../font/fontawesome-webfont.ttf&#39;) format(&#39;truetype&#39;), url(&#39;../font/fontawesome-webfont.svg#FontAwesome&#39;) format(&#39;svg&#39;);
      font-weight: normal;
      font-style: normal;
    }

How do I know that these files have been loaded and I&#39;m finally able to show the icons?

**Edit:**
I&#39;m not talking when the page is loaded (onload), because the font could be loaded before the whole page.

How to know if a font (@font-face) has already been loaded?

None of the following code works : 

    p:before { content: &quot; &quot;; }
    p:before { content: &quot;&amp;nbsp;&quot;; }

**How do I add white space before element&#39;s content ?**

Note: I need to color the border-left and the margin-left for semantic use and use the space as colorless margin. :)

CSS: how to add white space before element&#39;s content?

I&#39;m trying to make a number input. I&#39;ve made so my textbox only accepts numbers via this code:

    function isNumber(evt) {
    	evt = (evt) ? evt : window.event;
    	var charCode = (evt.which) ? evt.which : evt.keyCode;
    	if (charCode &gt; 31 &amp;&amp; (charCode &lt; 48 || charCode &gt; 57)) {
    		return false;
    	}
    	return true;
    }

But now the question comes to, how would I create spaces as the user is typing in their number, much like the iPhone&#39;s telephone spacing thing, but with numbers so for example if they type in: 1000 it will become 1 000;

    1
    10
    100
    1 000
    10 000
    100 000
    1 000 000
    10 000 000
    100 000 000
    1 000 000 000

Etc...

I&#39;ve tried to read the input from the right for each 3 characters and add a space. But my way is inefficient and when I&#39;m changing the value from 1000 to 1 000 in the textbox, it selects it for some reason, making any key press after that, erase the whole thing.

If you know how to do this, please refrain from using javascript plugins like jQuery. Thank You.

Adding space between numbers

I have big data set which consist of around  94 columns and 3 Million rows. This file have single as well as multiple spaces as delimiter between columns. I need to read some columns from this file in R. For this I tried using read.table() with options which can be seen in the code below, the code is pasted below-

    ### Defining the columns to be read from the file, the first 5 column, then we do not read next 24, after this we read next 5 columns. Last 60 columns are not read in-
    
        col_classes = c(rep(&quot;character&quot;,2), rep(&quot;numeric&quot;, 3), rep(&quot;NULL&quot;,24), rep(&quot;numeric&quot;, 5), rep(&quot;NULL&quot;, 60))   
    
    ### Reading first 100 rows of the data
    
        data &lt;- read.table(file, sep = &quot; &quot;,header = F, nrows = 100, na.strings =&quot;&quot;, stringsAsFactors= F)


Since, the file which has to read in have more than one space as the delimiter between some of the column, the above method does not work. Is there any method using which we can read in this file efficiently. 
             


Reading text file with multiple space as delimiter in R

Have output from `sed`:

    http://sitename.com/galleries/83450
    72-profile

Those two strings should be merged into one and separated with space like:

    http://sitename.com/galleries/83450 72-profile

Two strings are pipelined to `tr` in order to replace newline with space:

    tr &#39;\n&#39; &#39; &#39;

And it&#39;s not working, the result is the same as input.

Indicating space with ASCII code `&#39;\032&#39;` results in replacing `\n` with non-printable characters.

What&#39;s wrong? I&#39;m using Git Bash on Windows.

Using tr to replace newline with space

By creating a variable

    var a = &#39;something&#39; + &#39;        &#39; + &#39;something&#39;

I get this value: `&#39;something something&#39;`.

How can I create a string with multiple spaces on it in JavaScript?

Content Type	Original Author	Original Content on Stackoverflow
Question	grabner	View Question on Stackoverflow
Solution 1 - Html	BoltClock	View Answer on Stackoverflow
Solution 2 - Html	Roshdy	View Answer on Stackoverflow
Solution 3 - Html	user5181462	View Answer on Stackoverflow

Handling of non breaking space: <p> </p> vs. <p> </p>

Html Problem Overview

Html Solutions

Solution 1 - Html

Solution 2 - Html

Solution 3 - Html

How is Lisp's read-eval-print loop different than Python's?

Is it bad practice to comment out single lines of CSS with //?

Attributions