• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

<li> whitespace problem


#1
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!
 

Jazajay

Active Member
#2
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
 
#5
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
 
#7
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>
 
#9
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.
 

Jazajay

Active Member
#11
@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. ;)