I tried determining logically what it is that could have happened. For the life of me I couldn’t figure it out. That was 4 months ago.

Flash forward to today, I figured it out.

Even though resources are stored in the FLA (which explains it’s often-bloated filesize), it seems to still rely on the original location of the files. This is not a problem if you work on one computer, however, it turns out that the reason my Flash file wasn’t crashing was because get this:

Flash CS3 was looking for resources (that are supposed to be stored in the file). When these resources were stored on a network, and the FLA was on my desktop. It was crashing, and vice versa (resources on computer, fla on network).

Solution

Keep all your files and work entirely on your desktop. Re-reference files in your FLA that are not on the same hard drive as the FLA. Delete files in your library that are not in use.

Hopefully that saves someone hours of anguish.

1 – Lose Your CSS (Stylesheet)
Extra elements will only make troubleshooting harder. Removing extra elements can be key to solving your problem. In your source code, comment out the link to your stylesheet like so:
<link rel=”stylesheet” href=”style.css” type=”text/css” />

2 – Table Problems? Add a Border
If you’re a big table user, which I don’t recommend, adding a border to your table is a surefire way to identify problem areas where cells, columns or rows aren’t appearing. You can add a border to your table like so:
<table cellpadding=”0″ cellspacing=”0″ border=”2″>

3 – Outline Elements in the Web Developer Toolbar
First off, if you don’t know what the Web Developer Toolbar is, get it. It’s an add-on for Firefox. Once you’ve got it installed, click Outline and then click an option that outlines your problem area. In that same menu, you can select Outline Current Element. Using those two tools alone, you can poke around and sometimes find the problem.

4 – Try To Validate It
Try running your site through w3′s Validator. It’s pretty good at pointing out tags that haven’t been closed and illegal HTML.

5 – Remove the HTML You Know (or Think) Works
Relatively solid and common troubleshooting method, isolate your problem.

6 – Go Through the Problem HTML REALLY Slowly
Sometimes it’s just as simple as a

• Double quote or single quote that wasn’t closed
• An attribute that you misspelled (font colour?)
• Unclosed tag: <span <p>Hello World!</p></span>

7 – Color Code It
There are open-source (free) options for color coding your HTML (and other programming language) code. The popular one that I’ve used is called Notepad++. Color coding really helps with simple typos that are going to make up a fair share of the problems you’re experiencing.

That’s all for now, hope that helps. If anyone has any tips or tricks, you’re invited to add a comment.

[Partner Message]
Are you a webmaster in need of professional quality hosting? At Intermedia we provide server web hosting and Microsoft Exchange 2007 hosting at a great price. Our email hosting and web hosting services can make a small company look like a large one.

What’s the Problem?

Your Layout Is Slightly Different In One Browser Then The Other. Although to some people, a five pixel difference might not mean much, it might mean a CSS element on your website completely throws your whole website’s layout askew.

This is common. Although the problem I’m detailing isn’t always the problem occurring, it’s a good tip to keep in mind while coding and it will help you avoid most layout problems.

Internet Explorer and Mozilla Firefox both render Width and Height combined with Padding and Margins differently. What that means is, if you have a CSS element (paragraph tag, div container, span, header, etc.) that has a width and horizontal margin assigned to it, there’s a chance that something can go wrong. This applies to heights combined with vertical padding and margins and widths combined with horizontal margins and padding.

Here’s an image showing a simple .html file and the difference in how it’s displayed in each browser. Please note that the CSS attributes of each DIV container are typed out in the image. Click for a larger view.

Note how even though they each have the same HTML and CSS code, there are layout problems. In Firefox, the DIV containers are taller. In Internet Explorer, there is twice the margin between the first div container and the left side of the browser. This may not seem like much to you, but it can throw an entire website’s layout off.

What’s the Solution?

The solution is easy. Simply put, do not assign width and horizontal margin and padding attributes to the same CSS element. Also, do not assign height and vertical margin and padding attributes to the same CSS element. Some suggestions:

• Use a div container inside your div container.
• Use a p tag inside your div container. Add additional attributes to your p tag using CSS.
• Create CSS elements that serve as spacers. (cue, horrible flashback to tables and spacer.gif’s)
• Use absolute positioning, this nearly guarantees placement.

Hope that helps and clears out some mystery as to why websites seem to mysteriously shift between browsers.

• 1. Check Your Website Content
  • Is an image in your DIV Container one pixel bigger then your container’s dimension in your CSS file?
  • Do you have a long text string that’s too wide for your container set width? (ie. a long URL?)
• 2. Check Your HTML Source
  • Are you typing valid HTML code? Or are you making tiny mistakes that can impact your layout? eg.
    <div id=”wrapper”><p></div></p>
  • Did you use id=”XXXX” instead of class=”XXXX” or vice versa?
• 3. Check Your Spelling
  • Copy and paste element names from your CSS file to your HTML file. This avoids typing and spelling errors.
  • Did you order your CSS correctly? Make sure wrapper2 is actually inside wrapper if you write the following code:
    #wrapper #wrapper2 {color:#ffffff; font-size:10px;}
  • Did you make sure to include 6 characters in your hex color?
