Weird html error...

Question

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?

Answer 1

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.