2 Replies Latest reply on Mar 27, 2010 11:20 AM by Nancy OShea

    Foiled by IE6 (and perhaps newer versions as well)

    oadesign Level 1

      I am having problems with a page rendering properly in IE6 and would really appreciate any help I can get in solving this.

       

      The page previews perfectly in Firefox and Safari on my Mac, but when I fire up Fusion to view it in IE6 under XP, there are horizontal gaps that appear between divs, and I have no ideas as to why this is happening. I've tried adding clearfloat to the right-side divs inside the areaMain div, but it made no difference whatsoever.

       

      At the moment I have a temporary red border around the areaMain div in an attempt to discern what's going on, but so far nothing I've tried has helped. I'm hoping that someone here can provide me with a quick fix, as I'm still very much learning (and struggling with) CSS. after 20+ years designing for print, designing for the web has been a daunting challenge, to say the least, particularly where IE is involved.

       

      Here is the test page:

      http://www.thelegaldoc.com/test/

       

      If you could, please keep your replies to the question I've posed, as I know my page isn't perfect. Once I get this down I'll work on using CSS positioning for my rollovers and alternatives to Flash for accessibility.

       

      Thanks,

      oadesign

        • 1. Re: Foiled by IE6 (and perhaps newer versions as well)
          Ben M Adobe Community Professional

          What percentage of your users are using IE6?  Microsoft has recommended that users upgrade to a later version of IE.  I would recommend with your type of layout and functionality that you base your decision to support IE6 based on your analytics.

           

          If you do need to continue using it consider the following:

           

          First you have some validation errors that could affect even IE7+, Firefox or Safari, such as end tags missing and other misc. code errors.  Run your page through the validator for specifics here: http://validator.w3.org/

           

          You also have a few minor CSS errors: http://jigsaw.w3.org/css-validator/  .  Lastly looking at the CSS validator the default is 2.1 which is what IE8 supports.  IE9 (in testing phases) will be supporting CSS3 which every other browser besides IE right now supports.  IE6 was not built on the CSS standards for any version.  Because of this it is really hard to determine what is wrong, and a lot just involves removing your current code and modifying the layout specifically for IE6 which is why I made my initial comment about supporting IE6.

          • 2. Re: Foiled by IE6 (and perhaps newer versions as well)
            Nancy OShea Adobe Community Professional & MVP

            The page previews perfectly in Firefox and Safari on my Mac...

             

            Not for me.  If you increase text size just 1 or 2 clicks (zoom, text only), you'll see what I mean.

             

            I'm not trying to go off topic.  Your page looks very nice, but the code has many obstacles in it that will require more re-working than just a few quick fixes or conditional comments for IE6.

             

            Height values are restrictions in all browsers EXCEPT IE.  Avoid height values on containers with text in them as they will fall apart when text-size is increased.  If necessary, use min-height for browsers that support it.  Use a conditional comment or hack for IE6.

             

            #div {

            min-height: 150px;

            _height: 150px; /**for IE6 only**/

            }

             

            I notice you have used relative positioning on almost every container in your page including the ones that are floated.  I don't understand why you did this.  Default CSS positioning (which is no positioning at all) is usually best for most web pages. Elements are positionined with floats, margins & padding.

             

            Learn CSS positioning in 10 Steps

            http://www.barelyfitz.com/screencast/html-training/css/positioning/

             

             

            Nancy O.
            Alt-Web Design & Publishing
            Web | Graphics | Print | Media  Specialists
            http://alt-web.com/
            http://twitter.com/altweb
            http://alt-web.blogspot.com