IE6 CSS recommendations

[Duncan Rounding]

I'm having some problems getting a new CSS layout to work properly in IE6 (FF, Opera, Netscape and IE7 are all fine).

There's so much conflicting information out there - Can anyone recommend where I can find good useable examples about the 'hacks' required relating to IE6?

(I think I should've stuck with good ol' tables!)

[leehack]

Duncan, what are the problems you are experiencing? If i know what the main problems are i may be able to point you to a direct tutorial rather than just flood a page with links.

I'll hazard a guess and say it's inherited margins or a 3 pixel jog.

Maybe a good idea to validate your CSS also, this can often highlight problems.

[fleetwood]

Welcome to the 'I can't believe IE just did that to my css' club Duncan - we'll banish them tables if it kills us (and boy it may just do that )

I'm riding that steep learning curve with you

[leehack]

When there is a transition from one way to another, there is always these kind of problems. The old way is not trendy anymore and is not "correct coding" and the new way is just not transparent or standard enough.

Like most things in life, it is usually the middle ground that is the best place to be during transition and for me i think using tables and CSS together is a good combo at the moment. Tables are great for layout and familiarity and to have everything moving together, CSS is great for the power of styling and the global changes that can be made quickly. Merge the two and you have the best combo for the time being IMO and the best cross browser compatability.

Long established designers swear by tables, new designers swear by CSS and established designers use both and apply the choice according to the situation. I remember 3 years ago styling some text to be grey, yet the bullet points remained black, this was my first venture into CSS styling. On first looking into it, i was horrified, however with time and patience and many f@@k ups, something clicks oneday and you appreciate what you can do with CSS. I love CSS and i love tables and i think they will both be around, either being hacked or being used incorrectly, for many many years to come.

[Mark H]

Duncan - see if my reply to another thread helps:

http://community.actinic.com/showthread.php?t=26876

This could be modified to serve separate CSS sheets to IE up to v6, and all others including IEv7. The sheet served to IE6 only needs to contain the style(s) that are causing the problems. This is better than IE6 hacks, some of which now cause problems with other (later) browsers.

[Duncan Rounding]

Thanks Mark - that's certainly an alternative that I might take up.

I put the layout aside for a couple of days (to get my sanity back - not that it worked!) and might give it another this evening when it's quieter.

[pinbrook]

Martin sorted my latest IE6 drama

He's the man for the job!! Jont beware

[fleetwood]

He's the man for the job!! Jont beware

I think you caught me on a lucky brainwave day Jo - don't think Jont has anything to fear just yet

Can anyone recommend where I can find good useable examples about the 'hacks' required relating to IE6?

Duncan - if there is something specific, please post away, but most of what I have found out comes from good old Googling - css three column layout, css column widths etc

Don't be suckered into a false sense of easiness though - most of the claims of 'the definitive answer is this' just aren't true - as soon as you hack/fix one bit, something else goes awry. Its fun though, isn't it?!?!!?

The cause of most grief appears to be margins and padding.
Best not to assume anything - if in doubt, clear both back to zero on pretty much everything, and then specify exactly the settings you want.

Grief two (common to most things) - good old typos - watch out for missing ; at the end of style lines, {} at start/end styles; incorrect size definitions 10x instead of 10px etc

[Duncan Rounding]

Update:

Well, after giving it a break for a day and adding the 'clear all' mentioned elsewhere in a related thread ( * { padding: ....) I finally found the problem - ridiculously easy - two contained divs were set to be larger than their parent! How I could've missed that I don't know - won't next time!

Interesting that it didn't break in IE7 though.

[completerookie]

I tend to play in firefox and have installed a great add-on for web developers - I can play with styles in realtime, see nested tables, divs, - you name it - wouldn't be without it - beets the hell out of re-compiling the pages just to see if a "tweak" will work