www.webdeveloper.com
Results 1 to 13 of 13

Thread: IE 6 and below problems

  1. #1
    Join Date
    Jan 2007
    Location
    Shropshire, UK
    Posts
    77

    IE 6 and below problems

    Hi,

    I have built a site here:
    http://www.whizzliz.co.uk/FoodSurveys/index.php

    and in IE6 or below all the right content is dropping below my left nav and I cannot figure why. I have specifically design it so that the outer containers dont have padding or margin to avoid box model problems but im still having no luck now..

    Grateful of any help.

    Liz

  2. #2
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    <div id="content" style="width:auto;">

    <div id="masthead" style="width:auto;">
    Fixes this in IE6

  3. #3
    Join Date
    Jan 2007
    Location
    Shropshire, UK
    Posts
    77
    Hey thats great! - also fixed in IE 5.0 and 5.5 (bizarrely as they never recognise margin:auto)

    Any ideas as to why my code was breaking before? Im sure my pixels added up ok.

    Liz

  4. #4
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    What leaps to mind is that without a valid !doctype, IE will not recognize "margin:0 auto;". I don't recall, -did your document have a valid !doctype? I think that it did. It may have, then, it's another issue.

    This seems to be that either header or content width exceeded available space. "width:auto" seems to cure this. In a fixed-width container that contains one (or more) additional fixed-width elements, it is handy to have at least one 'fluid width' element to 'shock-absorb' any changes that occur browser-to-brower (like default paddings/margins, font-sizes, etc.). We could be talking in terms of merely a pixel, which is enough overage to cause an element to 'drop' below it's neighbor..

    Anyway, glad the fix works for you.
    Last edited by WebJoel; 11-15-2007 at 10:52 AM.

  5. #5
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    The fixed width content div beside the float invoked IE6's 3px jog bug, meaning then it didn't add up. Removing the width setting allows the browser to determine the width to fit, and eliminates the bug.

  6. #6
    Join Date
    Jan 2007
    Location
    Shropshire, UK
    Posts
    77
    Thanks for the advice - that makes a lot of sense to have the one div on auto. I do always have the doctype on but i find that below IE6 my centered designs (using margin:0 auto on a wrapper) never center which made me think that auto was a thing to avoid.

    Please tell me though what is this 3px bug? Another new one on me!
    Thanks again,
    Liz

  7. #7
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Quote Originally Posted by LizzyB
    ... but i find that below IE6 my centered designs (using margin:0 auto on a wrapper) never center which made me think that auto was a thing to avoid...
    I believe that only a pixel width or percentage width, and margin:auto; will center a element, "Auto" is not quite the same as "100%" (and in the case of width:100%, there would of course, be no need to 'center' as it cannot get more 'centered' than it already is.)

    As for ie jog bug... heard of it, recognize how to correct it, other than that, *I* am not well versed in the matter.

  8. #8
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    As far as the doctype goes, if it is not the full version that includes the url reference, for example :
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    then IE can still be in quirks mode where things like auto margin centering will not work. As long as the doctype is complete, these methods will work fine.

    For an overfview of some of IE's bugs, including the 3px jog, see this P.I.E. Article.

  9. #9
    Join Date
    Jan 2007
    Location
    Shropshire, UK
    Posts
    77
    Thanks for that link! I think i was referred to a page within that in another post (for the peekaboo bug) but i didnt realise it was part of a bigger listing of IEs faults.

    As or the doctye I do always have the complete doctype but my sites never center in IE below 6.

    eg I have a fixed width on the wrapper and margin:0 auto on this site
    (http://www.whizzliz.co.uk/FoodSurveys/index.php)
    but it still sits on the left. I have just resigned myself to this fate!

    Thanks again
    Liz

  10. #10
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    The FSL site centers perfectly in IE6 for me...

  11. #11
    Join Date
    Jan 2007
    Location
    Shropshire, UK
    Posts
    77
    yes IE6 is fine - but not 5.0,5.5

  12. #12
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    I forget you like to support the older browsers - I consider their user base too small to worry...

    IE5 won't recognise the auto margins, but using text-align:center; on the body css, combined with text-align:left; on the wrapper css (to cancell out centred text) will centre in the older browsers.

  13. #13
    Join Date
    Jan 2007
    Location
    Shropshire, UK
    Posts
    77
    great! - thanks for that

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles