The general meaning of &quot;margin&quot; isn&#39;t to convey &quot;move this over by 10px&quot; but rather, &quot;there must be 10px of empty space beside this element.&quot;

I&#39;ve always found this is easiest to conceptualize with paragraphs.

If you just gave paragraphs `margin-top: 10px` and had no margins on any other elements, a series of paragraphs would be spaced beautifully. But of course, you&#39;d run into trouble when placing another element underneath a paragraph. The two would touch.

If margins didn&#39;t collapse, you&#39;d hesitate to add `margin-bottom: 10px` to your previous code, because then any pair of paragraphs would get spaced 20px apart, while paragraphs would separate from other elements by only 10px.

So vertical margins collapse. By adding top and bottom margins of 10px you&#39;re saying, &quot;I don&#39;t care what margin rules any other elements have. I demand at least 10px of padding above and below each of my paragraphs.&quot; 

i have a query like :

    SELECT column as averyveryveryverylongalias (more than 30 characters)
       FROM Table_name

it returns the error **ORA-00972 identifier is too long** , is there any tip to make it work without making the alias shorter?

Thanks

ORA-00972 identifier is too long alias column name

All I want to do is get all the content from a local file and store it in a variable. How?

`File.read(@icon.full_filename).each {|l| r += l}`

only gives me a part of it. In PHP, I just used `file_get_contents`.

Read contents of a local file into a variable in Rails

The CSS2 box model tells us that [adjoining vertical margins collapse](http://www.w3.org/TR/CSS2/box.html#collapsing-margins).

I find it quite annoying, being the source of many design bugs. I hope that by understanding the purpose of collapsing margins, I will understand when to use them and how to avoid them when they are not needed.

What is the purpose of this feature?


What is the point of CSS collapsing margins?

The CSS2 box model tells us that <a href="http://www.w3.org/TR/CSS2/box.html#collapsing-margins" target="_blank" rel="noopener noreferrer">adjoining vertical margins collapse</a>.
I find it quite annoying, being the source of many design bugs. I hope that by understanding the purpose of collapsing margins, I will understand when to use them and how to avoid them when they are not needed.
What is the purpose of this feature?

I have a form that has two buttons. One for saving a record and the other for cancelling the save procedure. I am using the `rails.js` *(a common AJAX/jQuery plug-in for those of you not in the know)*  javascript file that works with jQuery for unobtrusive javascript/ajax calls. When I send the form data over ajax, I want the name and value of the button I clicked to be submitted with the rest of the data so that I can make a decision on what to do based on which button was clicked.

The method in the `rails.js` file uses `.serializeArray()` for sending form data to the server. The problem is that this doesn&#39;t include the name/value pair of the button I&#39;ve clicked. jQuery&#39;s website states that they do this on purpose (eventhough its my opinion that they should):

&quot;The `.serializeArray()` method uses the standard W3C rules for [successful controls][1] to determine which elements it should include; in particular the element cannot be disabled and must contain a name attribute. No submit button value is serialized since the form was not submitted using a button.&quot;

How can they assume that a form WASN&#39;T submitted using a button? This makes no sense and a wrong assumption I believe.

Under the W3C rules the button which was activated for the submission of a form is considered a **successful control**.

Since the developers of jQuery have decided to do this on purpose, can I assume that there is another method that **DOESN&#39;T** exclude the activated button in a serialization?

**EDIT: Here is quick example of what my form might look like...**

    &lt;!DOCTYPE html5&gt;
    &lt;html&gt;
    &lt;head&gt;
    &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
      $(document).ready(function() {
        $(&#39;#form&#39;).submit(function(e) {
          // put your breakpoint here to look at e
          var x = 0;
        });
      });
    &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;form id=&quot;form&quot;&gt;
        &lt;input name=&quot;name&quot; type=&quot;text&quot;&gt;&lt;br/&gt;
        &lt;input name=&quot;commit&quot; type=&quot;submit&quot; value=&quot;Save&quot;/&gt;
        &lt;input name=&quot;commit&quot; type=&quot;submit&quot; value=&quot;Cancel&quot;/&gt;
      &lt;/form&gt;
    &lt;/body&gt;

  [1]: http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2

jQuery serializeArray doesn&#39;t include the submit button that was clicked

I think according to W3 spec, you&#39;re supposed to do

    &lt;input type=&quot;checkbox&quot; checked=&quot;checked&quot; /&gt;

And

     selected=&quot;selected&quot;

But, most browsers will accept it you just write &quot;CHECKED&quot; and don&#39;t give it a value. So, what if you do include the attribute, are there any values that would be (consistently) considered false?

What values for checked and selected are false?

