IE messes up my menu
 

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

Re: IE messes up my menu
 

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.
--
Gazza
Mobile Number Network Checker - http://mnnc.net/
Creative writing & Poems - http://garyjones.co.uk/
Leovanna Leonbergers - http://leovanna.co.uk/

Re: IE messes up my menu
 

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

Re: IE messes up my menu
 

Mikkel Z. Herold mumbled the following on 08/05/2005 15:42:
> 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.

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

Solved it for me on IE6 (XPHome).

--
Gazza
Mobile Number Network Checker - http://mnnc.net/
Creative writing & Poems - http://garyjones.co.uk/
Leovanna Leonbergers - http://leovanna.co.uk/

Re: IE messes up my menu
 

On 08-05-2005 17:31 Gazza wrote:
> 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

Re: IE messes up my menu
 

Mikkel Z. Herold mumbled the following on 08/05/2005 16:58:
> On 08-05-2005 17:31 Gazza wrote:
>
>> 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").

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

--
Gazza
Mobile Number Network Checker - http://mnnc.net/
Creative writing & Poems - http://garyjones.co.uk/
Leovanna Leonbergers - http://leovanna.co.uk/

Re: IE messes up my menu
 

On 08-05-2005 18:49 Gazza wrote:
> 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

Re: IE messes up my menu
 

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.

Re: IE messes up my menu
 

On 09-05-2005 11:15 Thomas Mlynarczyk wrote:
> 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