Hey, I'm having some difficulty with CSS and IE6 compatibility.
URL: http://bit.ly/dlX7cS
Problem #1: I put a background image on the fieldset around Canada and United States. In IE6 and IE7, the background bleeds above the border-top of the fieldset.
So, I found a fix. It is applied only to IE browsers, and moves the legend up a few pixels, aligning the background correctly.
<!-- Fix: IE6/IE7, Legends -->
<!--[if lte IE 7]>
<style type="text/css">
fieldset {
position: relative;
}
fieldset legend {
position: absolute;
top: -0.5em;
left: 0;
}
</style>
<![endif]-->
This fixes IE7. But in IE6, it seems to make my legend for Canada vanish completely. Does anyone have a copy of IE6 they can open my site and tell me if you see Canada label. (I am testing with a multi-IE program, and it keeps crashing. My copy might not be accurate).
If it's not there, any suggestions on how to fix it?
Also, any suggestion on where I can download working copy of IE6?
Problem #2: I have a Google Map embedded using iframe. The width of that iframe is 515px. In Firefox, Chrome, IE7 -- that is the correct alignment. But in IE6, it gets <br/> underneath the Just Energy paragraph beside it. It doesn't fit. I have to change width to 513px for it to fit. Uhm, anyone know where those 2px of difference happen? I removed border, padding, margin from the iframe, but still something is happening.
<!-- Google Maps -->
<iframe class="gmap" src="http://maps.google.com/maps/ms?hl=en&ie=UTF8&msa=0&msid=100146512697135839835.000481e2a2779e8865863&ll=42,-100&spn=20,80&output=embed" frameborder="0" marginheight="0" marginwidth="0" scrolling="no"></iframe>
<!-- / Google Maps -->
Er, big headache. lol