I&#39;m in halfway trough an html parser and found html5 defined **explicitly** the rules of thumb for parsing *ill formed html*. *(And I used to infer them from DTDs, sigh)*

I love that fact, but I know well that html5 isn&#39;t finalized yet (also I wonder if it ever will) and that it isn&#39;t developed by the W3C, but by the WHATWG.

Searching for the spec I need I&#39;m presented with:

 * 8.2 section of the **W3C** *TR*  
http://www.w3.org/TR/html5/syntax.html#parsing

or

* 11.2 section of the **WHATWG** *web-apps/current-work*  
http://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html

If it wasn&#39;t for the section numbers I would induce those are simply the same. But the different numbering makes me wonder. *Which version is, supposedly, the most authoritative?*

WHATWG seems to have more sections, and to have been *added to* since W3C uploaded its candidate recommendation.

Will W3C update to the WHATWG version?  
Or will they stick to their current candidate until it gets to the official recommendation status?

**Which html5 spec are we poor devils supposed to follow, when in doubt?**

HTML5: W3C vs WHATWG. Which gives the most authoritative spec?

Regarding `window.innerWidth` and `document.documentElement.clientWidth`,


1. Webkit (Chrome / Safari) claims `innerWidth` is smaller than `clientWidth`. 

1. Trident and Presto claim `innerWidth` is bigger than `clientWidth`. 

1. Gecko claims `innerWidth` is the same size as `clientWidth`.

What is the *correct* behavior **stated by** W3C (or silimar &quot;authority&quot;)?

Test Script ([on JSFiddle][1]) (on [GoogleHost][2]):

&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-js --&gt;

    setInterval(function() {
      var inner_w = window.innerWidth;
      var inner_h = window.innerHeight;
      var client_w = document.documentElement.clientWidth;
      var client_h = document.documentElement.clientHeight;
      var debug_msg = &quot;inner: &quot; + inner_w + &quot;-&quot; + inner_h + &quot;&lt;br&gt;client: &quot; + client_w + &quot;-&quot; + client_h;
      document.getElementById(&quot;d&quot;).innerHTML = debug_msg;
      document.title = debug_msg;
      document.body.style.background = (client_w === inner_w &amp;&amp; client_h === inner_h ? &quot;green&quot; : &quot;red&quot;);
    }, 60);

&lt;!-- language: lang-html --&gt;

    &lt;div id=&quot;d&quot;&gt;&lt;/div&gt;

&lt;!-- end snippet --&gt;

(Run the snippet in **full page mode** and un-maximize or &quot;restore&quot; the window. Observe `debug_msg` while dragging the edge of the window to resize it.)


  [1]: https://jsfiddle.net/cgp9h0oe/
  [2]: http://googledrive.com/host/0B53jM4a9X2fqZENLRFBlOEZhVU0

window.innerWidth vs document.documentElement.clientWidth

`input type=&quot;submit&quot;` and `button` tag are they interchangeable? or if there is any difference then When to use `input type=&quot;submit&quot;` and when `button` ?

And if there is no difference then why we have 2 tags for same purpose?

input type=&quot;submit&quot; Vs button tag are they interchangeable?

I&#39;ve got a horizontal navigation bar made from an unordered list, and each list item has a lot of padding to make it look nice, but the only area that works as a link is the text itself.  How can I enable the user to click anywhere in the list item to active the link?

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    #nav {
      background-color: #181818;
      margin: 0px;
      overflow: hidden;
    }

    #nav img {
      float: left;
      padding: 5px 10px;
      margin-top: auto;
      margin-bottom: auto;
      vertical-align: bottom;
    }

    #nav ul {
      list-style-type: none;
      margin: 0px;
      background-color: #181818;
      float: left;
    }

    #nav li {
      display: block;
      float: left;
      padding: 25px 10px;
    }

    #nav li:hover {
      background-color: #785442;
    }

    #nav a {
      color: white;
      font-family: Helvetica, Arial, sans-serif;
      text-decoration: none;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div id=&quot;nav&quot;&gt;
      &lt;img src=&quot;/images/renderedicon.png&quot; alt=&quot;Icon&quot; height=&quot;57&quot; width=&quot;57&quot; /&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;One1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Two&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Three&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Four&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;h2&gt;Heading&lt;/h2&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;



How do I make the whole area of a list item in my navigation bar, clickable as a link?

I am using a table with alternate row color with this.

&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-css --&gt;

    tr.d0 td {
      background-color: #CC9999;
      color: black;
    }
    tr.d1 td {
      background-color: #9999CC;
      color: black;
    }

&lt;!-- language: lang-html --&gt;

    &lt;table&gt;
      &lt;tr class=&quot;d0&quot;&gt;
        &lt;td&gt;One&lt;/td&gt;
        &lt;td&gt;one&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class=&quot;d1&quot;&gt;
        &lt;td&gt;Two&lt;/td&gt;
        &lt;td&gt;two&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;

