Help – IE lost Navigation

@WebJoelJul 10.2007 — #It's the background-image gradient, isn't it? IE doesn't handle *png 's "alpha transparency", so you instead get this sweet baby-blue color instead.

Add this [I][U]before[/U][/I] the closing "</head>" exactly as shown below:

[CODE]<!--[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]-->[/CODE]

This is an [I]IE-conditional[/I] and it teachs IE how to handle *png (if that is the problem... which is the only difference that I can see between DFx and IE is the burgundy-gradient background image is missing in IE)

checked:

#nav_main {

background-color: #580000;

background-image: url(images/nav_bkgrd_grfk3.[B]png[/B]);

background-repeat: repeat-x;

font-weight: bold;

font-size:12px;

margin:auto;

width: auto;

}[/QUOTE]

Also, -can reduce the code alot. Example here:

#nav_main {

background:#580000 url(images/nav_bkgrd_grfk3.png) repeat-x;

font:12px bold;

margin:auto;

width: auto;

}[/QUOTE] Possibly even more. Little things, like "bold" can be reduced to "600". "font-weights" can be written as digits in increments of 100 (100, 200, 300, etc., can't do halvies like "550") with "600" being the virtual start of "bold".

"700" or "800" might be cosidered "font-weight:[B]bolder[/B];".

This only saves a few bits, but applied consistantly, the KB-savings do add up. ?

Help – IE lost Navigation

2 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Help – IE lost Navigation

2 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

2 Comments(s) _↴

Also in #CSS _↴