Internet Explorer renders wrong only the first time

  • Thread starter Thread starter francais31415
  • Start date Start date
F

francais31415

Hi,

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 some
browsers, 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
 
Hi Francis,

Its a classic trap! Overdosed styling.
Firstly I tested your page with IE7. It worked perfectly but when I applied
my own User Stylesheet the column widths shrunk and the bubbles turned to
squares.
I suggest that you drop the server side styling and use percentage sizing
for your columns with the total table width set to 100%. Set your table
background color to white as you are using png files which are unsupported
in IE6 and the transparency color is not rendered to the background color,
giving your bubbles a square shape on non-white backgrounds. To centre your
bubles within the table cells set the cell alignment attributes to middle
and center.

The most important thing that you are forgetting is that the User Is King!
The user should always be able to decide how they want to see their web
pages and windows forms based on their personal or accessibility
preferences. All browsers render pages differently, probably 'cause of the
sheer complexity of the programming involved. Target the browser which
caters for your biggest user audience (naturally its IE see thecounter.com).
The easiest way to cater for all browsers is to use the lowest common
denominator, and that is no server-side styling and let the client decide
how it is going to render the page depending upon the users preferences and
the rendering engine installed. This also saves you time and money trying to
cater for all browsers!

Can I say it again. KISS - Keep it Simple, Stupid and UiK

Regards.
 
Rob said:
Firstly I tested your page with IE7. It worked perfectly but when I applied
my own User Stylesheet the column widths shrunk and the bubbles turned to
squares.
I suggest that you drop the server side styling and use percentage sizing
for your columns with the total table width set to 100%. Set your table
background color to white as you are using png files which are unsupported
in IE6 and the transparency color is not rendered to the background color,
giving your bubbles a square shape on non-white backgrounds.
Click to expand...

Hi Rob,

Thanks for your suggestions. The table should not be stretched to 100%
wide - I want the bubbles to have the same height as width (they should
be round, not oval, contained in square cells, not rectangular).
Anyway, I think I've found the solution. I'll post it after the
weekend. I will set my table background to white as you suggested -
thank you for finding that problem, as I had not seen it.

Sarah
 
It turned out that I needed to set the image sizes using px instead of
%s. 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.

Thanks so much for looking at my page, and for your suggestions on
keeping it accessible to the user.
 
Back
Top