November 19, 200916 yr Hello, Need some help with a website that has some minor but annoying bugs in IE 6... Here is the link to the page: http://www.sylvanvalleyarabians.com/temp/index.html And here is the css file: http://www.sylvanvalleyarabians.com/temp/sva.css I have been checking it out in Adobe Browserlab and in IE 6 I have two problems: 1. The page content (ie filler text) is nowhere to be seen, when the text in the #content div is less than the height of the #nav div. There's an easy fix for this with some extra <p> tags if a page's content is short, but I'm wondering if anyone knows any other fixes? 2. The background image from the #content div extends down past the lacy graphic at the bottom of the page. It's not supposed to be behind that graphic. I can't figure out where, exactly, this is coming from... Any suggestions more than welcome! Thank you! Christy
November 19, 200916 yr Hi, IE6 is great isn't it? The best way i find around IE6 problems is to create an IE specific CSS file. Add this to the <head> of the document: <!--[if IE6]> <link rel="stylesheet" type="text/css" href="ieonly.css" /> <![endif]--> hope this helps cheers Tony
November 19, 200916 yr This image http://www.sylvanvalleyarabians.com/temp/images/content-bottom.png is a png with a transparent background that IE6 can't process, so you see it. Google or search this forum for a javascript png fix for IE6. Edit: I tested IE6 some more and IE6 IS using the transparency for content-bottom.png; I edited the background-color of #content to pink and the lacy background image content-bottom.png showed a pink background even though #lace2 is outside the #content div. I really don't understand why #lace2 div is taking the background from #content as the div closing tags are all in the correct places. If I give #content a height to stop it before the #lace2 div, the lacy image shows transparency from the body background. A mystery in IE6. Your item 1 wasn't a problem in IE6, I deleted the large paragraph in the content div but it's purple background still went down to the footer.
November 19, 200916 yr Hi Christy, Something i learned the other day is that although IE6 cannot display PNG24 images it can display PNG8 images. Alternatively create a javascript file with the following and call it something like pngfix.js: 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 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 } } } refer to the file in the <head>: <!--[if IE]> <script defer type="text/javascript" src="pngfix.js"></script> <![endif]--> Be aware that this will not work if the PNG is a background image of a div only if embeded. Hope this is helpful Cheers Tony
Create an account or sign in to comment