Internet Explorer renders wrong only the first time

Hi,

(Apologies in advance for any cross-posting.)

This is my first post to this group. I hope you can help me. I've got a
page (of my own design) with a table that renders fine in Firefox and
Opera, but in Internet Explorer, the column widths go wonky -
sometimes!

Here's a more complete description. The table on my page (
http://www.smoothcoding.com/debug/bubble.html ) is basically a "bubble
chart." All the cells containing bubbles should be square. (FWIW, they
are square in Firefox.) If I go to this page in Internet Explorer, the
cells containing bubbles are about 3 times their expected width.
HOWEVER, if I force the page to redraw by zooming in and out or by
going back/forward in the history and returning to that page, the cells
become square as expected. To make things even more confusing, if I
save the page (and its associated files) to my computer and open that
local copy in IE, this problem doesn't happen. Also, the widths of the
columns to the left of the bubbles (2nd and 3rd columns) are not
consistent every time I refresh the page.

I'm setting the bubble cell widths both in the CSS stylesheet and the
cells' html attributes, just to be sure. I'm using IE 6 on Windows XP,
with all updates installed. For the life of me, I can't figure out
what's going on. Does anyone have any ideas?

Thanks,
Sarah

francais31415 (AT) gmail (DOT) com wrote:

Here's a more complete description. The table on my page (
http://www.smoothcoding.com/debug/bubble.html ) is basically a "bubble
chart." All the cells containing bubbles should be square. (FWIW, they
are square in Firefox.) If I go to this page in Internet Explorer, the
cells containing bubbles are about 3 times their expected width.
HOWEVER, if I force the page to redraw by zooming in and out or by
going back/forward in the history and returning to that page, the cells
become square as expected. [...]

Try adding

body { font-size: 100%; }

Adding both a foreground and background color is a good idea as well.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Jim Moe wrote:

francais31415 (AT) gmail (DOT) com wrote:

Here's a more complete description. The table on my page (
http://www.smoothcoding.com/debug/bubble.html ) is basically a "bubble
chart." All the cells containing bubbles should be square. (FWIW, they
are square in Firefox.) If I go to this page in Internet Explorer, the
cells containing bubbles are about 3 times their expected width.
HOWEVER, if I force the page to redraw by zooming in and out or by
going back/forward in the history and returning to that page, the cells
become square as expected. [...]

Try adding
body { font-size: 100%; }

Adding both a foreground and background color is a good idea as well.

Jim,

Thanks for your reply. Unfortunately, that doesn't seem to fix it. Any
other thoughts? I also tried adding body { width: 100%; }.

The page has been updated to include the things you suggested.

Sarah

francais31415 (AT) gmail (DOT) com wrote:

Here's a more complete description. The table on my page (
http://www.smoothcoding.com/debug/bubble.html ) is basically a "bubble
chart." [...]

Thanks for your reply. Unfortunately, that doesn't seem to fix it. Any
other thoughts? I also tried adding body { width: 100%; }.

It is the use in CSS of width and height to adjust the size of the

image. While it should work, and does in non-IE browsers, IE gets lost
doing all that business of scaling images and adjusting the size of table
cells. It's such hard and complicated work!
You will have more stable results using the width and height attributes
of <img> directly rather than scaling it with CSS.
Vertical bars of different heights would be easier to manipulate than
circles, and display better. The width is always the same, easy to center.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Jim Moe wrote:

It is the use in CSS of width and height to adjust the size of the
image. While it should work, and does in non-IE browsers, IE gets lost
doing all that business of scaling images and adjusting the size of table
cells. It's such hard and complicated work!
You will have more stable results using the width and height attributes
of <img> directly rather than scaling it with CSS.
Vertical bars of different heights would be easier to manipulate than
circles, and display better. The width is always the same, easy to center.

The chart is supposed to use circles. Maybe some other time I will make
a different type of chart. Thanks for your help. I believe I've found
the solution and will post it in a few days.

Jim Moe wrote:

It is the use in CSS of width and height to adjust the size of the
image. While it should work, and does in non-IE browsers, IE gets lost
doing all that business of scaling images and adjusting the size of table
cells. It's such hard and complicated work!
You will have more stable results using the width and height attributes
of <img> directly rather than scaling it with CSS.
Vertical bars of different heights would be easier to manipulate than
circles, and display better. The width is always the same, easy to center.

The chart is supposed to use circles. Maybe some other time I will make
a different type of chart. Thanks for your help. I believe I've found
the solution and will post it in a few days.

Jim Moe wrote:

It is the use in CSS of width and height to adjust the size of the
image. While it should work, and does in non-IE browsers, IE gets lost
doing all that business of scaling images and adjusting the size of table
cells. It's such hard and complicated work!
You will have more stable results using the width and height attributes
of <img> directly rather than scaling it with CSS.
Vertical bars of different heights would be easier to manipulate than
circles, and display better. The width is always the same, easy to center.

The chart is supposed to use circles. Maybe some other time I will make
a different type of chart. Thanks for your help. I believe I've found
the solution and will post it in a few days.

Wow, sorry for the multiple postings. Anyway, it turned out that I
needed to set the image sizes using px instead of %s. I did this using
inline CSS (the style attribute), and it worked. Also, to be sure it
rendered right in Opera, I had to set the doctype to xhtml 1.0 strict
instead of html 4.01 transitional.