SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    London
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE/Mac ignoring absolute positioning

    Hi

    Am working on a nifty navigation at the moment:

    Code:
    <div id="nav">
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a>
      <ul>
      <li><a href="#">History</a></li>
      <li><a href="#">People</a></li>
      <li><a href="#">Philosophy</a></li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Services</a></li>
    </ul>
    Anyway, the plan is for the top level navigation to float horizontally across the top, with the sub-navigation floating horizontally directly underneath it, like so:


    Home | About | Contact | Services
    History | People | Philosophy


    To achieve this, I've assigned the following CSS rule, in order to break the sub-navigation out of the top level navigation:

    Code:
    #nav ul ul {position: absolute; top:8em; left:0}
    This works in every browser I've tested on, except for IE/Mac, where the absolute positioning is ignored by the browser and the sub-nav displays in the top nav, like so:

    Home | About | History | People | Philosophy Contact | Services

    Any IE/Mac experts know why this is happening? I'm at a dead end!
    Webcredible for usability & accessibility.
    Read all about the Disability Discrimination Act (DDA)

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm not an iE/mac expert but the code above seems to work ok on my old ie5.1 mac.

    Assuming the basics were like this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    ul {margin:0;padding:0;list-style:none}
    #nav ul ul {position: absolute; top:8em; left:0}
    li {float:left;}
    </style>
    </head>
    <body>
    <div id="nav">
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a>
      <ul>
      <li><a href="#">History</a></li>
      <li><a href="#">People</a></li>
      <li><a href="#">Philosophy</a></li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Services</a></li>
    </ul>
    </body>
    </html>
    That code seems to work ok so we would need a bit more code as its obviously something else it doesn't like .

    Theres some common mac bugs listed here that might prove useful.

    http://www.macedition.com/cb/ie5macbugs/

    Paul

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    London
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Paul!
    T
    Webcredible for usability & accessibility.
    Read all about the Disability Discrimination Act (DDA)


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
  •