What to do to put an HTML element on top of a Flash object

Many times this happens that in a page we have used a DHTML menu and a flash header and when we mouse over the menu, the menu could not be visible because of the flash object comes over the menu. Another situation could be – we used a block script and the page contains a flash object and when the script is called the flash object could not be hide.

I faced these situations many times and searched web for a solution. Long ago I found a solution which worked for me to solve these problems and I am still using it.

The solution

If you are using an object tag, then add the following param in it.

<param name="wmode" value="transparent" />

If you are using an embed tag, then use the following attribute in it.

wmode="transparent"

I don’t know what these codes do 🙂 as I am not a flash expert, but they work. If anyone knows anything more about these codes then please share with us.

Internet Explorer Developer Toolbar

I am a fan of FireBug for FireFox browser. It helps me solve my design issues and I can easily debug JavaScript codes. I know it can do many more, but I mainly use it for design issues. I was thinking if I had something like this for Internet Explorer! One day I googled to see if there is any solution. And amazingly I saw that there is a tool from Microsoft. I downloaded it and installed. If you want to compare it with FireBug, then it has very limited features. But as I said earlier my main need is solving design issues, I now use it for finding design issues in IE and found it very helpful.

From Microsoft site, here are current features of the tool.

• Explore and modify the document object model (DOM) of a Web page.
• Locate and select specific elements on a Web page through a variety of techniques.
• Selectively disable Internet Explorer settings.
• View HTML object class names, ID’s, and details such as link paths, tab index values, and access keys.
• Outline tables, table cells, images, or selected tags.
• Validate HTML, CSS, WAI, and RSS web feed links.
• Display image dimensions, file sizes, path information, and alternate (ALT) text.
• Immediately resize the browser window to a new resolution.
• Selectively clear the browser cache and saved cookies. Choose from all objects or those associated with a given domain.
• Display a fully featured design ruler to help accurately align and measure objects on your pages.
• Find the style rules used to set specific style values on an element.
• View the formatted and syntax colored source of HTML and CSS.

I don’t know why Microsoft is not releasing any new version of this tool. This tool was last released on 5/9/2007. Since then no new update has come. If you want to try this tool you may download it from here. And of course do not forget to share what you think about it.

Great Saying…