Random 1px Margins in IE6 (win)?

[Makosuke]

Ok, I've been reading about IE quirks and bugs for the last two hours, and this is driving me nuts, so I'm hoping that while I sleep somebody will recognize this as a really obvious bug and at least be able to point me to a page that talks about it.

My problem is illustrated on this demo page:
http://moonstonedigital.com/jsdi4/goodideas/aleutiangoosefestival.html

The page basically consists of a 150px wide floated div on the left for a logo and menu, then a div on the right with a 150px left margin with the title and another menu, and a third div right below that for the body text.

Problem: IE6, for no reason I can discern, randomly inserts a 1px left padding and 1px right margin on the upper div, and a 1px margin on the left and right of the lower div. Where this is coming from baffles me. I can make them go away by adding -1px margins, but that of course breaks EVERY other browser, all of which do exactly what you'd expect. Has anybody else seen something like this?

Arrgh! If I ever meet the people responsible for IE's rendering engine, I will kick them somewhere tender for wasting so much of my life.

(By the way, I know that the CSS for the page isn't that clean; I'm trying to get the glaring IE issues ironed out before I start polishing.)

 

[tobefirst ⚽️]

I'm just now learning how to design webpages, so this might not be the right answer, but I'll take a stab at it anyways. I'm reading a book called "designing with web standards" by jeffrey zeldman, and he talks about ie5.5 drawing boxes incorrectly according to CSS spec. It has something to do with the way that ie adds the content, margins, and padding together to get the size of the box, i think.

You may want to check out Tantek Celik's Box Model Hack here.

Actually, now that I'm reading further in the book...all versions of ie dating back quite awhile have a "white space bug" as zeldman calls it. Supposedly, if you get rid of all the white space in your code, you get rid of all the white space in your page in ie. So, try getting rid of all the returns you placed in each line and having the code all on one line.

Those are two things I remember reading recently. Please let me know if either of them works, because I would like to know if I've been able to help. Thanks and good luck!

 

[MacFan25863]

Did you make the site in Dreamweaver? If so, go the the source code, go to edit, go to Find And Replace, and put "undefined" in the find box and "0" in the replace box, then let it rip. That should fix your problem.

 

[FattyMembrane]

i'd say a good 60% of the time i spend at work coding websites is devoted entirely to getting them to work properly in IE. i've found IE7 to be indispensable. It's not perfect, but it's leaps and bounds beyond the way IE normally renders things.

 

[Makosuke]

Thanks for all the suggestions, though as it turned out it was none of the above.

The solution was to explicitly set the default border of all DIVs to 0 at the top of the stylesheet--this eliminates any extraneous margins that shouldn't be there. (Actually, setting the left and right margins of one containing DIV to 0 was enough to fix it on this page, but it's easier just to define it from the get-go.) One friggin', totally pointless CSS property. Ironically, it goes right in with the other pointless, explicity defined property necessary to work around IE box-model bugs.

On the positive side, throwing in div { position: relative; border: 0; } at the top of the stylesheet turns the page from a total disaster with overlapping boxes and exposed backgrounds all over the place into exactly what it should look like. Worth a shot for a quick-fix, anyway.

Incidentally, that "IE7" kit is rather interesting, although it proved completely useless on the bugs that the above two definitions expose; it appears more geared toward dealing with features of CSS2 and 3 that IE doesn't support properly.