<li> whitespace problem

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!
 
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
 
There'll be a cleaner way than using an IE specific stylesheet, I'm sure.

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

If you have one I would like to know. : )
 
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
 
Jazajay said:
lol I bet but it's a quick and easy solution to a simple problem.

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

Sure, remove the empty list item from the markup:

2eml7jd.jpg
 
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>
 
The code I've screenshotted is the code on live… there's an empty li on live right now.
 
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.
 
@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. ;)
 
Back
Top