This happens because the `inline-block` element has height equal to its parent and `overflow: hidden` causes its bottom edge to be aligned on the text baseline of the parent. As a result the space that is available for descenders on the text is essentially doubled for the `&lt;span&gt;` ([JSFiddle][1]).

You can fix this by also giving it `vertical-align: bottom`.


  [1]: http://jsfiddle.net/Bj8YL/23/

I have some buttons using `&lt;button&gt;`, which when clicked get a blue selected color!

Is there a way to remove this feature?

![][1]
  


  [1]: http://i.stack.imgur.com/TEJ9L.png

How do I remove blue &quot;selected&quot; outline on buttons?

I am using nodejs with the node-mongodb-native driver (http://mongodb.github.io/node-mongodb-native/).

I have documents with a date property stored as ```ISODate``` type.

Through nodejs, I am using this query:

    db.collection(&quot;log&quot;).find({
        localHitDate: { 
                &#39;$gte&#39;: &#39;2013-12-12T16:00:00.000Z&#39;,
                &#39;$lt&#39;: &#39;2013-12-12T18:00:00.000Z&#39; 
        }
    })

It returns nothing. To make it work I need to do the following instead:

    db.collection(&quot;log&quot;).find({
        localHitDate: {
                &#39;$gte&#39;: ISODate(&#39;2013-12-12T16:00:00.000Z&#39;),
                &#39;$lt&#39;: ISODate(&#39;2013-12-12T18:00:00.000Z&#39;)
        }
    })

But ```ISODate``` is not recognized in my nodejs code.

So how can I make a query against mongo date fields through my nodejs program?

Thank you

MongoDB + nodejs : how to query ISODate fields?

I have following HTML:

    &lt;div&gt;
        a&lt;span style=&quot;overflow: hidden; display: inline-block;&quot;&gt;b&lt;/span&gt;c
    &lt;/div&gt;
What I expect to see: `abc`.

What I see (in Chrome, Safari, Firefox): ![abc][1] 

`b` is higher than `a` and `c`. Why it is so and how to fix it?


  [1]: http://i.stack.imgur.com/cpC6M.png

overflow:hidden + display:inline-block moves text upwards

I have following HTML:
<pre><code class="hljs language-css">&#x3C;div>
 a&#x3C;span style="overflow: hidden; display: inline-block;">b&#x3C;/span>c
&#x3C;/div>
</code></pre>
What I expect to see: <code>abc</code>.
What I see (in Chrome, Safari, Firefox): <img src="http://i.stack.imgur.com/cpC6M.png" alt="abc">
<code>b</code> is higher than <code>a</code> and <code>c</code>. Why it is so and how to fix it?

I&#39;m writing a very simple mock-up to demonstrate some HTML5 form-validation. However, I noticed the email validation doesn&#39;t check for a dot in the address, nor does it check for characters following said dot.

In other words, &quot;john@doe&quot; is considered valid, when it&#39;s clearly not a valid email address; &quot;doe&quot; isn&#39;t a domain.

This is how I&#39;m coding my email field:

    &lt;input type=&quot;email&quot; required /&gt;

Is that not enough?

Check this [fiddle][1] to see what I mean.

  [1]: http://jsfiddle.net/yKf2U/

Note: I know how to accomplish this via a RegEx pattern instead. I&#39;m just wondering how someone could get away with using the email type instead.

Why does HTML5 form-validation allow emails without a dot?

I have a site to put together that has a fixed aspect ratio of approximately `16:9` landscape, like a video. 

I want to have it centred and expand to fill the available width, and the available height, but never to grow larger on either side. 

**For example:**

 1. A tall and thin page would have the content stretching the full width while maintaining a proportional height.
 2. A short wide page would have the content stretching the full height, with a proportional width.


************
There are two methods I&#39;ve been looking at:

 1. Use an image with the right aspect ratio to expand a container `div`, but I couldn&#39;t get it to behave the same way across major browsers. 
 2. Setting a proportional bottom padding, but that only works relatively to the width and ignores the height. It just keeps getting bigger with the width and displays vertical scroll bars.

***********

I know you could do this with JS quite easily, but I&#39;d like a pure CSS solution.

Any ideas?


Maintain aspect ratio of div but fill screen width and height in CSS?

In my script there are three divs. I want to display div with `class=&quot;ab&quot;` when I hover on first line and display div with `class=&quot;abc&quot;`, when hover on second line. Otherwise I want to display div with `class=&quot;a&quot;` by default.

But it never displays the div with `class=&quot;a&quot;`.

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    .abc,.ab {
        display: none;
    }
    #f:hover ~ .ab {
        display: block;

    }
    #f:hover ~ .abc,.a {
        display: none;

    }
    #s:hover ~ .abc {
        display: block;

    }
    #s:hover ~ .ab,.a {
        display: none;
    }

&lt;!-- language: lang-html --&gt;

    &lt;a id=&quot;f&quot;&gt;Show First content!&lt;/a&gt;
    &lt;br/&gt;
    &lt;a id=&quot;s&quot;&gt;Show Second content!!&lt;/a&gt;
    &lt;div class=&quot;a&quot;&gt;Default Content&lt;/div&gt;
    &lt;div class=&quot;ab&quot;&gt;First content&lt;/div&gt;
    &lt;div class=&quot;abc&quot;&gt;Second content&lt;/div&gt;

