Weird html error...

I have a list of links that are exhibiting some really weird behavior. The code is:

<ul id="home" class="panel" title="title_here" selected="true">
   <li><a href="#search">Search for Name</a></li>
   <li><a href="#browse">Browse by Department</a></li>
</ul>

It is part of an iPhone site, using the iUI framework. I know uiUI is better, but my boss likes the look of the iUI framework more, so I have to use that. This framework works by using the 'selected="true"' attr, and when a link takes you to a different id, uses js to add the 'selected="true"' to the id you link to.

My problem is: When you follow a link, and then go 'back', the clickable section changes to just the background image of the link, instead of the whole 'li'. Here is the css:

body > ul > li > a {
display: block;
margin: -8px 0 -8px -10px;
padding: 8px 32px 8px 10px;
text-decoration: none;
color: inherit;
background: url(listArrow.png) no-repeat right center;
}

Would expanding the actual image size (in PS, paint, etc) fix this?

From stackoverflow

• If you can, avoid negative margins as much as you can. They can become very, very nasty.

  Shots in the dark:

  • Have you set up any styles for a:link, a:visited, a:hover? If not, then add them to current style and check again

  Example:

  body > ul > li > a,
  body > ul > li > a:link,
  body > ul > li > a:visited,
  body > ul > li > a:hover,
  body > ul > li > a:active {
    display: block;
    margin: -8px 0 -8px -10px;
    padding: 8px 32px 8px 10px;
    text-decoration: none;
    color: inherit;
    background: url(listArrow.png) no-repeat right center;
  }
  

  • Try setting padding to the LI's, instead of negative margins to A's;

  • Try setting background to LI's instead of A's, it the design allows for that, and getting rid of padding in A's.

  It sounds to me that it's actually a bug in iPhone / iUI; clearly, it it works fine one time but not the next one there's something funny going on there.

  Seb : Glad I could help! Just out of curiosity: what did you do exactly to solve this? I.e. which of my three suggestions did you follow?

  W_P : The first one, setting the a:pseudoclasses to the same style