Web Programming

Web Programming

How to remove space between images and borders of tables in Chrome

Published on by Jin

A couple of week ago, I found an issue on my website. IE, Firefox and Safari worked well with my website, but Chrome displayed mysterious 2-3 pixels of white space between the bottom of the images and the border of the tables on my website.

[Open the code that shows the issue with Chrome]

Actually, I set the space among the cell walls and the cell contents to 0 pixels by using the attributes: [cellpadding], [cellspacing]. In additions, the values of the border attributes on the table and the images were zero. Therefore, I thought there is no reason for the mysterious white space.

<table width="200" height="150" border="0" cellpadding="0" cellspacing="0" style="table-layout:fixed;">
  <tr>
   <td width="200" height="50">
      <img border="0" src="cell1.jpg"> 
   </td>
  </tr>
 ....	
 </table>

I researched the issue for several days. There were so many similar cases on the Internet, but I cannot find the reason of my case. As a result, I tested a bunch of cases. I started the test with a code excluding any CSS codes. In that case, Chrome didn’t display any space between the images and the borders of the tables, so I assumed a CSS attribute caused this issues. Finally, I found what triggered the space. The reason was the attribute: “word-break:break-all;” in my CSS code.

<STYLE TYPE='text/css'>
   body {
     word-break: break-all;
   }
</STYLE>

Even though I found the reason, I wasn’t able to solve the problem because I needed the attribute: “word-break:break-all;” in my CSS code. I guessed Chrome recognizes images like words because  <img> is an inline element, so the attribute makes space after images. Therefore, I tried to set the images to block elements by using CSS display property: “display: block;”. I also used .class selector to specify the only images that showed the mysterious space. The shot worked.

<html>
 <head>
  <title>Example.2</title>
  <STYLE TYPE='text/css'>		
  body {
    word-break:break-all;
  }
  img.noSpace
  {
    display: block;
  }
  </STYLE>
 </head>

 <body> 
 <table width="200" height="150" border="0" cellspacing="0" cellpadding="0" style="table-layout:fixed;">
   <tr>
     <td width="200" height="50">
	<img class="noSpace" border="0" src="cell1.jpg"> 
     </td>
    ......
 </table> 
 </body>
</html>

[Open  this code with Chrome]

If you have further questions, please feel free to contact me.

Blessings,
Jin

HOW TO USE <VIDEO/> TAG ON A MOBILE SITE

Published on by Jin

These days, most people use smart phones, so it is natural to use cell phones for watching a movie or a video mail. However, many web developers are struggling to implement the natural thing because there is no helpful instruction in the Internet or books.

Of course, if you have a lot of experience in implementing a mobile site, you must already know what I’m saying. However, if you aren’t familiar with mobile web programming, my posting might help you understand how to use <video> tag.

The first issue is what the proper video file format for your website is. Conclusively, I recommend the MP4 file that is encoded by the format of H.264/AVC based on my experience.  There are many manufactures of smart phones but I think there are only three distinguished OSs (Operation System) such as iOS, Android, and MS-Mobile 7.  The three OSs support the file format; moreover I was able to see the most satisfied results by using the file format. The following links might help you figure out what my point is.

Second, you probably think how to make video files executable on your website.  If you have never heard “<video> tag”, you might be in confusion.  Actually, HTML5 was announced as a W3C Last Call Working Draft last year, so there is no useful instruction in the Internet and even books. As a result, most web developers are curious about how to use new elements such as <video>, <audio>, <canvas> and etc. Anyway, iPhone system supports HTML5, so you can get satisfied results even though you use only example sources that are provided by HTML 5 specification documents. However, the case of Android is more complicated because each version of Android supports different HTML and video type. According to the official Android homepage, HTML5 has been supported since Android 2.1. However, based on my experience, <video> tag is supported since Android 2.2.

Consequently, in the case of Android, the method of “paly ()” should be called by using Java Scripts like following my example codes.

I hope my posting is useful for you. If you have further questions, please feel free to contact me.

 

With Best Regards,

Jin