• 4. Check Your Syntax
  • Are you forgetting brackets ({}) or semi-colons (;)?
  • Did you mistakenly forget to add the pound sign (#) before an ID or the period (.) before a class?
• 5. Don’t Use Padding/Margins with Width
  • This is a common problem, especially with beginners. Padding or Margins combined with Width on the same element yield different results on different browsers. Example, this CSS:
    #wrapper { width:100px; margin:5px; padding:5px; }
    will appear different in Internet Explorer then in Firefox. This is especially critical if you’re using an image-dominant layout.
• 6. Check The Little Things
  • Did you make sure to give your Div Container position:relative; before positioning a Div Container with position:absolute; inside it?
• 7. Allow Breathing Room
  • Internet Explorer 6.0 will add a 3 pixel breathing room to some div containers, either use a “CSS hack” or build your website knowing that this can very well happen and mess up your layout.
• 8. Use a Validator
  • You can use the w3c CSS validator or the validator built into the Web Developer toolbar (a Firefox Plugin) to scan your CSS and can help solve your CSS problem.
  • Opening your CSS file in Adobe Dreamweaver can sometimes give you an idea where something went wrong.
• 9. Be Aware Of Some Browser’s Existing Problems
  • You may spend hours trying to find the solution when the problem lies in the Web Browser, and example includes the Peek-a-boo IE6 bug.
• 10. Do Some Research
  • Odds are you aren’t the only person that’s ever had the CSS problem you’ve described, use Google and type in keywords for your search you think others would use

Good luck, hope that helps.

If you’re looking to do some AJAX/Javascript effects, for example, where a semi-transparent color (I call them blankets) are put over a background while you pop up a member login, you’ll need to use the filter and opacity css attributes. (Note: If you don’t know what I’m talking about in my example, go to Text-Link-Ads.com and click on Member login)

What your code looked like

Example, We currently have our Div container that we want to make transparent, with an opacity of 65%. This is what the CSS code would look like:

#blanket {
background-color:#111;
filter:alpha(opacity=65);
opacity: 0.65;
}

This returns and error in the Firefox toolbar and doesn’t validate as proper CSS. In your Web Developer toolbar, you got:

Unknown property ‘filter’. Declaration dropped

What’s the solution? Internet Explorer has a built-in function where you can script code that only Internet Explorer browsers can see, and this does not affect any other browsers.

First off, go ahead and comment out the filter attribute in your CSS file:

#blanket {
background-color:#111;
/*filter:alpha(opacity=65);*/
opacity: 0.65;
}

In your HTML file, type the following:

<!–[if IE]>
<style type=”text/css”>
#blanket {filter:alpha(opacity=65);}
</style>
<![endif]–>

When using this syntax, the contents of the comment will only be displayed if the visitor is using Internet Explorer, thus, you can have a site that validates in the Web Developer toolbar, and still works for Internet Explorer users. I will discuss more details around the syntax at a later date.

Good luck.

Why won’t my Flash Player load my FLV online?

Here’s what you probably did:

• You created an new SWF file
• You inserted the FLV Playback Component – Player 8
• You probably skinned it, changed the source file to your.FLV file
• Tested it (CTRL-Enter) and it worked
• Uploaded it, and it didn’t

These are many of the problems you’ll experience:

• FLV works when previewing (CTRL-Enter) in Adobe Flash
• You double-checked and triple-checked the paths and filenames and uploaded as they were onto your server
• Typing in the URL for the FLV file yields nothing, or yields letters and numbers.
• You tried explaining your problem on forums and no one had any idea.

Getting Your FLV to Work

The problem could be that your server isn’t recognizing the extension type. This is often the case if you’re running a server you setup yourself or using a not-very-popular web host. The problem lies with the MIME type. Don’t worry, you don’t need to have any idea what it means or what it is. (But if you’re curious, you can always check Wikipedia) This is quite easy to fix.

If you set up your own hosting

If you set up your own hosting, this is quite easy. (Please note that you have to be using IIS or Windows-based hosting).

• Open up IIS
• Select your server and hit Properties (You can also apply this change to individual sites)
  
• Hit the HTTP Headers tab
• You should see File Types in MIME Map Section
• Select New Type
• Type .flv under Associated Extension
• Type video/x-flv as the Content Type
• Hit OK
• Restart IIS

If you buy hosting

If you buy hosting, you can easily forward them the instructions above and I’m sure they’ll take care of that for you.

Good luck!

If you have no idea what SWFObject is, you can find an article here. Chances are, if you use SWFObject and you care about having a site that validates, you will come across this very minor problem. If you’re new to validation, don’t worry. This isn’t something to get all ruffled about. It’s simply means your SWFObject code is one step away from perfection.

The Problem

The problem is that SWFObject is creating a field similar to style=”". This will never validate.

Note: You will never see this by hitting View Source simply because Javascript (the language in which SWFObject is created) is executed by your browser after seeing the HTML source; whereas languages like PHP and ASP generate HTML source before your browser retrieves it.

The Solution

It’s good to know that the solution to this validation problem is a quick fix. If you open your swfobject.js file. In there, you’ll have to modify the two longest lines, they start with:

swfNode = ‘<embed type=”application/x-shockwave-flash”
swfNode = ‘<object id=”‘+ this.getAttribute(‘id’)

Further down both these lines you will have to remove:

” style=”‘+ this.getAttribute(‘style’) +’

What this does is prevent SWFObject from ever writing style=”" code (you’re going to use a div container anyway, no big loss). Not a character after, not a character before. Take off starting at the double quote, and take off the single quote.

If you’re still looking for them, both instances are located on lines 89 and 101. Also, if it seemed like you tried everything and something went bonkers. You can click here to download the fixed SWFObject.
Now if you’re having problems getting your site to Validate, it won’t be SWFObject.