IE6 strikes again - Need Help ASAP!

[rebelbwb]

http://www.tradingpins-on-sale.com/test.php

In IE6 I am showing small approx. 10px gaps above and below where a jquery app is running (horizontal slider).

Also, my active link tabs do not show the appropriate background image which should be black with white font. If you look at this link in other browsers you will see how it is supposed to behave.

This site is supposed to launch soon but for these two issues. Any help you can provide in resolving is much appreciated.

Both the HTML and CSS aren't far from being valid except missing alt tags and ampersands and other things which don't appear to affect it structurally.

Thanks

[jscheuer1]

You shouldn't set a height for the header. And you should get rid of the line break in the source code here:

<div id="header">

<img src="images/header.jpg" width="859" height="103" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="140,16,741,62" href="#" /></map></div>

Changing it to:

<div id="header">

<img src="images/header.jpg" width="859" height="103" border="0" usemap="#Map" /><map name="Map" id="Map"><area shape="rect" coords="140,16,741,62" href="#" /></map></div>

Set this style:

#topContainer {
 font-size: 1px;
}

Those together will kill the gaps in IE 6, and improve things also in FF, GC, and Opera.

Your:

<!--[if lt IE 7]>
	<script type="text/javascript" src="unitpngfix.js"></script>
<![endif]-->

is what's screwing up the menu images in IE 6. Find a way for it not to apply to the menu's images, they look fine without it, perhaps switch to gif for those. Or you could use this script instead of your current unitpngfix.js script:

var clear="images/clear.gif" //path to clear.gif

pngfix=function(){var els=document.getElementsByTagName('*');
var ip=/\.png/i;
var elb2, goodtogo = true;
var i=els.length;
while(i-- >0){var el=els[i];
var es=el.style;
if(el.src&&el.src.match(ip)&&!es.filter){es.height=el.height;
es.width=el.width;
es.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+el.src+"',sizingMethod='crop')";
el.src=clear;
}else{var elb=el.currentStyle.backgroundImage;
if(elb.match(ip)){
elb2 = el;
while (elb2.parentNode){
elb2 = elb2.parentNode;
if (elb2.id == 'menu')
goodtogo = false;
}
if (goodtogo){
var path=elb.split('"');
var rep=(el.currentStyle.backgroundRepeat=='no-repeat')?'crop':'scale';
es.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+path[1]+"',sizingMethod='"+rep+"')";
es.height=el.clientHeight+'px';
es.backgroundImage='none';
var elkids=el.getElementsByTagName('*');
if (elkids){var j=elkids.length;
if(el.currentStyle.position!="absolute")es.position='static';
while (j-- >0)if(!elkids[j].style.position)elkids[j].style.position="relative";
}}goodtogo = true}}}}
window.attachEvent('onload',pngfix);

But gif would probably be best, you would not lose much, ex:



and using conditional style, as you already do with your ie6.css stylesheet, you could set these gif images as the background images for the menu in IE 6 only.

[skydog]

Thanks jscheuer1 for the reply - implemented all that and am good to go on all fronts.

Can you explain the #topContainer scenario where adding in font-size: 1px helps with that?

Again, I greatly appreciate that. Everything else I can just about wrap my brain around.

Thanks

[jscheuer1]

The font size bit is to overcome a quirk of IE 6 that assumes that even an empty element must be at least as high as the height of 1 character.

[skydog]

gotcha - thanks for taking time out to explain