Hello list,

I'm creating a horizontal icon-based menu. Each item has an icon and a
legend. Here's the XHTML:

<div style="padding-left:10px">
<ul class="horizontal_list">

 <li><a href="edit"><div><img alt="User_48" src="/images/icons/user_48.png"
/></div><div>Edit Profile</div></a></li>
 <li><a href="check"><div><img alt="Okdate_48"
src="/images/icons/okdate_48.png" /></div><div>Check payment
history</div></a></li>
 <li><a href="edit"><div><img alt="User_48" src="/images/icons/user_48.png"
/></div><div>Edit Profile</div></a></li>
 <li><a href="check"><div><img alt="Okdate_48"
src="/images/icons/okdate_48.png" /></div><div>Check payment
history</div></a></li>

</ul>
</div>

Being a container, <il> elements will stack over one another. So, I floated
them left.
There's a <div> wrapping the <img>. There's another <div> for the legend. I
let the default block behaviour: They stack ontop of one another, and this
is what I want since I want the legend to be below the icon.
I then make the text centered by applying a text-align:center; to the second
div.

However, wrapping both the image and the text inside an <a>, I've lost the
default browser behaviour of underlining the text link.

The question is: How can I get this legend link to be underlined like any
other default link text?

You can see the rendered menu in the attached JPG.

Thanks in advance,

Marcelo.
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Reply via email to