IE/Win breaks ul/menu padding (and some other things) horribly -- workarounds?

[Weston C]

I've got a website that I thought was going so well, until the client
pulled it up in IE 5 and revealed a train wreck.

http://weston.canncentral.org/misc/X...r/contact.html

If you don't have IE 5 handy, contrast and compare at:

http://www.browsercam.com/view.aspx?proj_id=6485

The "Home" "About Us" "Contact" etc... menus are an absolutely
positioned inline list. The dropdown menu from the parts (normally
hidden/shown via javascript, but left shown for debugging purposes) is
an absolutely positioned list. That's fine in everything I've looked at
except IE5, which collapses the space around each of the elements of the
inline list, and then gives huge gobs of padding to the dropdown, making
it extend the length of the page.

Any idea what's going on? Better yet, any ideas how to workaround this?

The CSS validates. The markup nearly validates as XHTML 1
transitional... the few exceptions are due to some javascript related
attributes I've added to a few elements.

Any help would be greatly appreciated!

regards,
Weston

~ == ~
http://weston.canncentral.org/

[kchayka]

Weston C wrote:

I've got a website that I thought was going so well, until the client
pulled it up in IE 5 and revealed a train wreck.

http://weston.canncentral.org/misc/X...r/contact.html

If you don't have IE 5 handy, contrast and compare at:

http://www.browsercam.com/view.aspx?proj_id=6485
I don't have an account at browsercam.com, so I can't access this page.
However, I do have WinIE 5.0 available. As you found out, it does a
lousy job with inline lists. It does a better job with floated list items.
The "Home" "About Us" "Contact" etc... menus are an absolutely
positioned inline list.
I don't suppose you've looked at this in a browser that allows your text
to be resized, like mozilla? It doesn't take much to make it start
falling apart. Using px units for text size and positioning can create
a rather fragile design, especially when trying to make text fit within
a background image. It is invariably doomed to failure.

As is, at a larger text size, the menu text overflows its background and
becomes unreadable, and the Parts submenu is no longer positioned
properly, making it inaccessible. BTW, your carefully chosen px
font-size is much too small for my reading pleasure, so the text size
has to be increased for me to read your content.
Any idea what's going on? Better yet, any ideas how to workaround this?

1. Give up on a pixel-perfect layout. Use em and/or % units for text.
2. Move the separate submenu list to a nested list under Parts like it
should be, then it should be naturally positioned relative to its parent
and you can get rid of some superflous positioning properties.
3. For better results in WinIE 5.0, try floating the "tlmenu" list items
instead of in-line display.

--
To email a reply, remove (dash)ns(dash). Mail sent to the ns
address is automatically deleted and will not be read.