Icons in Menu

I am having problems doing this. So far I cannot get it working right in Fx

And the one I do have so far is pretty shocking code, so I'd rather a neater solution. I have a nice menu layout, which needs icons in each item (which is an anchor. Because everything is dynamically genrated by PHP, I need to have a consistent syntax, preferably using IMG tags.

​

is the way I want it to look (white background on hover).

Each icon is set at 40px high, and 40px wide, and the HTML output goes like this:

<?
\t\n\t<li><a name='".$page['id']."' onclick=\"pages(this.name)\"><img src='images/".$page['icon']."' alt=''/>".$lang[$title]."</a></li>
?>

PHP:

Or for those who cannot read PHP:

<li>
     <a name="name of link" onclick="pages(this.name)">
         <img src="icon.png" alt="">
         Link text
     </a>
</li>

Code (markup):

A good way to do this would be appreciated.

Thanks,

BP

 

You have a couple of ways to go. First, you could simply make the <a> block.

  a {
  display: block;
  text-decoration: none;
  background-color: silver;
  border: 1px solid black;
  zoom: 1;  /*hasLayout required for IE*/
  }

  a:hover {
  background-color: white;
  }

  a img {
  border: none;
  }

  li {
  width: 75px;
  }
===============

  <ul>
    <li><a href="#"><img src="tnail-num-0.png"
         alt="the numeral zero" />
    <br />
    Modules</a></li>
  </ul>

Code (markup):

For more versatility at the expense of some complexity, use inline-block elements.

cheers,

gary

 

I'm thinking you'd have to wrap a span around each link text because you're setting your a's to display: block, and then you can reference the image by a img and the link text by a span, because I think you'll either have to position them absolutely or, maybe better, set text-align:center on the a and maybe vertical-align: bottom for the span and then a fat line-height on the span...

Are those transparent gifs on the menu or pngs? For our retarded friend, you know.

 

@SP: Don't make it more complex than it needs to be. Both the code I posted, and the linked demo work as written in FF, IE6&7, Opera 9.27, Safari(Win) and Konqueror.

cheers,

gary

 

We hit "submit" at the same time, Gary-- I never saw your code. : )

 

Well, Gary's certainly appeals to me more, with the exception of using <br> in the list. Absolute positioning would be technically impossible dynamically generated.

Thanks to both. I am on Vista atm, but when I boot into XP or Kubuntu (which have the script on it), I'll give it a whirl.

Thanks again

 

@SP: I am so used to losing the posting race, I didn't even consider that I might have won one.

@blueparukia: If you set a width, the break won't be necessary. If the width is on the <a>, the need for the zoom property is gone. The inline-block demo doesn't use the <br>.

cheers,

gary