IE messes up my menu

[Mikkel Z. Herold]

Hi.

Can anyone tell me why IE cannot handle my menu correctly on
http://www.mzh.dk/sjov.html (and the other pages on my site)?

FF, NN7 and Opera have no problems, but IE does three things wrong:

1) The spacing between all the main menu items (i.e. "Blog", "Mig selv"
etc.) is too big (although I can live with that),

2) The spacing between a main menu item and its sub-items (e.g. "Sjove
sager" and "Billeder") is too big

3) The first sub-item (e.g. "Billeder") is somehow negatively indented
or perhaps the other items are positively indented

I have made a special stylesheet for IE and included it with

<!--[if IE]>
<link rel="stylesheet" type="text/css"
href="http://www.mzh.dk/delt/ie.css" media="screen">
<![endif]-->

but somehow my margin and padding settings do not seem to register with IE.

Any help would be greatly appreciated.

Mikkel

--
"At first just a rustle of canvas
And the gentlest breath on my face
But a galloping line of white horses
Said that soon we were in for a race"
Sting - The Wild Wild Sea

http://www.mzh.dk

 

[Gazza]

Mikkel Z. Herold mumbled the following on 08/05/2005 14:09:

Hi.

Can anyone tell me why IE cannot handle my menu correctly on
http://www.mzh.dk/sjov.html (and the other pages on my site)?

I think the problem is likely to do with IE's whitespace bug, which
appears when anchor's inside list items are displayed as block. Google
has more info. There's several ways to stop this, but you may find
simply removing the extra blank lines you have in your source between
the list items is sufficient for your design to appear as you intended.

So instead of:

<li><a ...>...</a></li>

<li><a ...>...</a></li>

....you have:

<li><a ...>...</a></li>
<li><a ...>...</a></li>

....instead.

3) The first sub-item (e.g. "Billeder") is somehow negatively indented
or perhaps the other items are positively indented

Although there's nothing obvious that I could see in your CSS, you may
find the above actions solve this problem too. Tinker with the
whitespace - e.g. remove all of it, so the relevant code is all on one
line, then check. If this solves the problem, then, yes, it's IE's
whitespace bug related.

 

[Mikkel Z. Herold]

On 08-05-2005 15:47 Gazza wrote:

Hi

There's several ways to stop this, but you may find
simply removing the extra blank lines you have in your source between
the list items is sufficient for your design to appear as you intended.

That solved part of the problem: The main menu items are now closer
together (what a silly bug!).

But there are still problems with the positioning and indentation of the
subitems.

Mikkel

--
"At first just a rustle of canvas
And the gentlest breath on my face
But a galloping line of white horses
Said that soon we were in for a race"
Sting - The Wild Wild Sea

http://www.mzh.dk

 

[Gazza]

Mikkel Z. Herold mumbled the following on 08/05/2005 15:42:

On 08-05-2005 15:47 Gazza wrote:

Hi




That solved part of the problem: The main menu items are now closer
together (what a silly bug!).

But there are still problems with the positioning and indentation of the
subitems.

In your ie.css, add the following:
#underpunkter li {
float: left;
}

Solved it for me on IE6 (XPHome).

 

[Mikkel Z. Herold]

In your ie.css, add the following:
#underpunkter li {
float: left;
}

Case solved - almost!

Your solution works great, except for the very last item in the menu
("Gæstebog").

Mikkel

--
"At first just a rustle of canvas
And the gentlest breath on my face
But a galloping line of white horses
Said that soon we were in for a race"
Sting - The Wild Wild Sea

http://www.mzh.dk

 

[Gazza]

Mikkel Z. Herold mumbled the following on 08/05/2005 16:58:

Case solved - almost!

Your solution works great, except for the very last item in the menu
("Gæstebog").

What's wrong with it? Looks fine in IE and FF here.

 

[Mikkel Z. Herold]

What's wrong with it? Looks fine in IE and FF here.

Sorry, should have made that clearer: The problem is the sub-items under
"Gæstebog". If you press the last menu item there is an empty space
between the main button and the sub-items, at least here (IE6 on WinXP
Home).

Mikkel

--
"At first just a rustle of canvas
And the gentlest breath on my face
But a galloping line of white horses
Said that soon we were in for a race"
Sting - The Wild Wild Sea

http://www.mzh.dk

 

[Thomas Mlynarczyk]

Also sprach Mikkel Z. Herold:

Sorry, should have made that clearer: The problem is the sub-items
under "Gæstebog". If you press the last menu item there is an empty
space between the main button and the sub-items, at least here (IE6
on WinXP Home).

Just a wild guess, but IE has a bug which doubles the margin of an element
on the side to which it is floated. The cure is simple, counter-intuitive
and in violation of standards:

#underpunkter li {
float: left;
display: inline;
}

Maybe that helps.

 

[Mikkel Z. Herold]

Just a wild guess, but IE has a bug which doubles the margin of an element
on the side to which it is floated. The cure is simple, counter-intuitive
and in violation of standards:

Thanks for your advice - it helped move all the sub-items further to the
left as they are in FF.

As for the problem with the last main item, that has been solved too: I
had simply forgotten to include the stylesheet reference on that page...
#-o doh!

So, now my menu looks perfect in both FF and IE - a big thank you to
Gazza and Thomas for your help!

Mikkel

--
"At first just a rustle of canvas
And the gentlest breath on my face
But a galloping line of white horses
Said that soon we were in for a race"
Sting - The Wild Wild Sea

http://www.mzh.dk