Tag Archives: CSS

Removing Extra Space Underneath An Image

You have already applied normalize.css but there is still additional white space underneath an image. This is because the browsers by default will recognize the images as an inline-element, hence additional “line-height” is apply.

For example, key in the following html:


<div style='border:1px solid red;'>
 <img src='marvel.jpg'/>
</div>

Noticed that extra space (line-height)?

Solution:

  1. Either add in “display:block” to the image
    <div style='border:1px solid red;'>
     <img src='marvel.jpg' style='display:block;'/>
    </div>
    
  2. Or add in “line-height:0” to the containing dom
    <div style='line-height:0;border:1px solid red;'>
     <img src='marvel.jpg'/>
    </div>
    

Youtube / Flash Overlaps with Drop-down Menu

Every now and then, we would encounter videos overlapping with dropdown menu issues and most of the time, the culprit would be IE! If you encountered the same issue, hopefully this blog post will help you.


Flash Overlapping Issue

If you are encountering Flash overlapping issue, add vmode=”transparent” to your flash’s parameter:

<ob.ject width=”560″ height=”315″>
<param name=”vmode” value=”transparent”></param>
</ob.ject>


Youtube Overlapping Issue

There is currently 2 ways in embedding your Youtube videos. The first method is to embed the Youtube video thru Flash, if you encounter overlapping issue with it, please see the solution above.

The other method is to embedded Youtube video using iframe (which is the most recommended way, as it allows the browser to have the flexible to decide if it should render as html5 player or flash). If you are encountering overlapping issue with the iframe, append “?wmode=transparent” behind the url:

<ifra.me width=”560″ height=”315″ src=”http://www.youtube.com/embed/u-pUKTj3vWE?wmode=transparent” frameborder=”0″ allowfullscreen></ifra.me>