IE 6 and below problems
I have built a site here:
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.
Fixes this in IE6
<div id="content" style="width:auto;"
<div id="masthead" style="width:auto;"
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.
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.
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.
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!
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.)
Originally Posted by LizzyB
As for ie jog bug... heard of it, recognize how to correct it, other than that, *I* am not well versed in the matter.
As far as the doctype goes, if it is not the full version that includes the url reference, for example :
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.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
For an overfview of some of IE's bugs, including the 3px jog, see this P.I.E. Article.
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
but it still sits on the left. I have just resigned myself to this fate!
The FSL site centers perfectly in IE6 for me...
yes IE6 is fine - but not 5.0,5.5
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.
great! - thanks for that
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)