The image is `display: inline` so it is treated like a character and sits on the baseline. The gap is caused by the space provided for the descender (which you find on letters like j, g, y and p).

Adjust the `vertical-align` with CSS: `img{vertical-align: bottom}`

`display:block` is sufficient for this, if the element has no siblings.

I had the same issue and i fixed it by adding to the &#39;a&#39; tag `display: block;` and `font-size: 0px;`

I fixed mine by adding 

    a {
     display:inherit
    }

Hope this helps

##### December 2021 Solution

As [announced][1] by several people, css `:has()` selector was implemented. So this issue could be solved for anchors which &quot;has&quot; images as a direct child:

    a:has(&gt; img) {
      font-size: 0;
    }

At the moment I am writing this reply, it is only supported by Safari TP but probably [this table][2] will be greener soon.


  [1]: https://twitter.com/LeaVerou/status/1473243441123504129?s=20
  [2]: https://caniuse.com/?search=has

The element looks like this:

    &lt;li class=&quot;blah active&quot;&gt; ... &lt;/li&gt;


`jQuery.attr(&#39;class&#39;)` will return both classes.
How can I get only the 1st class (&#39;blah&#39; in this case) with jQuery?


jQuery - get the first class only from a element

Is the field &quot;_id&quot; necessary in Android SQLite?

About &quot;_id&quot; field in Android SQLite

I have an &lt;a&gt; tag surrounding an image. I have a border set on the div that the &lt;a&gt; tag is in. I have both margin and padding set to 0 but for some reason my &lt;a&gt; tag is still about 3 pixels taller than my image. This leaves a bit of space between the image and the border, which destroys the look that I want to accomplish.

What am I doing wrong? I have tested in both FireFox and Chrome with the same results.
Thanks

White space at bottom of anchor tag

<p>I have an <a> tag surrounding an image. I have a border set on the div that the </a><a> tag is in. I have both margin and padding set to 0 but for some reason my </a><a> tag is still about 3 pixels taller than my image. This leaves a bit of space between the image and the border, which destroys the look that I want to accomplish.</a></p><a>
<p>What am I doing wrong? I have tested in both FireFox and Chrome with the same results.
Thanks</p>
</a>

Is there a way to create a list-style in HTML with a dash (i.e. - or &amp;ndash; `&amp;ndash;` or &amp;mdash; `&amp;mdash;`) i.e.

    &lt;ul&gt;
      &lt;li&gt;abc&lt;/li&gt;
    &lt;/ul&gt;

Outputting:

    - abc

It&#39;s occurred to me to do this with something like `li:before { content: &quot;-&quot; };`, though I don&#39;t know the cons of that option (and would be much obliged for feedback).

More generically, I wouldn&#39;t mind knowing how to use generic characters for list items.


HTML list-style-type dash

I need to use, for example, the star-symbol(★) as the bullet for a list-item.

I have read the [CSS3 module: Lists][1], that describes, how to use custom text as bullets, but it&#39;s not working for me. I think, the browsers simply don&#39;t support the `::marker` pseudo element.

How can I do it, without using images?


  [1]: http://www.w3.org/TR/css3-lists/#markers


Unicode character as bullet for list-item in CSS

Does anyone know about any software that can convert video (avi, flv, whatever) to HTML5 supported ogg/ogv and mpeg4 formats?

I tried a few but I couldn&#39;t find anything that actually works.

Converting video to HTML5 ogg / ogv and mpg4

I want to reduce load times on my websites by moving all cookies into local storage since they seem to have the same functionality. Are there any pros/cons (especially performance-wise) in using local storage to replace cookie functionality except for the obvious compatibility issues?

Local Storage vs Cookies

I want to absolute position an image that I will be moving around in a div and want anything that extends outside the div to be clipped. Here is an example of the problem:

    &lt;html&gt;
    &lt;body&gt;
      &lt;div style=&quot;width: 500px; height: 200px; border: 1px solid black; overflow: hidden;&quot;&gt;
        &lt;div style=&quot;width: 200px; height: 50px; margin: auto; border: 1px solid black; background: gray;&quot;&gt;On top of image.&lt;/div&gt;
        &lt;div style=&quot;position: absolute; top: 10px; left: 250px; z-index: -1;&quot;&gt;&lt;img src=&quot;http://www.google.com/logos/worldcupfinale10-hp.gif&quot; /&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
    &lt;/html&gt;

So, I want the right edge of the logo to not display. Ideas?

CSS overflow hidden with absolute position

I&#39;ve seen [this question][1] and [googled a bit][2], but nothing so far has worked. I figure it&#39;s 2010 now (those questions/answers are old and, well, unanswered) and we have CSS3! Is there any way to get a div to fill an entire table cell&#39;s width and height using CSS?

I don&#39;t know what the width and/or height of the cell will be ahead of time, and setting the div&#39;s width and height to 100% does not work.

Also, the reason I need the div is because I need to absolutely position some elements outside of the cell, and `position: relative` does not apply to `td`s, so I need a wrapper div.


  [1]: https://stackoverflow.com/questions/291537/how-can-i-get-a-div-to-fill-a-table-cell-vertically
  [2]: http://www.google.com/search?sourceid=chrome&amp;ie=UTF-8&amp;q=css+fill+a+table+cell+with+a+div

Make a DIV fill an entire table cell

How do I stop the flash of unstyled content (FOUC) on a web page?

Eliminate flash of unstyled content

Here&#39;s a simple menu structure:

    &lt;ul id=&quot;menu&quot;&gt;
      &lt;li&gt;&lt;a href=&quot;javascript:;&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;javascript:;&quot;&gt;Test&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;

I want the `&lt;a&gt;` to be stretched so that it fills the entire `&lt;li&gt;`. I tried using something like `width: 100%; height: 100%` but that had no effect. How do I stretch the anchor tag correctly?

Stretching &lt;a&gt; tag to fill entire &lt;li&gt;

As the title says, is it possible to select elements in XPath that only begin with a certain string, but perhaps do not end with the same?

For example there are 3 anchor elements:

    &lt;a href=&quot;buy.php/onething&quot;&gt;&lt;/a&gt;&lt;a href=&quot;buy.php/twothing&quot;&gt;&lt;/a&gt;&lt;a href=&quot;sell.php/anotherthing&quot;&gt;&lt;/a&gt;

I only want to get anchor elements that begin with &#39;buy.php/&#39;. I don&#39;t think the following will work, will it:

    getByXPath(&quot;//a[@href=&#39;buy.php/&#39;]&quot;)

How can I do this?

Selecting elements whose attribute begins with something in XPath

Is it possible to remove the dotted line surrounding a selected item in a select element?

![alt text][1]

I have tried to add the `outline` property in CSS but it did not work, at least not in FF.

    &lt;style&gt;
       select { outline:none; }
    &lt;/style&gt;

  [1]: http://i.stack.imgur.com/17fYq.png

**Update**&lt;br/&gt;
Before you go ahead and remove the outline, please read this.&lt;br/&gt;
http://www.outlinenone.com/

Remove outline from select box in FF

I have been stuck on this one for a while - I couldn&#39;t figure out why a website renders differently in two identical versions of Internet Explorer. Half an hour ago I came across a compatibility mode button in IE which made me really angry. 

Disabling compatibility mode has fixed my problem.

Is there a way to disable it programmatically, i.e. from a web page?

**Edit:**

Just came across this blog https://blogs.msdn.com/b/askie/archive/2009/03/23/understanding-compatibility-modes-in-internet-explorer-8.aspx 

I&#39;ll post an example code after reading the article

Content Type	Original Author	Original Content on Stackoverflow
Question	Icode4food	View Question on Stackoverflow
Solution 1 - Html	Quentin	View Answer on Stackoverflow
Solution 2 - Html	meder omuraliev	View Answer on Stackoverflow
Solution 3 - Html	christk	View Answer on Stackoverflow
Solution 4 - Html	Marc Ordinario	View Answer on Stackoverflow
Solution 5 - Html	Lionel T	View Answer on Stackoverflow

White space at bottom of anchor tag

Html Problem Overview

Html Solutions

Solution 1 - Html

Solution 2 - Html

Solution 3 - Html

Solution 4 - Html

Solution 5 - Html

December 2021 Solution

About "_id" field in Android SQLite

jQuery - get the first class only from a element

Attributions