08 February, 2008

Install multiple versions of IE on one OS.

Want to test your website in various versions of Internet Explorer(IE)?

There are many ways to do this:
1) Download the application : http://tredosoft.com/files/multi-ie/multiple-ie-setup.exe called "Multiple IE".
- the problem is, it is not 100% stable after i tested. For me, it is not 100% simulate the older version IE specially when rendering PNG, some CSS...



2) Install another virtual OS using Virtual PC or VMware, then install the IE version you want.
- the problem is, time consuming & extra harddisk space needed. Not everyone know how to install and configure virtual OS ( but it is not too hard, i will teach how to install a virtual OS with just few steps) and you might install many virtual OS if you want to install more versions of IE.
- the good thing is, it wont corrupt your current IE. So you can do what ever you want in this virtual OS.

3) Install different OS in your different partitions of your harddisk.

4) Mix. (1)+(2) : Install ONE Virtual OS, then install ONE Multiple IE installer in the Virtual OS.
- the good thing is, if anything happen wrong to the Multiple IE, you can just delete the virtual OS .
- And it just need a bit extra memory & extra harddisk, it depends on your OS version. Of cause the more memory you have the smoother your OS running on your PC.

updated(11 June 2009):
There is another better solution: install a software called "IETester"
You can grab the application at : http://www.my-debugbar.com/wiki/IETester/HomePage
There are some limitations, but it is good enough for those who not really 100% care about the version problem, BUT need to make sure there is not look too worst in the older versions of IE.

29 October, 2007

How to make DIV layer overlap a Flash movie?

1. Use <param name="wmode" value="transparent">, for IE.
2. Add the wmode="transparent" parameter to the EMBED tag, for FF & Safari.

Example:

<object width="100" height="100">
<param name="movie" value="http://www.lavatica.com/test.swf">
<param name="wmode" value="transparent">
<embed src="http://www.lavatica.com/test.swf" wmode="transparent" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash" width="100" height="100"></embed>
</object>

p/s: tested in IE 6&7, Safari, Opera 9, FF 2.

24 October, 2007

align="absmiddle" or align="absbottom" not validate in W3C Markup Validator

Normally we will use align="absmiddle" to make an image align in the middle between a HTML element/object, e.g:


< input name="text1" type="text" maxlength="17">< src="button_ok.gif'" alt="OK" style="margin-bottom:1px;" align="absmiddle">
or
<img src="images/icon_diamond.gif" alt="" align="absbottom">

You will get error when you try to validate your page with W3C Markup Validator (http://validator.w3.org/check).

How to solve?

Use this:

<img src="images/icon_diamond.gif" alt="" style="vertical-align:bottom">

Same to:

<img src="images/icon_diamond.gif" alt="" style="vertical-align:middle">

19 October, 2007

How do you stretch a background image?

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

< html>
< head>
< title>Background to fit screen</title>

<style type="text/css">

html {height:100%;}

body {height:100%; margin:0; padding:0;}

/* set the background image to full capacity of the viewing area */

#bg {position:fixed; top:0; left:0; width:100%; height:100%;}

/* places the content on top of the background image */

#content {position:relative; z-index:1;}

</style>
<!--[if IE 6]>
<style type="text/css">

/* some css fixes for IE browsers */
html {overflow-y:hidden;}
body {overflow-y:auto;}
#bg {position:absolute; z-index:-1;}
#content {position:static;}

</style>
<![endif]-->
</head>

<body>

<div id="bg"><img height="100%" alt="" src="yourimage.jpg" width="100%" /></div>
<div id="content"><p>Enter your content here.</p></div>


17 October, 2007

Div height problem in IE


The following, as the only content in a file, is the requested 5px high in Mozilla and Opera, but 12px high in IE (5.0, 6.0 & 7.o):

<div class="dot" style="height:1px; border:1px solid red;"></div>

Divs in IE have a minimum height when the <div> is empty. There is a couple of ways to solve this:
1) Put a comment tag inside the div:
<div class="dot" style="height:1px; border:1px solid red;"><!-- --></div>

2) Add this to its style inside the div:
<div class="dot" style="font-size:2px; height:2px; border:1px solid red;"></div>