Grrrrr… stupid browser incompatabilities!

Spent a chunk of last night working on a new design for my daughter’s blog and it looks pretty damn cool too. In Internet Explorer at least…

Mozilla, however, chews up the layout and spits it out in one huge slimy mess and I’m not sure why yet, though I suspect it’s something in the style sheet. Dammit.

Click here to see the test page, though you’ll need to use IE to see it as it’s SUPPOSED to look. I’ll see if I can’t figure out what I’m doing wrong according to Mozilla when I get in this evening.

Update: Got home this evening and started messing around with the style sheet using some of the suggestions many of you kindly sent me either in the comments or via email and I think I have figured it out. Chad put me on the right path with his suggestion of adding a clear:both tag to an otherwise empty DIV. That didn’t fix the problem, but clued me in on what Moz wanted. Instead, I added the tag to the #blog ID I’d defined in the style sheet and that did the trick. Suddenly, Mozilla was rendering the page as I had intended. I did tidy things up a little based on some of Chad’s other suggestions as well.

Thanks to him and the rest of you for your tips and suggestions as they were a big help. Courtney likes the new layout and it’s now officially in use at her site.

14 thoughts on “Grrrrr… stupid browser incompatabilities!

  1. Looks nice.  In IE, at least.  I’m surprised—usually it’s IE breaking things, not Mozilla.  Though, I suppose, it could be something you’re coding to IE’s de facto standards that doesn’t match Mozilla’s more accurate (?) interp of the rules.

  2. I vaguely remember something about having to include bgcolor (or point to the bg graphic) inside each TD in order for Mozilla to render the tables accurately.

    Wow!  Now that I took a peek, it appears my site looks like shit in Netscape too; the style sheet’s being ignored completely.  Dammit, I guess I’ll have to buckle down and hand-code some fixes, ugh.  Doing it all day for a paycheck has really taken the excitement out of what was once a pleasurable form of self-expression.  Sheesh! :doh:

  3. it appears my site looks like shit in Netscape too

    Ohmigod. Netscape is the devil.

    It’s such a pain in the ass, I’ve started charging clients extra to guarantee compatibility with Netscape. It takes almost as long to debug Netscape as it does to design a damn site in the first place. Especially with the older Netscapes. And even then I can’t guarantee every bell and whistle will work, but only that the site won’t “fall apart” (look like hammered dog shit) in Netscape.

    If you look at browser stats, it say some miniscule amount of users are still using old Netscapes, like less than 5%. But for some reason, all of those damn users seem to be in MY town. It seems pretty common with Defense Contractors. (And there’s actually a reason for it, I just forget right now what that is.)

    I wish it would just die already.

    I try to design for all platforms and every browser still in moderate use out there. So basically, if I look at a site 8 different ways, I always get 8 distinctively different appearances. At least at first. I can manually adjust for better consistency. But Netscape is by far the biggest pain in my ass.

  4. I don’t promise my sites will work in anything other than the most current versions of IE and Mozilla anymore as just trying to get it to work in these two browsers is pain enough.

    Solonor, I may take you up on your offer if I can’t manage to figure this out on my own. I suspect the problem is in the funky margin settings I’m using to get the right navigation bar to render. I’ve got some ideas to play with once I get home tonight.

  5. I think your problems have to do with your floats and it not being able to determine the height of the block containing the two floats.

    Adding a <div style=“clear:both”>&nbsp</div&gt at the end after the two floated elements will fix it I think. I got no idea why this happens.

    I think you’d be better off removing the align=center div from the html and doing the centering by adding text-align: center to your body (which should center for old browsers) and then text-align: left to your #blog and then changing the margin in #blog to be margin: 0 auto 5px auto; (you already have a width defined for the block so it should center).

    Hope that helps. The Moz version only looks bad because you have a lot of style on #blog, but Moz is sizing that element at size 0 (so you only see the red bottom border on the top line of the screen). It just looks drastic because that has your white background and the background image on it…

  6. My life works in reverse, I guess. I tweaked my blog ‘til I liked it in Mozilla Firefox, then found it broken in IE.

    It has been my experience that IE does not render sites as accurately as Firefox. And (at least on my puny Win98 PC), IE crashes a heck of a lot more than Firefox.

  7. I’m well aware of which of the two browsers is more standards compliant, but that doesn’t change the fact that I need to make sure it works in both.

  8. Um, I dunno what the problem is.  I use firefox, the standalone mozilla, and it looks almost exactly like it does in IE.

  9. Yeah, that would be because I fixed it. Which is what I mentioned in the part that says “update.” It was broke, now it’s fixed.  Yay me!

  10. Sure, Les.  Just thought I’d offer a compatibility report for at least one, older version.

    I really need to upgrade to 1.6, or firefox.

  11. Thanks Dast, didn’t mean to sound snippy. Re-reading it now I’m thinking “Ooo, I was a little tetchy last night!” My apologies.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.