Internet Explorer Issues

Discussion in 'Web Design and Development' started by justinm, Nov 8, 2008.

  1. justinm macrumors member

    Joined:
    Aug 15, 2007
    Location:
    Orlando FL
    #1
    Hey Guys-

    Ok, here is my problem. If you go a website I am making for a friend, (http://digitalcommscorp.com ) in Safari, Firefox, or Opera, there are no issues. But if you try Internet Explorer some things are misaligned. The biggest problem is the body is shifted over to the right. I can't seem to figure this out. If you want me to post any files just let me know.

    Thanks a ton,

    Justin
     
  2. rogersmj macrumors 68020

    rogersmj

    Joined:
    Sep 10, 2006
    Location:
    Indianapolis, IN
    #2
    Welcome to the biggest nightmare in web design ;)

    The other browsers you mentioned all follow the CSS spec with somewhere around 90% consistency, whereas IE is only in the 50% range. The most common problems are typically with margins on floated elements, but there's tons of documented bugs. Try to isolate your problem down to one specific element (use an add-on that helps you inspect specific HTML elements or just start putting border: 1px solid red; on things until you find the problem), and then google for the issue you're seeing. For example, searching for "IE margin bug" gives you a ton of info about margin bugs if what you're seeing in IE is a margin different from the other browsers.

    I don't have access to IE on all my machines, and I imagine not everyone here does. It might help if you can post screenshots.
     
  3. justinm thread starter macrumors member

    Joined:
    Aug 15, 2007
    Location:
    Orlando FL
    #3
    Here are some screenshots. The top picture is the good site, and the bottom is in Internet Explorer.

    Thanks!
     

    Attached Files:

  4. fxstb2002 macrumors member

    Joined:
    Apr 22, 2008
    #4
    I would think that the easiest thing to fix this would be to put it all in a wrapper.
     
  5. justinm thread starter macrumors member

    Joined:
    Aug 15, 2007
    Location:
    Orlando FL
    #5
    Sorry if this a dumb question but, how would I go about doing that?
     
  6. rogersmj macrumors 68020

    rogersmj

    Joined:
    Sep 10, 2006
    Location:
    Indianapolis, IN
    #6
    You would put a div around all the content, and then set the width and margin on that. Everything else inside it -- the nav, the main graphic, the content area -- wouldn't each need to be positioned then. For example,

    HTML:
    <div id="wrapper">
    ...all your stuff...
    </div>
    Then in the CSS...

    Code:
    #wrapper {
      width: 960px;
      margin: 10px auto;
    }
    This will give you a container that's 960px wide, with a 10px margin on the top and bottom and auto margins on the left and right (which will center it on the page). Adjust the numbers as you see fit.

    EDIT: I should also mention that the "good" screenshot you posted looks like it has some width consistency issues as well.
     
  7. TheReef macrumors 68000

    TheReef

    Joined:
    Sep 30, 2007
    Location:
    NSW, Australia.
    #7
    That thread titles sends shivers down my spine.
    One day… I will get around to making my sites IE friendly.
    In the back of my mind I think that one day, IE 8 will be commonplace and I won't need to worry.
    </end dream>

    It's a pain.

    You could manually put IE correcting code in your CSS file (that only targets IE), might take a while.
    Does anyone know of any smart tools what will look at a CSS file and automatically insert IE correcting styles?
     
  8. wheelhot macrumors 68000

    Joined:
    Nov 23, 2007
    #8
    Say thanks to Ballmer, besides IE is "standard compliant"

     
  9. fxstb2002 macrumors member

    Joined:
    Apr 22, 2008
    #9
    I would say if you hold a 90+% market share (such as IE did at one time), you can set whatever "standard" you want. Whether its a good or bad "standard" doesn't really matter when you have market share.

    Now that IE's market share is dropping (below 80% now), I think we will see more compliance with web standards.

    Unfortunately for me, I use websites daily that are coded for IE only, many of which use ActiveX. Grr.
     
  10. Kathy223 macrumors newbie

    Joined:
    Sep 17, 2008
    #10
    IMO, they can set whatever standard they want, but along with security, site display is one of the reasons IE is being abandoned. MS got used to setting their own rules because they were the monopoly at one point so expected everyone else to play along, designers included, now that they've got competition from all sides (firefox, google, opera, etc.), they're seeing their strategy fall apart.
     
  11. smogsy macrumors 6502a

    Joined:
    Jan 8, 2008
    #11
  12. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #12
    Look here:

    http://www.sohtanaka.com/web-design/css-fixes-tools-hacks-cross-browser-solutions/

    Then read this:

    View Features

    In terms of tools like you asked remember there are at least 3 versions of CSS to account for, and not all MSIE browsers support all features - not even V8. So Microsoft has dug itself a big hole. Of course other browsers aren't perfect, but most of them support both CSS1 and CSS 2.1 these days (2.1 being the "standard" at present date and time) and nobody should be using CSS 3.0 if you want wide support.

    View CSS 2.1 and CSS 3 support by browsers (excellent, a must read to see what level of CSS is supported per browser type)

    I included the links to help you identify problems in advance.

    -jim
     
  13. cookie1105 macrumors 6502

    Joined:
    Mar 27, 2006
    Location:
    London, UK
    #13
    Nice site btw.

    First off validate your code. You have 8 errors. It normally helps.

    Other stuff I do when trying to solve this sort of problem:

    Set the whole thing in a frame or wrapper (as mentioned above)

    Identify the element with webdeveloper plugin for firefox and reset it's margins. If it doesn't work, reset every elements margins and work on the float and positioning of of elements.

    If I'm sure I've got solid code, I would probably have a look at Position is everything or conditional commenting.

    As a last resort, say you don't support ie6. I have several sites that break in ie6 but work in ie7. Why support it if microsoft doesn't?

    Just some random thoughts...Good luck.
     

Share This Page