Sent by michael on 19 February 2002 23:11
What I've found is that this seems to be an IE specific problem related to
using a font with a variable size such as ems or %. What happens is that the
width of the #content div varies by a few pixels at different text sizes.
This happens even though the div is set to a specific width. This caused a
problem with Ray's original layout since there was no room for expansion in
the #ducttape div.
Basically I explained to Ray that there were two options. Widen the
#ducttape slightly, or contract the width of the #content div. I suggested a
width of 480px for the #content div, which was a bit of an overcompensation,
but it was based on some of his other numbers. He could actually go as wide
as 495px without running into the problem.
To illustrate the problem a little better I used Ray's page and played with
the width of the #content div. I'v included a red border around it so that
you can see how it expands and contracts as you adjust the text size. The
first one is here:
http://www.treetrybe.com/imm/tests/ray_glitch.html
As you adjust the text size in the browser (again this is IE only), the menu
should drop below, or come back up, and you should also see the width of the
#content div expand and contract by about a pixel or two. The width of the
#content div is specified at 498px, and the font specified as .8em/1.5em.
Specifying anything larger than this causes the problem with the #menu div
dropping below the #content div, but as I said, adjusting the text size in
the browser also causes the problem.
This page on the other hand does not experience the problem and is rock
solid.
http://www.treetrybe.com/imm/tests/ray_solid.html
It does not expand or contract as you adjust the text size. Here I've
specified a width of 495px. This seemed to be the widest width in the 490
range that remained consistent. Why this width works while anything wider
doesn't, I have no idea. All I can say is IE is bugging. Here again, I have
the font specified as .8em/1.5em. If I were to set it to 1em/1.5em the
#content div becomes variable again, but there is now enough breathing room
that the #menu div does not drop below the #content div.
For the record I am using IE5.5 on a Win machine. I'd like to know if this
same problem occurs with the Mac version of IE as well as IE6.
Perhaps there is another explanation for this behavior. I've seen something
similar happen with italicized text, but beyond chalking it up to
discrepancies in IE, I haven't got a clue why it happens.
--michael
