IE messes up my menu

Discussion in 'HTML' started by Mikkel Z. Herold, May 8, 2005.

  1. 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
     
    Mikkel Z. Herold, May 8, 2005
    #1
    1. Advertising

  2. Mikkel Z. Herold

    Gazza Guest

    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/
     
    Gazza, May 8, 2005
    #2
    1. Advertising

  3. 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
     
    Mikkel Z. Herold, May 8, 2005
    #3
  4. Mikkel Z. Herold

    Gazza Guest

    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/
     
    Gazza, May 8, 2005
    #4
  5. 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
     
    Mikkel Z. Herold, May 8, 2005
    #5
  6. Mikkel Z. Herold

    Gazza Guest

    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/
     
    Gazza, May 8, 2005
    #6
  7. 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
     
    Mikkel Z. Herold, May 8, 2005
    #7
  8. 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.
     
    Thomas Mlynarczyk, May 9, 2005
    #8
  9. 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
     
    Mikkel Z. Herold, May 9, 2005
    #9
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Guest
    Replies:
    2
    Views:
    568
    Guest
    Feb 2, 2004
  2. Guest
    Replies:
    0
    Views:
    517
    Guest
    Feb 9, 2004
  3. =?Utf-8?B?TWFydGlu?=

    ASP.Net messes with my form's action attributes!

    =?Utf-8?B?TWFydGlu?=, Apr 5, 2004, in forum: ASP .Net
    Replies:
    3
    Views:
    2,720
    =?Utf-8?B?TWFydGlu?=
    Apr 6, 2004
  4. Dilip
    Replies:
    3
    Views:
    499
    Dilip
    Dec 30, 2004
  5. =?Utf-8?B?TWFya3VzIFJ5dHRlcmt1bGw=?=

    Masterpages/themes messes up designmode

    =?Utf-8?B?TWFya3VzIFJ5dHRlcmt1bGw=?=, Feb 27, 2006, in forum: ASP .Net
    Replies:
    3
    Views:
    1,396
    =?Utf-8?B?TWFya3VzIFJ5dHRlcmt1bGw=?=
    Feb 28, 2006
Loading...

Share This Page