SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Apr 2006
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Another IE6 Mystery

    Hi,
    Having this problem with an unordered nested list, which in IE6, when you click on one the nested <li> within the navigation, makes the whole <ul> which begins the nested list move up. When you then refresh the page, it falls back into position. Everything works fine in IE7 and FF, Safari etc. It is driving me nuts, and I was hoping someone could shed some light.

    Have highlighted in the list the item which when you click on it, brings the rest of the items up the page.

    The menu is created in PHP, but the xhtml produced is as follows:

    <div id="navigation">
    <ul>
    <li><a class="home" href="index.php">Home</a></li>
    <li><a class="what_we_do" href="what_we_do.php">What we do</a>

    </li>
    <li><a class="client_services" href="client_services.php">Client Services</a>
    <ul>
    <li><a class="our_focus" href="our_coverage.php">Our Coverage</a></li>
    <li><a class="how_we_deliver" href="how_we_deliver.php">How we Deliver</a></li>
    <li><a class="our_process" href="our_process.php">Our Process</a></li>
    <li><a class="our_clients" href="our_clients.php">Our Clients</a></li>
    </ul></li>
    <li><a class="candidate_zone" href="candidate_zone.php">Candidate Zone</a>
    </li>
    <li><a class="news" href="news.php">News</a></li>
    <li><a class="get_in_touch" href="get_in_touch.php">Get in Touch</a></li>
    </ul>
    </div>

    Anyone had a similar problem?
    Many thanks!

  2. #2
    SitePoint Zealot
    Join Date
    Apr 2007
    Location
    New London, CT
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Got a link or an address?

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's probably to do with some CSS defined for those IDs or classes, but you're not showing us that half. If it is, the post is in the wrong forum, too, but I'll move it if that's the case.
    Birnam wood is come to Dunsinane

  4. #4
    SitePoint Member
    Join Date
    Apr 2006
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    Thanks for your replies - sorry for being vague, but am not allowed to show the site (long story!). It may well be the CSS.... see below... losing the plot!.

    #navigation ul {
    float:left;

    margin: 20px 0 0 10px;
    margin: 0px 0 0 10px;
    width:130px;
    }
    #navigation ul li ul {
    width:130px;



    }
    #navigation li {
    display:inline;
    width:130px;

    }
    #navigation li a {
    display:block;
    margin-bottom:15px;
    color:#fff;
    font-size:1.2em;
    clear:both;
    font-weight:normal;
    width:130px;
    padding-left:10px;
    }
    #navigation ul ul li a {
    margin-bottom:5px;
    font-size:1em;
    }
    #navigation li a:hover {
    text-decoration:none;
    }

    Many thanks for having a look!

  5. #5
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can't replicate this bug - are you using a proper doctype?

  6. #6
    SitePoint Member
    Join Date
    Apr 2006
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    Yes, and the code validates as XHTML 1.0 Strict. The real mystery is that the menu "shifts" in IE when you first load the page, but then when you refresh, it shifts back into its correct position.
    I will ask the client if I can show the site to you, and then it will be a lot clearer! I just cant think of why this is just happening in IE6 - and as I say, when you refresh the problem is resolved!
    If you have any ideas I would be really grateful - otherwise I will try and show you the site tomorrow!
    Many thanks

  7. #7
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My guess is that it's probably an inheritance issue that IE6 is wrongly adhering to; it would be a lot clearer if you could post all the styles from the stylesheet and the complete markup, if thats possible?

    ------ EDIT -----
    Just a shot in the dark- trying adding 'layout' to the #navigation li as it is currently set as an inline element. Add 'layout' by floating it, using zoom:1, height:1&#37; etc.

    Let me know what happens!

  8. #8
    SitePoint Member
    Join Date
    Apr 2006
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    Many thanks for your help. In the end, I recreated the menu using definition lists instead - problem solved!
    Many thanks once again.

  9. #9
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You shouldn't use a definition list for this as it's semantically incorrect.

    Can you upload the original problem somewhere as there should be a simple fix for something like this and should work fine using an unordered list which would make more semantic sense.

  10. #10
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Instead of inline display on the <li>s, float them left as you already have the width set to that of the <ul>.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,775
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Sounds like a common "haslayout" issue with ie (see faq in haslayout).

    Floating the lists as suggested by centauri would usually cure the problem or applying some other haslayout fix to the list and anchor. However the best way to squash all whitespace bugs in IE is to float the list and the anchor and is as far as know the only 100&#37; way to ensure that all gaps are killed off completely. Its these gaps that cause the page to jump when it is refreshed.


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
  •