&lt;!-- end snippet --&gt;

Here I am using class for `tr`, but I want to use only for `table`. When I use class for table than this apply on `tr` alternative.

Can I write my HTML like this using CSS?


    &lt;table class=&quot;alternate_color&quot;&gt;
        &lt;tr&gt;&lt;td&gt;One&lt;/td&gt;&lt;td&gt;one&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Two&lt;/td&gt;&lt;td&gt;two&lt;/td&gt;&lt;/tr&gt;
        &lt;/table&gt;

How can I make the rows have &quot;zebra stripes&quot; using CSS?

Alternate table row color using CSS?

I noticed that [less.js][1] is working in firefox but not in Chrome, or is it because I made an error? 

    &lt;link rel=&quot;stylesheet/less&quot; href=&quot;css/style.less&quot; /&gt;
    &lt;script src=&quot;http://lesscss.googlecode.com/files/less-1.0.21.min.js&quot;&gt;&lt;/script&gt;

    @highlight: #cb1e16;
    @shade1: #cb1e16;
    @tone1: #5c6f7d;
    @grad1: #e6edf3;
    @grad2: #8a8d92;
    @text1: #333e44;
    
    header, footer, section, article, nav, aside { display: block; }
    
    .grad {
      background: @grad2;
      background: -moz-linear-gradient(top, @grad1, @grad2 1200px);
      background: -webkit-gradient(linear, 0 0, 0 1200, from(#e6edf3), to(#8a8d92));
    }
    
    html {
      .grad;
      min-height: 100%;
    }

even if i try `html { background: red; } ` it still does not work in chrome am i making a mistake somewhere?


  [1]: http://fadeyev.net/2010/06/19/lessjs-will-obsolete-css/

less.js not working in chrome

I&#39;m making a CSS animation at the minute, and in it I&#39;m moving stuff and want it to stay at the end position until the user moves their mouse away.


	body {
		background: url(&#39;osx.jpg&#39;);
		padding: 0;
		margin: 0;
		line-height: 60px;
	}
	
	@-webkit-keyframes item1 {
		0% { bottom: -120px; left: 0px; }
		10% { bottom: -40px; left: 10px; -webkit-transform: rotate(5deg); }
		100% { bottom: -40px; left: 10px; -webkit-transform: rotate(5deg); }
        }

	@-webkit-keyframes item2 {
		0% { bottom: -120px; left: 0px; }
		10% { bottom: 60px; left: 20px; -webkit-transform: rotate(7deg); }
		100% { bottom: 60px; left: 20px; -webkit-transform: rotate(7deg); }
	}
		
	@-webkit-keyframes item3 {
		0% { bottom: -120px; left: 0px; }
		10% { bottom: 160px; left: 30px; -webkit-transform: rotate(9deg); }
		100% { bottom: 160px; left: 30px; -webkit-transform: rotate(9deg); }
	}

        div {
		position: relative;
        }
	#folder {
		width: 120px;
		margin: 0px auto;
	}
	
	#folder &gt; div {
		position: absolute;	
	}
	
	#folder:hover &gt; div:nth-of-type(1) {
		-webkit-animation-name: item1;
		-webkit-animation-duration: 10s;
	}

	#folder:hover &gt; div:nth-of-type(2) {
		-webkit-animation-name: item2;
		-webkit-animation-duration: 10s;
	}
	
	#folder:hover &gt; div:nth-of-type(3) {
		-webkit-animation-name: item3;
		-webkit-animation-duration: 10s;
	}

Whenever the animation ends though, it just repeats itself. I only want it to happen once and stay where it is until the user moves away. I tried using the paused thing from the spec but it doesn&#39;t work as I&#39;d expect it to. Any help is appreciated. Thanks. :)

Can&#39;t stop animation at end of one cycle

I&#39;ve got a list, and I have a click handler for its items:

    &lt;ul&gt;
      &lt;li&gt;foo&lt;/li&gt;
      &lt;li&gt;goo&lt;/li&gt;
    &lt;/ul&gt;

How can I change the mouse pointer into a hand pointer (like when hovering over a button)? Right now the pointer turns into a text selection pointer when I hover over the list items.

Content Type	Original Author	Original Content on Stackoverflow
Question	Tom	View Question on Stackoverflow
Solution 1 - W3c	VoteyDisciple	View Answer on Stackoverflow

What is the point of CSS collapsing margins?

W3c Problem Overview

W3c Solutions

Solution 1 - W3c

Read contents of a local file into a variable in Rails

ORA-00972 identifier is too long alias column name

Attributions