Help! IE6 problems! AAAaarrrrggghhhhh!

[nekokami]

If anyone who knows a bit about cross-browser style sheets and has a few sanity points to spare could help, I'm offering a pile of karma and you can have the next Ministry of Silliness t-shirt dedicated to you.

My problem: on IE6, the pages of the site I am responsible for look crappy. (Big surprise.) However, there are still enough people using IE6 (especially here at the university) that I have to fix it, DESPITE the fact that there's supposed to be a complete site redesign "soon." (They've been saying that for over a year, now, so I think I need to just fix this.)

The main site is here: http://wsbe.unh.edu/
A good example of a problematic page is here: http://wsbe.unh.edu/graduate-programs

The content all gets shoved down below the sidebars.

All looks fine on FF (several versions) and IE7, of course.

I have Firebug and Xray on Firefox and these let me see where the CSS is going astray on that browser. Is there something equivalent for IE6? Can anyone take a look and make a suggestion? A wild-a** guess?

I HATE IE6!!!

[zelda_pinwheel]

ooh neko, i feel your pain. ie6 is the devil.

when i absolutely have to code for ie6, i use conditional comments in the css to create special rules for different browsers. then in the html, i add a wrapper and an extra ie6 conditional div like this :

at the start of the body :

<!--conditional div for IE 6 and older--> 
<!--[if lte IE 6]>  
<div id="ie6anddown">  
<![endif]-->

and at the very end of the body :

<!--END conditional div for IE only--> 
<!--[if IE]>  
</div>  
<![endif]-->

then in the css, you create rules for non-ie6 by specifying :

non ie6

body>#wrapper .nav

ie6

#ie6anddown .nav

this allows you to define the behavior of the site depending on which browser is displaying it.

i'll try to take a closer look later but i'm about to go out now.

[zelda_pinwheel]

oh, also, using the conditional divs you can specify behavior for several different browsers, just add an extra opening conditional div for each one. but at the end, you only need to add the closing tag once, because the browser doesn't see any of the opening div tags that don't concern it.

[zelda_pinwheel]

based on your description the problem is probably coming from the broken box model used by ie6, that is, it will add the size of the padding to the size of the element (which it shouldn't do, since the padding is INSIDE the blasted element), and then of course if it's supposed to add up to, say, 100% it turns out to be 100% + whatever padding there is, and obviously a window cannot display a page which is 120% wide. try reducing the total width of your columns with conditional css rules to make them all fit.

[nekokami]

Ok. I think I have it fixed. Even on the teeny screen I use for IE6 testing purposes.

Thanks for the help!

[zelda_pinwheel]

i'm glad you figured it out !! let me know if you have any more troubles.


(and also : death to ie6 !!!!)

[JSWolf]

Originally Posted by zelda_pinwheel

i'm glad you figured it out !! let me know if you have any more troubles.


(and also : death to ie6 !!!!)

And IE7 and IE8 and any other version of IE MS dares to come up with.

[nekokami]

Now my users are complaining that on larger screens the edge of some of their content gets clipped, and anyway there's too much whitespace.

I'm trying a hack that looks like this:

#ie6anddown #mainContent{
width: expression(document.body.clientWidth < 600? "560px" : "auto");
}

But IE doesn't seem to want to recognize that the window is small. I set the "less than" value to 1200 and it still wouldn't use the width reduction. It just defaults to "auto" near as I can tell.

Have I mentioned that I hate IE?

[zelda_pinwheel]

hm... ie6 might not like that calculation. i don't know what to tell you... maybe don't specify the width at all on the content in ie6 ? try that to see what happens.

[nekokami]

Originally Posted by zelda_pinwheel

hm... ie6 might not like that calculation. i don't know what to tell you... maybe don't specify the width at all on the content in ie6 ? try that to see what happens.

That's where I started from. It goes to "auto" and gets shoved down below the sidebar columns. I shouldn't be setting width anywhere except in the sidebars. When I look in Firebug, I don't see any width set in the mainContent div.

The hack came from here: http://www.cameronmoll.com/archives/000892.html

I found similar hacks all over the place.

[nekokami]

Ok, I seem to have gotten it, by setting the comparison value above to 1300. Now to see if it works on someone else's larger screen....

[zelda_pinwheel]

hm.

hm hm hm.

have you tried setting a fixed width to see what happens "width : 560px;") ? or not specifying the "width" value at all (comment out the entire line) ? try just to see what happens.

[zelda_pinwheel]

ah, just saw your latest post. glad it finally worked, although it seems pretty ridiculous you'd have to go all the way to 1300 to make it click...

(i hate ie too. have i mentioned that (today) ?)

[nekokami]

I tweaked it and got it down to 1005. There's a gap if you try to widen the screen where it pushes down to the bottom again, then it comes back and looks fine. That's the best I can do for now.

Thanks again for your help!

[Wetdogeared]

Originally Posted by zelda_pinwheel

ah, just saw your latest post. glad it finally worked, although it seems pretty ridiculous you'd have to go all the way to 1300 to make it click...

(i hate ie too. have i mentioned that (today) ?)

I think you've mentioned it a few times in the past.

WDE.