post

CSS, IE, and conditional comments
CSS, IE, and conditional comments

I’ll start off by saying I despise Internet Explorer—all versions. I mentioned my desire for a fresh site, and so over the last couple of days (mainly the weekend) that’s what I’ve working on. I only have a few more hours left, mostly on admin-ish type features (as of now, I have no way to post, edit, delete anything). I’ll save the details for the “grand opening” post.

But I do want to express my frustrations with building the layout. First, CSS is amazing; second, IE is not. I know I could ignore IE, since hardly anybody I know uses it, but it’s tough for me to accept my site not working in certain browsers. It’s an unfortunate disease.

I’ve decided on a 3-column layout (my first ever). I wanted the side columns at a static width, while the center column (the content) was liquefied. Despite what you may think, that’s not the easiest cross-browser layout to achieve—for me, anyway. So I decided on 1 of the 10,000 ways this could be done. Everything was going as I expected it to (in Firefox). Those expectations also included the layout not working in IE6. And of course, it didn’t.

So I started writing some * html hacks, and got everything aligned to match Firefox. I finished it up, pulled in some real data, and everything looked good. I was satisfied. Then I thought, “well, I had better check IE7,” just to be sure. Lo and behold, the left column was missing entirely. I was livid. Here we go again.

I stripped out all of the * html crap and made separate CSS files: a default, one for IE6 hacks, and now, one for IE7 hacks. So currently, I’m using conditional comments to load separate style sheets. What an ugly pain. The thing that bothered me the most is how IE6 was closer to being correct than IE7. For IE6, I really only had to adjust the left hand column width a bit (and a few other things, of course), but at least I could see the column. For IE7, I had to entirely change the positioning. Once I found it and brought it back, it wouldn’t re-adjust with the fluidness of the center column; it would either gap or overlay it, which was hideous.

Based on what I know about CSS, Firefox did exactly what I expected. Both IE’s did not. Granted, my CSS may not have been ideal or I should have done it a different way, IE has done nothing in the past that would let me believe it was my fault. I expected more out of IE7, not less.

In closing, here’s the status. I’ve approved the layout in the following environments:

  • Windows: Firefox, Flock, IE6, IE7
  • Mac: Safari, Firefox, Flock

And all is well, finally. I didn’t bother with IE on a Mac, because I figured anyone with a Mac is NOT using IE. And if they are, they’re not interested in my site :-) And now I have class tonight and tomorrow night, so that will more than likely delay progress for two more days. Blah. I’ll keep you posted.

Comments
01
09 Apr 2007 11:37 AM

So, a new design is on the way… are you going to rebuild the whole site before putting it up?

02
09 Apr 2007 12:11 PM

Sounds like what I’m going through with my senior design project. Everything is fine in FF/Safari/Opera—but IE renders it totally wrong. So, that’s got to be fixed before the design fair.

I’m looking forward to seeing the new site!

03
09 Apr 2007 12:32 PM

Chris – Well, yes and no. I started a new application, but it’s essentially the same, just stripped down. There was so much I didn’t like about how the other site was built, I didn’t want to sift through it and fix it. It wasn’t worth my time. But I’m porting over the pieces I do want and rewriting them with the latest and greatest Ruby code I’m able to write, if that makes sense. Basically, refactoring, but using a new application as the end result.

I don’t think I could have made it near as far if I were spending time fixing the current site. The design is totally done, and I’ve done my best to incorporate all I’ve learned in the last few months. So we’ll see.

I do have a question, though. I use helpers like nobody’s business. Sometimes, I feel like I’m going overboard with them, but I love looking at a view that has stuff like:

tag_list_for post

Rather than…

post.tags.collect {|t| link_to t.name, posts_by_tag_url(:tag => t.name)}.to_sentence

I write helpers to clean up the views, even if it’s only used in one place. I don’t know if you can reach a point where you should stop extracting that stuff. Basically, I have two questions:

  1. Can you write too many helpers?
  2. I find that I load up application_helper.rb the most, should I be making a larger effort to write helpers specifically for that piece of MVC (i.e. views in “posts” get helpers from “posts_helper.rb”)?
04
09 Apr 2007 12:39 PM

Nick – fixing stuff after the fact is terrible. If I’m going to go cross-browser, I decide that in the beginning, then each new thing I add, I try to get right in all browsers. Going back at the end is a nightmare, so hopefully you’re not too far into the design where you have to change major pieces, causing you to redo work you’ve already done.

That’s what pissed me off about IE7. I guess it was my fault for not checking all along, but I just assumed it could handle it better than it did. As they say (in Under Siege 2, anyway):

“Assumption is the mother of all _ _ _ _ – _ _ ’s!”

05
09 Apr 2007 12:57 PM

I don’t think there’s really a problem with too many helpers. I would try to organize them a bit, though. I would move post related items into posts_helper.rb in your example.

Note that the next version of Rails will encourage this even more because there will be a new :all parameter to the helper method: helper :all which will load all available helpers. Even better, it’s going to be the default, so you don’t even need to write helper :all.

Try to keep the global helpers in application_helper.

06
09 Apr 2007 01:26 PM

Nice, I didn’t know about that :all parameter.

For the most part, I don’t think I’m too bad at staying organized, but if it’s questionable, I sometimes won’t hesitate to put it in application_helper. I actually have that tag_list_for helper, and it actually is in posts_helper. But in the event of coming up with a quick example, I chose that one.

07
09 Apr 2007 03:38 PM

IE, all versions, is the the well-documented bane of the CSS Layout designer: I have struggled with it many a time, so I feel you pain mate. Glad to see your hard work has paid off though.

Can’t wait to see it!




Please rewrite the image text in the SPAM field: Spam Protection

Preview

2008 by Ryan Heath | Get In Touch

flickr

DesolateInfinityLooking upDazedBlurred