IE6 bugs - float:left and png transparency

My html code in IE6 was not working right while Firefox worked fine. There were two issues -

 

png files were not displayed with transparent background instead a solid color.

Fixed it by adding javascript code in head. Credit to tech_support @ http://www.dynamicdrive.com/forums/showthread.php?t=22176

 

float:left with the image was not working. The image continued to be above the text rather than on left of it.

Fixed it by

1. Using "display:inline" with the text; and

2. Setting height for the div since the same image on Firefox slopped after doing #1.

 

 

#

 

Fieldset

Note - If you want to test this html, replace all "< " with "<".

< html>
< body>
< fieldset>

< legend style="font-family:verdana ;font-size:30px;color:blue;align=center" >
Menu
< /legend>
< form action="">
< /br>
Bread < input type="checkbox" />
< /br>
Gravy < input type="checkbox" />
< /br>
Wine < input type="checkbox" />
< /br>
Dessert < input type="checkbox" />
< /br>
< /form>
< /fieldset>
< /body>
< /html>

Output

Link and Image

<html>
<body>
<h1>
This is heading one
</h1>
<h2>
This is heading two
</h2>
<h3>
This is heading three
</h3>
<p>
This is a paragraph
</p>
<p>
<a href="http://google.com/" >googly linky</a>
</p>
<p>
<a href="page2.htm" >Link to Page2</a>
</p>
<img src="http://www.iacuc.arizona.edu/training/cats/images/Tabby1-DomesticCat-Closeup.jpg" alt="Arizona Cat" width="100" height="100"/>
<p> This is Arizonian cat img
</p>
</body>
</html

alt in img - if the image does not load alt lets user know what is missing on the page.

Javascript Image

Following JS shows how to use images. An image can be picked from a website or from local drive.
Size of image can be given either by width or height or both. It can be left or right aligned.
To get image from local drive, source can be specified as src="file:///C:/Ruchi/calcu.jpg"

< html>
< img width="100pix" align="left" border="0" alt="calculator"
src="http://www.understandingmoney.gov.au/image/calculator.GIF">
Calculate
< body>
< input type = "textarea" onchange="javascript:func(this.value)" / >
< input type = "button" value="Go"/>
< div id= "mydiv"> < /div>
< /body>
< script type ="text/javascript">

function func(a)
{
var ansr = eval(a);
var e = document.getElementById("mydiv");
e.innerHTML = "Answer : " + ansr;
}
< /script>
< /html>

JavaScript Calculator

This script creates a simple calculator in browser.

<html>
Calculate
<body>
<input type="textarea" onchange="javascript:funky(this.value);" />
<div id="mydata"></div>
</body>
<script>
function funky(a)
{
var ansr = eval(a);
var e = document.getElementById("mydata");
e.innerHTML = "Result of expression : " + a + " is :" + ansr ;
}
</script>
</html>