CSS in IE6 help much apreciated.

[fatsober]

Hi all

I've just started with CSS as part of a Masters course. I have a couple of pages up and running but am encountering an issue in IE6. The pages work fine in IE 7 and firefox but for some reason in IE6 my images get dumped to the bottom. They are supposed to sit in the right hand div and slightly overlap the left had edge.

I'm sure there is something simple amiss but I'm going around in circles and would really apreciate some help before I completely mess up the code. A friend posted the question for me on metafilter, I got some replies but the suggestions didnt seem to work out..

Im not sure what the etiquet is here (code or url) so here are the urls:

Thanks if you can help

http://www-users.york.ac.uk/~ga114/
http://www-users.york.ac.uk/~ga114/cricket.html

[drhowarddrfine]

I have been preaching for years, and getting tarred and feathered, about how bad IE6 is as a browser but it is just now that people like you are seeing what I am talking about. Evidence is how the 'improved' IE7 is now displaying more like every other browser while IE6 falls apart.

But I digress.

Check the widths of your containing element compared to the total width of the contained elements. IE tends to throw in a few extra pixels to help screw you up. Even if the total width is supposed to be, say, 800px and everything adds up to 800px, IE will add a few more.

[fatsober]

You are right now I am seeing the evil that is IE 6 I'll check out the widths, it is odd how in various IE's 50% + 50% rarly seems to add up to 100%. Loooks great in 7 and Firefox but most university computers seem to have IE6.

[drhowarddrfine]

Unless your school opts out, IE7 will be pushed with Windows Update in the next couple of weeks.

[SamKL]

Are you thinking it's safe to say IE6 is finally going to phase out?

(I really hope so...)

[drhowarddrfine]

Good question. How many average Joes update their computers when auto update tells them to? How many have auto update on? How many corporations didn't heed Microsofts warnings that their sites might break under IE7 and didn't fix them? So now they won't let their users upgrade. Some people still use IE5.

As sites start making themselves more standards compliant and people notice the sites don't work in IE6, enough will be told to upgrade to IE7, or switch to better browsers like Firefox or Opera, that IE6 will fade. The whole IE thing is such a mess.

[fatsober]

Well I tried playing around with widths.. it will work in ie6 as long as the image does not overlap the div next to it which kind of defeats the object. So do I stick with what I think looks good (and works in 7, ff, opera, etc...) or have somrthing that does not look quite as good but works in all browsers, therein lies the question I suppose.

[darkdirk1]

the solution is to have 2 stylesheets, use javascript to detect the browser then document.write the link to external sheet based on user_agent.....
I typically have a mozStyle.css and an ieStyle.css.......

It's the only solution that will keep you sane.

[skase98]

Could you give an example of the code that gets you there? Is it javascript? I've seen a few multiple stylesheets but the ie.css versions I've viewed all seem to have only two divs, usually something to do with container and body. I'm just baffled by how that actually works.

I'm battling FF vs. IE (sort of like Godzilla vs. Hedora) and think this may be my simplest solution.

Thanks!

Kathy

[darkdirk1]

<SCRIPT LANGUAGE = "JavaScript">
<!-- 
var browser     = '';
var version     = '';
var entrance    = '';
var cond        = '';
// BROWSER?
if (browser == ''){
if (navigator.appName.indexOf('Microsoft') != -1)
browser = 'IE'
else if (navigator.appName.indexOf('Netscape') != -1)
browser = 'Netscape'
else browser = 'IE';
}
if (version == ''){
version= navigator.appVersion;
paren = version.indexOf('(');
whole_version = navigator.appVersion.substring(0,paren-1);
version         = parseInt(whole_version);
}
if (browser == 'IE' && version >= 4) document.write('<'+'link rel="stylesheet" href="iestyle.css" />');
if (browser == 'Netscape' && version >= 2.02) document.write('<'+'link rel="stylesheet" href="mozillastyle.css" />');
// -->
</SCRIPT>