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]-->