Working with IE

[Ian G]

After having major problems with all sorts of graphical glitches, I am finally breaking down and coding IE compliant CSS for my site. Before I ask, I realize the pat answer that most cross browser support gurus give is that you should make it work in IE first, then code all your snazziness for other browsers later. My question is this: How do you actually do that?

I develop on my mac, I use Coda combined with Firebug for Firefox to develop my sites and now I am trying to check my progress using Bootcamp Win7 with IE tester and the Firebug lite extension for IE.x. Firebug Lite doesn’t seem to give you the on-the-fly changeability that standard Firebug does (no real time change/updates) and the annoying lack of IE support for multiple stylesheets makes it a real pain to see how your changes are going. Throw in multiple versions of IE and it makes you want to climb on top of your desk and throw yourself off.

What is the best way/workflow/tool to wrestle a workable IE compatible stylesheet into existence? Am I looking at something like ::gasp:: Dreamweaver or some other prefab app? Added bonus if you can get it to work with something like CSS3please.com so I can add some semi-compliant CSS3.

[Senff]

I wouldn’t say that making it work in IE first and then check other sites is the right approach. Basically, after doing a number of sites, you kinda know what works and what doesn’t work in the various browsers. I actually work/test in Safari and Firefox, and most of the time my code works fine in IE — still, every now and then (when a big section is done) I check if it’s OK in IE as well, and then make changes if necessary.

I am one of those guys who doesn’t hate IE as much, because I’ve learned over the years what sort of things to avoid. Very basic example: if I have a design that contains rounded corners and I know beforehand that the site needs to be compatible with IE7, I sure as hell won’t use border-radius CSS code. Instead, I use images for that, and then when I check it in IE7, it looks fine. But still, I develop in Safari and Firefox.

It’s just a very basic example of how you should be clear to yourself what road to take, I guess.

And Dreamweaver…..? Um, no. ;)

[dfogge]

i never develop IE first.

i get everything perfect in FF, Chrome, Safari, Opera, mobile browsers etc. After all that i check whats wrong in IE and use conditional classes to target those issues.

see: http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

[Ian G]

I am one of those guys who doesn’t hate IE as much, because I’ve learned over the years what sort of things to avoid. Very basic example: if I have a design that contains rounded corners and I know beforehand that the site needs to be compatible with IE7, I sure as hell won’t use border-radius CSS code. Instead, I use images for that, and then when I check it in IE7, it looks fine. But still, I develop in Safari and Firefox.

So that’s the rub; I’d like to play with some of the more innovative/easier aspects of CSS3 coding and still have the site degrade nicely to some degree across versions of IE, but it seems next to impossible to really get a sense of what each tweak looks like step-by-step without the awesomeness of full Firebug compatibility. I should add that I build for a CMS (Drupal) so I have to deal with a swarm of CSS stylesheets and thus optimization to get IE to work, so each change I make means I have to rebuild the optimized version stored in cache before IE recognizes the differences.

The site giving problems has a rounded corner, gradient background design. I was using images and an IE only stylesheet, but I was running into pixel-perfect alignment problems across all versions and the gradient needed to have the ability to be flexible in length- creating some headaches for image centered solutions. Originally I just dropped the fancy-pants stuff and went with plain design, but when I saw that CSS3please gave some degradable solutions, I thought I’d give it a try. No luck, multi-IE was still kicking me in the junk and laughing. Even if I went without CSS3 via CSS3please, my image alignment work would be a nightmare without on-the-fly viewing of changes in each version of IE. I would fix one thing only to have it move out of place in another version, with every pixel move requiring a rebuild of the cached CSS stylesheet.

If you have to create cross version IE stylesheets, how do you view micro-adjustments in a useful way in IE?

[dfogge]

“I would fix one thing only to have it move out of place in another version”

hence: conditional classes

see the link above for details. you can target multiple versions of ie differently within the same style sheet by applying ie6, ie7, ie8, etc as a class to body using ie conditional statements.

[Ian G]

Thanks dfogge, I know about conditional stylesheets and classes, but my problem is more about the actual live editing and positioning ability you get from Firebug that you don’t seem to have an equivalent for in IE.

Say for example I throw in a image with 10px padding. I look at it in Firefox and see I need to move it more, Firebug lets me move it incrementally to say 12px 10px. I update my stylesheet to reflect that change, then look at it in IE7 and see that it’s off there too. I create a conditional stylesheet for IE changes, then target that item for change, but I have no way to preview the change other than to try a variable, save, clear caches, then view in IE. Very tedious, especially when going across all the versions of IE. Multiply that for multiple changes and tweaks and you can see why I thought it might be worth it to ask if anyone had any shortcuts. What do people do when they need to code for IE?

PS: That article you linked was helpful as well because it had a more in depth discussion of IE hacks than the “just do this” stuff I’ve seen elsewhere.

[Senff]

Although it’s not as powerful as Firebug, IE has a debug thingie too. If you have IE8 or IE9, hit F12 and there it is. With it, you can also make your IE behave like it’s IE7 or IE8.

It takes a little time to get used to (especially when you’re so used to Firebug) but once you get the basics, it can be very helpful.

[Ian G]

Thanks for the help guys, I’ll work with what I have and get this under control!

[Ian G]

Yeah, I’ve turned into a bit of a Chrome Puff now too, can’t fully wean myself off Firebug but I agree the update nightmare is a big turnoff for FF.

To further solve my multi-css, multi-cache clearing problem, I think I’ll make a temp single CSS stylesheet to get around IE lack of support for multiple stylesheets, then I’ll be able to just tweak->save->refresh like normal. Optimization is nice for production, but it’s a real pain for IE development.

I guess this can be marked solved

[dfogge]

oh sorry Ian, i guess i misread you.

i never really design/code in IE the way I do in FF and Chrome. i just debug IE. as far as i know there’s no live editing tools for IE unless you count firebug lite (which is a little janky compared to the real thing).

i personally use browserstack to fix problems in IE. I also use it to test for FF 3.6, old versions of Safari and Opera. its such a time saver compared to the old methods i used to have to employ to test for old/obscure browsers, being a mac user.

[Author]

Posts