Category: Web Design/Development

Web Design/Development by Joe Billman

Extra space below img tag

So I’ve been doing a lot of web development lately and have run into some issues that have driven me nuts. The latest one had to do with an HTML email template I was creating. for HTML emails you have to use a lot of tables which is always fun. I had a table with columns and rows that had images in them. The img tags were putting in extra space below them. I was using the HTML 4 strict doc type. That was part of the problem. If I changed that it worked fine, but I wanted to use that particular doc type since it was for an email template. I’ve been able to fix problems like this before by just adding a br tag after the img tag, but that didn’t work with this doc type. The problem is due to how the img tag is displayed. It’s generally an inline element not block. So using CSS I changed the display to block:

img
{
    display:block;
}

I overwrote the display for all of the img tags because that is what I needed, but you could do it on an individual (inline) basis.

 

How do I change the retry time in SmartFTP

So if you do much with ftp you have probably heard of SmartFTP. If not I would highly recommend them. I have used a variety of ftp programs and theirs is by far the best that I have used up to now. It has a lot of great features and is reasonably priced. If you have used it then you have also most likely ran into the issue that arrives if you attempt to upload a file and it fails causing it to state that it will retry at (time stamp) future. The default is 30 seconds from the time that it attempted to upload the file. Well for me the problem is 30 seconds is much more than I care to wait. I do a lot in Adobe Flash and I have SmartFTP set to monitor the .swf file for the .fla file that I am working on. This way every time I publish the file it will automatically upload it for me. The problem is that SmartFTP recognizes the file having been changed right as Flash begins to compile the swf not when it is actually finished. This means that every time I would have to wait 30 seconds. Well there is a solution and here it is. To change the retry default time value go to Favorites > Edit Favorites. In the Favorites window, go to Tools > Edit Default Favorite. In the Properties window, select the “Connection” menu, and there you will see a setting “Retry Delay” it is set to 30 seconds by default. There you can type in whatever time you want. For most small swf files 1 second has worked for me.

W3C Page Validation Issue

It’s good practice to always make sure that each page on your site validates to its proper doctype. Recently I noticed that some pages on a site I did that use to validate no longer did. It was giving me an error saying that it didn’t know how to decode Content-Encoding ‘none’. This was saying that I wasn’t declaring the encoding at the top of my page. The thing is I was. Here is what the problem was. I am using php and have an external php page that contains functions on it that are used by the page and I was including that page at the top of the document. The problem with this was that it was above the doctype declaration. All I had to do was move it down one line and that fixed it. I’m not sure if something has changed with the validation because it use to validate, but if you run into this problem just move it down one line. Here is an example:

Before:
<?php include_once(“my-file.php”);?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

After:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<?php include_once(“my-file.php”);?>

PS
I use a cool plugin for Firefox called Web Developerthat has a built-in tool that will validate your page straight from the W3C Validator. If you are not currently using this I suggest checking it out!

The Proper Way of Referencing Elements on a Web Page

I was recently working on a web page that was not displaying some Flash elements properly on some people’s browsers or so I thought. After beating my head for a bit I realized what the problem was. The .swf file that I was referencing had an absolute path that included the “www.” in the URL. Here is an example: “<param name=”movie” value=”http://www.mywebsite.com/swfs/my_movie.swf” />. The problem was when someone went to the site and did not include the “www” for example: “http://mywebsite.com”. The solution to this is rather simple and should be the practice you use when referencing elements on your pages. It’s called root referencing and here is an example: “<param name=”movie” value=”/swfs/my_movie.swf” />. You leave off the “http://”, the “www” and the site name and instead just put a “/” at the beginning. This will work in all cases even if the page that is referencing the element is nested multiple folders deep.