Invisible anchor with fixed width

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
I need to generate an invisible anchor element (JS widget) to overlay
the list style icon in a nested list.

I'm currently doing this with the following markup:

<ul class="tree">
  <li class="item">
    <a class="menu-icon" href="#">&nbsp;&nbsp;</a>
    <a class="menu-link" href="/menu/link">Menu Link</a>
    <ul class="tree">

And the following CSS: {
  position: relative;
  left: -2em;
  margin-right: -1em;

Needless to say, the &nbsp; is extremely ugly, and very likely to break
with different text sizes and different fonts (this mechanism is part of
a module that will be used with many different layouts)

Unfortunately, forcing the link width with { width: 16px; }
didn't work, and if I use a "display:block", the menu link will be
broken to the next line.

Is there a way to set a fixed width on this invisible anchor?



Re: Invisible anchor with fixed width

Christoph Burschka wrote:
Quoted text here. Click to load it

Yay! I'd forgotten about good old float.

By setting display:block and float:left on the anchor element, I was
able to both set its width and keep it on the same line as the link.


Site Timeline