Webmaster Forum / HTML, CSS, Scripts / CSS / June 2008

Hi

If you look at the following mock-up: http://tinyurl.com/5tqkgc ,
which contains a text placeholder "Menu goes here" where the menu will
be, the page looks the way it's intended to look in all browsers.

However, if you look at the following mock-up: http://tinyurl.com/5wajmk
, the page looks the way it's intended to look in all browsers
*except* IE 5.5 and IE6. (I'm using the multiple IE installation that
one can download from http://tredosoft.com/Multiple_IE in order to
test my pages in IE 5.5 and IE6.)

The css for the webpages proper is included in the above htm files,
while the css for the menu is imported, and is located at http://tinyurl.com/5wu6kf
.

In both IE5.5 and 6, simply adding the html (the uls and lis) for the
menu items has the weird effect of adding a 29px space below the
footer (the grey navigation bar), which is supposed to be at the
bottom of the viewport, and is, in the absence of the menu's html
code. (This problem only occurs when the height of the webpage's
content is less than the height of the viewport - when there is a
height overflow, the footer does appear at the bottom of the page as
it should).

Worse still, in IE5.5 - but not in IE6 - the menu div itself doubles
in height when the html for the menu items is added to the menu, which
makes it look awful. Weirdly, the little "OS" graphic in the left hand
table cell within the menu div is vertically centred within the table
cell it's in, as it's meant to be; whereas the menu text is in the
same position vertically (i.e. vertically centred within where the
table cell used to be before its height was increased) as it is when
there is no menu html code.

Also, I should mention that I'm intentionally running IE6 in quirks
mode (whereas all modern browsers are running in strict mode), for
reasons I've explained elsewhere in this forum. This *should* mean
that IE 5.5 and 6 will behave identically to each other, but in this
instance they aren't doing so.

I think there must be something in the rather complex menu.css file at
http://tinyurl.com/5wu6kf that IE5.5 and 6 can't cope with, but
tracking down exactly what is causing the problem and finding a
workaround, is way beyond me - can anyone help?

I shold also mention that the drop-downs don't work in IE 5 and 6, but
I've worked around that by making the top level menu items into links
that take you to another page if you click on them (whereas in all
modern browsers, hovering on the top level menu items activates the
drop-down menu). The page the link takes you to displays the drop-down
items as a site-map-like list of links in the page. So that isn't a
problem - it's the way it displays incorrectly that is a problem.

One other thing; the site I'm developing is non-commercial, is in an
extremely good cause, and I'm not being paid for doing it. My
knowledge of css is moderate rather than good, but I won't have time
to read any textbooks on css until after the site has gone live to the
public, as I'm under very tight deadlines. So I need a lot of hand
holding, and would appreciate your help in tracking down the cause of
the above problems and finding a workaround.

Dave

PS - Futher to some discussion in another thread about my need to
support IE5.5 users and to run IE6 in quirks mode while running all
modern browsers including IE7 in strict mode, that discussion has
already taken up more of my time and energy that I have available to
discuss such things, so if you have a deep objection to these facts,
then please move on to another thread. Thanks.