SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)

    menu items IE margin

    http://www.yellowshoe.com.au/alistair_temp/index.html

    On this page it looks as I intended in firefox but in IE it adds a large margin? to the bottom. I've explicity set all margin, padding on everything to do with the menu to zero but still...

    Any clues?

    Ta,

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    c'mon gurus / helpful guys / smart peoples..

    I have a list of links and when viewed in IE I can't seem to get rid of a margin at the bottom of each item.

    Pretty pretty please have a looksy..

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Give me a few minutes and I will, ok?

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Adding the following CSS to your stylesheet will solve the problem.
    Code:
       /* Fix Win-IE. Hide from Mac-IE \*/
       	* html #mainMenu li {float: left;}
       	* html #mainMenu li a {height: 1%;}
       /* End */
    Note that only Internet Explorer for Windows will see this code (versions 5.01, 5.5 and 6). I don't know if the code needs to be hidden from Mac-IE 5, since I don't have one.

    Perhaps one of our Mac users here could give me a hand and test this on Mac-IE?
    Last edited by Dan Schulz; Aug 23, 2006 at 02:25. Reason: Fixed IE hack

  5. #5
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Thanks Dan,

    That works perfectly, could you explain the solution to me?
    Why the repetition?

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's something I found on A List Apart.

    Bah! I didn't notice the repetition. You can safely remove it. Sorry about that (updates my code library to fix the hack).

    Basically, Internet Explorer will treat the line breaks between your list items as white space. This hack uses the float to trick IE into thinking it's not white space (which it isn't really). The 1% height fixes another bug that is caused when you float the list items. Without it, the links won't display properly as block-level elements.

    You can read more about it here.

    http://www.alistapart.com/articles/horizdropdowns

  7. #7
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Another solution is to remove the whitespace between the list items from the markup:
    HTML Code:
    <ul><li
      id="nav1"><a href="...">Link 1</a></li><li
      id="nav2"><a href="...">Link 2</a></li><li
      ...
      id="navN"><a href="...">Link N</a></li></ul>
    Birnam wood is come to Dunsinane

  8. #8
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Thanks guys,

    And after all the times I have read - The browser simply ignores white space..
    IE once again an exception to the rules..

    Thanks for the link Dan.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •