Print Reseller Scheme
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

<li> whitespace problem

Discussion in 'Website Design Forum:' started by pjohnstone, Mar 4, 2010.

  1. pjohnstone

    pjohnstone Member

    I have a website I am working on and have a problem on this page that occurs on IE7 and IE6

    Our Services Proservartner – Partners in Excellence

    What I have is a list that has two titles for each of the lists sections as seen in the code below:

    Code:
    <div id="menuSub1">   <ul>  <li><a href="#"><strong>Organisational Solutions</strong></a></li>  <li><?php wp_list_pages('child_of=136&title_li='); ?></li>  <li><a href="#"><strong>Functional Solutions</strong></a></li>  <li><?php wp_list_pages('child_of=145&title_li='); ?></li>  </ul>  </div>
    As you can see from the code I also have two PHP arguments calling the list items depending on the parent item.

    Now this menu works totally fine on all modern browers, but on IE7 and IE6 it puts a gap between the 'Titles' and the PHP called menu items. If I take out the PHP statements then the menu works fine and there is no white space. So this issue is caused by having the PHP inside the menu structure. My css for this is here:

    Code:
    #menuSub1 {    }    #menuSub1 ul {margin: 0;    padding: 0;    list-style: none;    }    #menuSub1 li a {    display:block;    padding:0.5em;    text-decoration:none;    }        #menuSub1 li a:link, #menuSub1 li a:visited {    color: #000;    font-family: Tahoma, Geneva, sans-serif;    font-size: 11px;    background-color: #FFF;    display:block;    padding:0.5em;    }    #menuSub1 li a:hover, #menuSub1 li a:active {    color: #000;    font-family: Tahoma, Geneva, sans-serif;    font-size: 11px;    background-color: #CCC;        display:block;    padding:0.5em;    }
    Any help on this would be fantastic as I am totally stumped on how to fix it.

    Damn you Internet Explorer!
     
  2. Jazajay

    Jazajay Active Member

    The problem will be with the listed ul.

    So create a IE conditional for IE7 downwards and in there write something like:
    #menuSub1 ul ul{margin-top:-10px}

    And see if that fixes it.

    Jaz
     
  3. Harry

    Harry Senior Member

    There'll be a cleaner way than using an IE specific stylesheet, I'm sure.

    Conditional comments are bad.
     
  4. Jazajay

    Jazajay Active Member

    lol I bet but it's a quick and easy solution to a simple problem.

    If you have one I would like to know. : )
     
  5. pjohnstone

    pjohnstone Member

    Cheers for getting back to me Jazajay.

    Added in this code:

    <!--[if lte IE 7 ]>
    #menuSub1 ul ul{margin-top:-10px;}
    <![endif]-->

    But nothing has changed. Got any other ides
     
  6. Harry

    Harry Senior Member

    Sure, remove the empty list item from the markup:

    [​IMG]
     
  7. pjohnstone

    pjohnstone Member

    That is actually some old code I was playing about with when I initially had the problem:

    The correct code is this and the problem is still occurring:

    <div id="right-sidebar-header">Our Services</div>
    <div id="menuSub1">
    <ul>
    <li><a href="#"><strong>Organisational Solutions</strong></a></li>
    <li><?php wp_list_pages('child_of=136&title_li='); ?></li>
    <br />
    <li><a href="#"><strong>Functional Solutions</strong></a></li>
    <li><?php wp_list_pages('child_of=145&title_li='); ?></li>
    </ul>
    </div>
     
  8. Harry

    Harry Senior Member

    The code I've screenshotted is the code on live… there's an empty li on live right now.
     
  9. pjohnstone

    pjohnstone Member

    Hooorah!!!

    I solved it with the help of Harry's keen eye!

    The PHP actually created the <li> tags from this line of code:

    <li><?php wp_list_pages('child_of=136&title_li='); ?></li>

    So by me wrapping the php element in a <li> tag I was essentially putting two <li> tags around the whole list - if that makes sense!

    Excellent! This has been driving me nut for about a month - its always something simple.

    Thanks for all the feedback guys.
     
  10. Harry

    Harry Senior Member

    Done ;)
     
  11. Jazajay

    Jazajay Active Member

    @Johnstone
    Glad you got it sorted. :)

    @Harry
    Aww one point to you mon frère.
    You may have won this one but we will meet again, don't you worry. ;)
     

Share This Page