My site in IE6 - NEED HELP

[comptech520]

My site in IE6 looks horriable.

The red bar below the header is too big

The navigation image to the left has a grey background.

http://www.esctonline.com/new

Can you please help with this?

[WebJoel]

<div style="height:22px; font-size:0.9em; background-color:red; color:white; padding:0 5px 0;">
<p style="width:40%; float:left; line-height:1.0em; padding:4px 0 2px 0; font-weight:bold;">Welcome to Entertainment Solutions</p>

<p style="width:40%; float:right; font-size:1.0em; text-align:right; background-color:red; color:white; padding:1px 0 0 0;"><img src="http://www.esctonline.com/new/images/lock.png" alt="Secure Area" style="vertical-align:middle;">&nbsp;<a href="http://clients.esctonline.com" style=" line-height:0.3em;color:white; margin:0 0 3px 6px;">Client Login</a>&nbsp;|&nbsp;<a href="http://photoweb.esctonline.com" style="color:white; padding-bottom:3px; ">Photoweb Login</a></p>
</div> Needs to be refined to elegance, but this works.

[comptech520]

What do you mean by this?

Needs to be refined to elegance

How do I get my background PNG to show transparent instead of grey?
the master is transparent.

[WebJoel]

What do you mean by this?

1) Needs to be refined to elegance

2) How do I get my background PNG to show transparent instead of grey?
the master is transparent. 1) -Needs to have the "inline style" be moved to "internal" CSS, or "external" CSS file. Could be reduced, compacted. Basically, this code is bloat-ugly. "Refine", to improve upon. :) CSS is "presentational" (how it looks) and should be outside of the HTML, which is "content" (the actual 'content' of course). :)

2) To teach IE how to correctly handle *png images, add this *js either internally, or create an external link (external is preferred, esp. if you have several *png images and upon several pages... saves having to re-load this internally on every page-load) :

<!--[if lt IE 7]>
<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters))
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
}
window.attachEvent("onload", correctPNG);
</script>
<![endif]-->