Grow your CSS skills. Land your dream job.

Noob needs help battling IE

  • # January 14, 2009 at 3:39 am

    Every site I build looks like a train wreck in IE :twisted: .

    Is there some kind of list of things not to do or fixes I can place into my code?

    IE :twisted: is killing SOOOO much of my time, I don’t know how to fix all the problems.

    Thanks

    Rob
    # January 14, 2009 at 4:55 am

    the only advice I can give without seeing anything is make your code better.

    IE7 isnt too bad to work around, you can pretty much make it all work without hacks – IE6 is something else though.

    There are many solutions

    But the first and main solution is make sure you code is accurate. If you are using margin or padding to position your block elements (like divs) then that is going to cause you problems cross browser. Making sure you attach a unit of measure to the end of your defined numers (height:100px for example) and that kind of thing.

    Do you have any problems specifically?

    # January 21, 2009 at 5:07 pm

    It’s hard to recommend fixes without knowing what problems you’re actually having…

    That said, as a general recommendation, make sure your code is valid. If it is, then when you encounter an issue in IE you can be sure it’s because of IE itself, and not something wrong with your code.

    In my experience, IE6/7 has its own set of problems, while Firefox, Safari, and basically every other browser out there renders things exactly the same almost 100% of the time. So, I code for Firefox/Safari first, then go back and fix whatever issues come up with IE. It’s much easier to do that than to code for IE first (which often relies on doing a lot of wonky/non-standard/invalid stuff) and then try to get the other browsers to play along.

    When you do this, I also recommend splitting all your IE stuff off into a separate stylesheet:

    Code:

    The ie6.css stylesheet will only load for IE6. It’s a good way to make sure your IE6 fixes don’t affect what the other browsers do. You can do the same for IE7 and IE8.

    # January 21, 2009 at 7:15 pm

    Whilst developing my current site I managed to make it look different in every browser that I tested it in. IE 6,7,8 & FF. After trawling through my CSS code it was because I should of been using padding instead of margin. That alone fixed the issues that I had. I should mention that I’m using floats to layout my website.

    My personal tips:

    Try using a doc type that gets your browser into standards or near standards compliance mode.

    These two are my favourites:

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    This website was quite helpful for me: http://www.positioniseverything.net/explorer.html

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".