&lt;!-- end snippet --&gt;

Here is my JSFiddle of my problem: [JSFiddle Link][1]


  [1]: http://jsfiddle.net/mridulpv/n5fzB/1/

How to display and hide a div with CSS?

I have some values in my database which can be null if they have not already been entered.

But when I use Thymeleaf in my html, it gives an error when parsing null values.

Is there any way to handle this?

Using Thymeleaf when the value is null

How do I add a list element to an existing ul using a function from an onclick? I need it to add to this type of list ...

    &lt;ul id=&quot;list&quot;&gt;
    &lt;li id=&quot;element1&quot;&gt;One&lt;/li&gt;
    &lt;li id=&quot;element2&quot;&gt;Two&lt;/li&gt;
    &lt;li id=&quot;element3&quot;&gt;Three&lt;/li&gt;
    &lt;/ul&gt; 

... another list item with the id &quot;element4&quot; and text &quot;Four&quot; under that. I tried this function but it doesn&#39;t work...

    function function1() {
	  var ul = document.getElementById(&quot;list&quot;);
	  var li = document.createElement(&quot;li&quot;);
	  li.appendChild(document.createTextNode(&quot;Element 4&quot;));
	}

I don&#39;t know JQuery so Javascript only please. Thank you!!

how to add new &lt;li&gt; to &lt;ul&gt; onclick with javascript

So, I understand how to perform both CSS3 [transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) and [animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations). What is not clear, and I&#39;ve googled, is when to use which. 

For example, if I want to make a ball bounce, it is clear that animation is the way to go. I could provide keyframes and the browser would do the intermediates frames and I&#39;ll have a nice animation going.

However, there are cases when a said effect can be achieved either way. A simple and common example would be implement the facebook style sliding drawer menu: 

This effect can be achieved through transitions like so:

    .sf-page {
        -webkit-transition: -webkit-transform .2s ease-out;
    }
    
    .sf-page.out {
        -webkit-transform: translateX(240px);
    }

http://jsfiddle.net/NwEGz/

Or, through animations like so:

    .sf-page {
        -webkit-animation-duration: .4s;
        -webkit-transition-timing-function: ease-out;
    }
    
    .sf-page.in {
    	-webkit-animation-name: sf-slidein;
    	-webkit-transform: translate3d(0, 0, 0);
    }

    .sf-page.out {
        -webkit-animation-name: sf-slideout;
        -webkit-transform: translateX(240px);
    }

    @-webkit-keyframes sf-slideout {
        from { -webkit-transform: translate3d(0, 0, 0);	}
        to { -webkit-transform: translate3d(240px, 0, 0); }
    }
     
    @-webkit-keyframes sf-slidein {
        from { -webkit-transform: translate3d(240px, 0, 0); }
        to { -webkit-transform: translate3d(0, 0, 0); }
    }


http://jsfiddle.net/4Z5Mr/

With HTML that looks like so:

    &lt;div class=&quot;sf-container&quot;&gt;
        &lt;div class=&quot;sf-page in&quot; id=&quot;content-container&quot;&gt;
            &lt;button type=&quot;button&quot;&gt;Click Me&lt;/button&gt;
        &lt;/div&gt;
        &lt;div class=&quot;sf-drawer&quot;&gt;
        &lt;/div&gt;
    &lt;/div&gt;

And, this accompanying jQuery script:

    $(&quot;#content-container&quot;).click(function(){
        $(&quot;#content-container&quot;).toggleClass(&quot;out&quot;);
        // below is only required for css animation route
        $(&quot;#content-container&quot;).toggleClass(&quot;in&quot;);
    });

What I&#39;d like to understand is what are the pros and cons of these approaches. 

 1. One obvious difference is that animating is taking a whole lot more code. 
 2. Animation gives better flexibility. I can have different animation for sliding out and in
 3. Is there something that can be said about performance. Do both take advantage of h/w acceleration?
 4. Which is more modern and the way going forward
 5. Anything else you could add?

CSS: Animation vs. Transition

To set the minimal distance between flexbox items I&#39;m using `margin: 0 5px` on `.item` and `margin: 0 -5px` on container. For me it seems like a hack, but I can&#39;t find any better way to do this.


&lt;!-- begin snippet: js hide: false console: false babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    #box {
      display: flex;
      width: 100px;
      margin: 0 -5px;
    }

    .item {
      background: gray;
      width: 50px;
      height: 50px;
      margin: 0 5px;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div id=&#39;box&#39;&gt;
      &lt;div class=&#39;item&#39;&gt;&lt;/div&gt;
      &lt;div class=&#39;item&#39;&gt;&lt;/div&gt;
      &lt;div class=&#39;item&#39;&gt;&lt;/div&gt;
      &lt;div class=&#39;item&#39;&gt;&lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;


  [1]: http://jsfiddle.net/GLpUp/

Content Type	Original Author	Original Content on Stackoverflow
Question	Daniil	View Question on Stackoverflow
Solution 1 - Html	Jon	View Answer on Stackoverflow

overflow:hidden + display:inline-block moves text upwards

Html Problem Overview

Html Solutions

Solution 1 - Html

MongoDB + nodejs : how to query ISODate fields?

How do I remove blue "selected" outline on buttons?

Attributions