/    Sign up×
Community /Pin to ProfileBookmark

IE 6 and below problems

Copy linkTweet thisAlerts:
Nov 15.2007

Hi,

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

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

to post a comment
CSS

12 Comments(s) ↴

Copy linkTweet thisAlerts:
@WebJoelNov 15.2007 — <div id="content" [B]style="width:auto;"[/B]>

<div id="masthead" [B]style="width:auto;"[/B]> [/QUOTE] Fixes this in IE6
Copy linkTweet thisAlerts:
@LizzyBauthorNov 15.2007 — 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
Copy linkTweet thisAlerts:
@WebJoelNov 15.2007 — 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 [I]merely a pixel[/I], which is enough overage to cause an element to 'drop' below it's neighbor..

Anyway, glad the fix works for you. ?
Copy linkTweet thisAlerts:
@CentauriNov 16.2007 — 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.
Copy linkTweet thisAlerts:
@LizzyBauthorNov 16.2007 — 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
Copy linkTweet thisAlerts:
@WebJoelNov 16.2007 — ... 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...[/QUOTE] 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. ?
Copy linkTweet thisAlerts:
@CentauriNov 17.2007 — As far as the doctype goes, if it is not the [B]full[/B] 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">[/CODE]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.
Copy linkTweet thisAlerts:
@LizzyBauthorNov 17.2007 — 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
Copy linkTweet thisAlerts:
@CentauriNov 17.2007 — The FSL site centers perfectly in IE6 for me...
Copy linkTweet thisAlerts:
@LizzyBauthorNov 17.2007 — yes IE6 is fine - but not 5.0,5.5
Copy linkTweet thisAlerts:
@CentauriNov 17.2007 — 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 [COLOR="Blue"]text-align:center;[/COLOR] on the body css, combined with [COLOR="Blue"]text-align:left;[/COLOR] on the wrapper css (to cancell out centred text) will centre in the older browsers.
Copy linkTweet thisAlerts:
@LizzyBauthorNov 17.2007 — great! - thanks for that ?
×

Success!

Help @LizzyB spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.5,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...