Forum Moderators: not2easy
I'm developing a site at <snip> and I am having an issue with IE6. Anyway, the tabs along the top below the header are causing a slight spacing issue. Also, those tabs are supposed to register as being opaque, but I understand IE6 doesn't care. I have a JS running a PNG fix, perhaps it is not working correctly. Last but not least the footer just isn't displaying correctly. The footer image is larger as you can see in Firefox 3 & IE7.
IE6 Issues:
*Header/Tabs spacing
*Tabs opaque
*Footer
If anyone can shed some light on any of my CSS issues, it would be greatly appreciated. Thanks a bunch guys.
- Chad Wittman
[edited by: swa66 at 9:11 am (utc) on Oct. 23, 2008]
[edit reason] No personal URLs, please see forum charter [/edit]
IE6 often is the unwilling one out there, I guess we all feel the pain you're in.
The spacing issue may be something to do with an ie bug where if you have an element floating left and you give it a left margin of say 20px, ie6 will double the margin. the fix for this is to put display inline as the last thing in the class. eg
.tab {
float:left;
margin-left:20px;
display:inline;
}
weird fix but it should work
as for the footer image i think we would need to look at your relevant css and html like swa66 says
Second, I think that I found out the issue with the footer. It seems that IE6 doesn't recognize the height of the header. What I found is that when I do something like:
<html>
<head>
<title>Document Title</title>
<style type="text/css">
body {
padding: 0;
margin-top: 10px;
width: 100%;
height: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
text-align: center;
line-height: 1.2em;
color: #333333;
background: #D8C981 url(images/main.bg.png) repeat-x top;
}
#footer {
padding: 0px;
margin: 0;
clear: both;
text-align: center;
background: url(http://www.example.com/footer.png) repeat-x;
}
</style>
</head>
<body>
<div id="footer" class="clear-block">
<br>Hello World<br><br>
</div>
</body>
</html>
[edited by: swa66 at 12:05 am (utc) on Oct. 24, 2008]
[edit reason] URL in code examplified [/edit]
Header Spacing:
Seems that the header image was a few pixels too tall, therefore pushing the tabs down creating some white space on IE6. My solution was to decrease the height of the image.
Footer:
IE6 didn't know what height I wanted the footer at, so I specified the height. This allowed the image to be displayed properly, but the spacing wasn't right. I added some padding to my #footer in ie6.css which seemed to have resolved the issue.
Tabs/Transperancy:
Trying to figure this one out. BadBoyMcCoy suggested I double check my filepaths on the PNGfix. I'm not actually too sure where to double check these files, but here's the code if you could give me a quick look.
(function(jQuery) {
jQuery.fn.pngFix = function() {
var ie55 = (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf("MSIE 5.5") != -1);
var ie6 = (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf("MSIE 6.0") != -1);
if (jQuery.browser.msie && (ie55 ¦¦ ie6)) {
jQuery(this).find("img[@src$=.png]").each(function() {
var prevStyle = '';
var strNewHTML = '';
var imgId = (jQuery(this).attr('id')) ? 'id="' + jQuery(this).attr('id') + '" ' : '';
var imgClass = (jQuery(this).attr('class')) ? 'class="' + jQuery(this).attr('class') + '" ' : '';
var imgTitle = (jQuery(this).attr('title')) ? 'title="' + jQuery(this).attr('title') + '" ' : '';
var imgAlt = (jQuery(this).attr('alt')) ? 'alt="' + jQuery(this).attr('alt') + '" ' : '';
var imgAlign = (jQuery(this).attr('align')) ? 'float:' + jQuery(this).attr('align') + ';' : '';
var imgHand = (jQuery(this).parent().attr('href')) ? 'cursor:hand;' : '';
if (this.style.border) {
prevStyle += 'border:'+this.style.border+';';
this.style.border = '';
}
if (this.style.padding) {
prevStyle += 'padding:'+this.style.padding+';';
this.style.padding = '';
}
if (this.style.margin) {
prevStyle += 'margin:'+this.style.margin+';';
this.style.margin = '';
}
var imgStyle = (this.style.cssText);
strNewHTML += '<span '+imgId+imgClass+imgTitle+imgAlt;
strNewHTML += 'style="position:relative; white-space:pre-line; display:inline-block; background:transparent;'+imgAlign+imgHand;
strNewHTML += 'width:' + jQuery(this).width() + 'px;' + 'height:' + jQuery(this).height() + 'px;';
strNewHTML += 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader' + '(src=\'' + jQuery(this).attr('src') + '\', sizingMethod=\'scale\');';
strNewHTML += imgStyle+'"></span>';
if (prevStyle != ''){
strNewHTML = '<span style="position:relative; display:inline-block;'+prevStyle+imgHand+'width:' + jQuery(this).width() + 'px;' + 'height:' + jQuery(this).height() + 'px;'+'">' + strNewHTML + '</span>';
}
jQuery(this).hide();
jQuery(this).after(strNewHTML);
});
}
};
})(jQuery);
Any thoughts? And thanks again for helping me figure out my problems.
[edited by: CWitt at 12:45 am (utc) on Oct. 24, 2008]
[edited by: SuzyUK at 11:15 pm (utc) on Oct. 24, 2008]
[edit reason] fixing horizontal scroll [/edit]
I try to use IE7.js (it fixes much more than just this), but it's got problems of its own as well.
Kind of a messy hack, but it seems to work well.
